/* ============================================================================
   HINT IT — v2 : /learn-more page styles (page-specific, linked per-page)
   Scoped under `.hint-v2`, token-driven. Ports the legacy `.afc-*` hero + the
   alternating feature sections, plus the accent color-cycle keyframe (which the
   legacy page pulled from a global stylesheet we no longer load).
   ============================================================================ */

/* ---- accent color cycle (ported from legacy colorChange) ----
   Decorative one-page rainbow — deliberately NOT promoted to tokens.css (single-page,
   never reused; promoting would pollute the global palette). Hence the per-line
   lint waivers. */
@keyframes lm-accent-cycle {
  0%      { color: #ff6161; } /* v2lint: allow */
  13.333% { color: #e661ff; } /* v2lint: allow */
  40%     { color: #1fcfb0; } /* v2lint: allow */
  66.666% { color: #ffe266; } /* v2lint: allow */
  93.333% { color: #ff9f57; } /* v2lint: allow */
  100%    { color: #ff6161; } /* v2lint: allow */
}

/* ---- Hero ---- */
/* Brand band (bg/color/padding) comes from shared `.hero-brand` (components.css);
   the hero <section> carries both `lm-hero` and `hero-brand`. Layout-only below. */
.hint-v2 .lm-hero-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: center;
  justify-content: center;
}
.hint-v2 .lm-hero-col { flex: 1 1 320px; }
.hint-v2 .lm-hero-img { max-width: 500px; margin-inline: auto; }   /* +25% (was 400) — desktop only; hidden ≤800px */

.hint-v2 .lm-headline {
  font-family: var(--font-display);
  font-weight: var(--fw-display-extrabold);
  font-size: clamp(2rem, 5vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text-on-brand);
}
.hint-v2 .lm-accent {
  color: var(--accent-coral);
  animation: lm-accent-cycle 5s infinite;
}
.hint-v2 .lm-bullets {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hint-v2 .lm-bullets li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-subhead);
  font-weight: var(--fw-medium);
  color: var(--text-on-brand);
}
.hint-v2 .lm-bullets li::before {
  content: "\2022";
  position: absolute;
  left: var(--space-1);
  color: var(--accent-coral);
  font-weight: var(--fw-bold);
}
.hint-v2 .lm-badges {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}
.hint-v2 .lm-badges img { height: 46px; width: auto; }

/* ---- Feature sections (alternating) ---- */
.hint-v2 .lm-feature { padding-block: var(--space-section); }
.hint-v2 .lm-feature-alt { background: var(--bg-tint); }
.hint-v2 .lm-feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: center;
  justify-content: center;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.hint-v2 .lm-feature-col { flex: 1 1 300px; }
/* desktop zigzag: text stays first in DOM (mobile-friendly), visual flip ≥801px */
@media (min-width: 801px) {
  .hint-v2 .lm-feature-reverse .lm-feature-grid { flex-direction: row-reverse; }
  /* Give the animation column a larger share + widen the grid so the Rive actually
     renders ~25% bigger. The default 760px grid split two ways capped each column at
     ~340px, so the container's max-width never took effect. */
  .hint-v2 .lm-feature-grid { max-width: 860px; }
  .hint-v2 .lm-feature-col:has(.rive-skeleton-container) { flex: 1.4 1 360px; }
}
.hint-v2 .lm-feature h2 {
  font-size: var(--text-title);
  font-family: var(--font-display);
  font-weight: var(--fw-display-black);   /* 900 — heaviest section titles on desktop */
}
.hint-v2 .lm-tagline {
  color: var(--accent-coral);
  font-weight: var(--fw-bold);
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
}
.hint-v2 .lm-feature p { line-height: var(--leading-relaxed); }
.hint-v2 .lm-more-link {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--primary);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* feature text columns: center + constrain measure on mobile only (≤800px).
   Replicates the `.center` primitive (primitives.css) but gated to mobile — the
   bare `.center` class is always-on, so it can't be used here. */
@media (max-width: 800px) {
  .hint-v2 .lm-feature-center {
    box-sizing: content-box;
    margin-inline: auto;
    max-width: var(--center-max, var(--container-max));
    padding-inline: var(--center-gutter, var(--space-5));
  }
}

/* ---- Rive animation container (IDs drive /js/Home.lib.module.js) ---- */
.hint-v2 .rive-skeleton-container {
  position: relative;
  width: 100%;
  max-width: 450px;                             /* +25% (was 360) — larger Rive animations */
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}
.hint-v2 .rive-skeleton-container canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;                                   /* revealed by /js/Home.lib.module.js on Rive onLoad */
  transition: opacity var(--dur-base) var(--ease-out);
}
.hint-v2 .rive-skeleton-container canvas.loaded { opacity: 1; }
.hint-v2 .rive-skeleton {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  background: linear-gradient(110deg, var(--bg-elevated) 30%, var(--bg-surface) 50%, var(--bg-elevated) 70%);
  background-size: 200% 100%;
  animation: lm-skeleton 1.4s ease-in-out infinite;
}
/* the Rive onLoad handler adds .hidden once the canvas is painted; without this the
   shimmer stays on top of the canvas forever (legacy got it from css/hintCSS.css) */
.hint-v2 .rive-skeleton.hidden { display: none; }
@keyframes lm-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Mobile-only floating "Drop a Hint" CTA — one-for-one replica of the consumer-app
   DropHintFAB (consumer-app/components/DropHintFAB.tsx), minus the QR button. The rainbow is
   drawn the SAME WAY the app draws it: an animated SVG <linearGradient> on a rounded-rect
   (stroke for the border, fill for the 3D shadow), animated via SMIL <animate> in the markup —
   NOT a CSS background gradient. The raw rainbow hex + the few raw px below are deliberate
   parity values (the accent rainbow is intentionally not tokenized; metrics mirror the RN
   StyleSheet). Reduced motion is handled in js/LearnMoreFab.module.js (SMIL bypasses the
   reset.css reduced-motion reset, which only stops CSS animations). ---- */
.hint-v2 .lm-fab { display: none; }            /* desktop: hidden — app-store badges are the CTA */
@media (max-width: 800px) {
  .hint-v2 .lm-fab {                           /* = DropHintFAB styles.container (minus QR) */
    display: block;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: var(--space-5);                    /* 20 ≈ RN iOS bottom: 20 */
    width: calc(100% - 30px);                  /* RN left/right: 15 gutters */
    max-width: 400px;
    z-index: var(--z-nav);                     /* floats over content, under modals/toasts (RN used 999) */
    padding: 13px 13px 17px 15px;              /* user-tuned on-device (top/right/bottom/left); tighter right with no QR button */
    border-radius: var(--radius-pill);         /* 30 */
    background: var(--bg-brand);               /* headerBg #462775 */
    box-shadow: var(--shadow-fab);             /* RN shadow: offset 6,6 · radius 20 · rgba(0,0,0,.1) */
  }
  /* keep the footer / last section reachable above the fixed bar */
  .hint-v2 .lm-feature:last-of-type { padding-bottom: calc(var(--space-section) + 72px); }
}
.hint-v2 .lm-fab-row  { display: flex; align-items: center; width: 100%; }   /* RN innerRow */
/* isolation: isolate makes this a self-contained stacking context, so the
   shadow/button z-index 0/1 below are PURELY LOCAL (2-layer order within the FAB)
   and never interact with the global --z-* ladder. */
.hint-v2 .lm-fab-main { position: relative; flex: 1; isolation: isolate; }   /* RN mainShadowWrap */

/* 3D dark-rainbow shadow svg — offset down-right, fades on press (RN mainShadowLayer) */
.hint-v2 .lm-fab-shadow {
  position: absolute;
  top: 5px; left: 2px; right: -4px;            /* = RN top/left/right */
  width: 100%;                                 /* inline svg has no intrinsic size — force it to span (peeks ~2px past right) */
  height: 50px;                                /* BH */
  z-index: 0;                                  /* local to .lm-fab-main (see isolation above) — under the button */
  transition: opacity var(--dur-press) var(--ease-out);
}

/* button box (the <a>) — sits above the shadow; presses down 5px (RN mainOuter) */
.hint-v2 .lm-fab-btn {
  position: relative;
  z-index: 1;                                  /* local to .lm-fab-main — above the shadow */
  display: block;
  height: 50px;                                /* BH */
  transition: transform var(--dur-press) var(--ease-out);
}

/* rainbow gradient border — svg inset 2px with overflow visible so the 4px stroke straddles
   back out to the button edge (matches RN's rect inset by hw=2, rx=16, stroke-width=4) */
.hint-v2 .lm-fab-border { position: absolute; inset: 2px; width: 100%; height: 100%; overflow: visible; }
.hint-v2 .lm-fab-border rect { fill: var(--bg-surface); }   /* fabBg #fff (var() needs CSS, not attr) */

/* centered label + airplane (RN mainContent) */
.hint-v2 .lm-fab-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);                         /* 8 */
  padding-inline: var(--space-4);              /* 16 ≈ RN paddingHorizontal 15 */
  pointer-events: none;                        /* clicks fall through to the <a> */
}
.hint-v2 .lm-fab-label {
  font-family: var(--font-display);
  font-weight: var(--fw-display-extrabold);
  font-size: var(--text-subhead);             /* 18 */
  line-height: 1;
  color: var(--text-brand);                    /* fabText (lightens in dark on the dark fab fill) */
}
.hint-v2 .lm-fab-plane { width: 24px; height: 24px; fill: var(--text-brand); }  /* RN AirplaneIcon 24×24 */

/* press: button drops onto its shadow, shadow absorbs (:active propagates from the <a> up to .lm-fab-main) */
.hint-v2 .lm-fab-main:active .lm-fab-btn    { transform: translateY(5px); }
.hint-v2 .lm-fab-main:active .lm-fab-shadow { opacity: 0; }

/* ---- Mobile-only hero CTA affordance (ported from legacy .afc-callout / .afc-point-down).
   "drop a hint below" + the bouncing ↓ point at the fixed .lm-fab on mobile. ---- */
.hint-v2 .lm-callout {
  display: none;                 /* desktop: hidden — revealed ≤800px below */
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  color: var(--text-on-brand);
}
.hint-v2 .lm-callout .lm-muted {
  color: var(--text-on-brand-muted);
  font-weight: var(--fw-medium);
}
.hint-v2 .lm-point-down {
  display: none;                 /* desktop: hidden */
  margin-top: var(--space-2);
  text-align: center;
  color: var(--accent-coral);
  font-size: var(--text-heading);
  line-height: 1;
  animation: lm-nudge 1.4s ease-in-out infinite;   /* reduced-motion: stopped by reset.css */
}
@keyframes lm-nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ---- Breakpoint copy swap (ported from legacy .desktop-dn / .mobile-dn) ---- */
.hint-v2 .lm-show-mobile { display: none; }        /* desktop: hidden */

@media (max-width: 800px) {
  .hint-v2 .lm-callout,
  .hint-v2 .lm-point-down { display: block; }      /* span set to block so text-align centers */
  .hint-v2 .lm-show-mobile { display: inline; }
  .hint-v2 .lm-hide-mobile { display: none; }
  .hint-v2 .lm-hero-media { display: none; }       /* hero image is desktop-only (matches legacy /learn-more) */
}