/* ============================================================
   CoachLingua — Hero FX + sensory layer styles
   Pairs with hero-fx.js. Uses brand tokens --cl-green / --cl-orange.
   ============================================================ */

/* Three.js canvas sits above the gradient mesh, below content */
.hero-fx-canvas {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0; animation: heroFxFade 1.4s ease .2s forwards;
  mix-blend-mode: screen;
}
@keyframes heroFxFade { to { opacity: 1; } }

/* keep hero content above the canvas */
.hero__grid { position: relative; z-index: 1; }

/* -----------------------------------------------------------
   KINETIC HEADLINE
   ----------------------------------------------------------- */
.hero__title.kinetic-ready .kw {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em) rotateX(-55deg) scale(0.96);
  transform-origin: 50% 100%;
  animation: kwReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}
@keyframes kwReveal {
  to { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
}
/* gradient-text words get a moving shimmer once revealed */
.hero__title.kinetic-ready .gradient-text.kw,
.hero__title.kinetic-ready .kw.gradient-text {
  background-size: 220% 100%;
  animation: kwReveal 0.9s cubic-bezier(0.16,1,0.3,1) forwards,
             gradShift 5s ease-in-out 1s infinite;
}
@keyframes gradShift {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* -----------------------------------------------------------
   MAGNETIC / TILT microinteractions
   ----------------------------------------------------------- */
.btn--primary, .btn--lg, .diorama-card, .feature-card {
  transform: translate3d(var(--mx,0), var(--my,0), 0)
             perspective(700px) rotateX(var(--rx,0)) rotateY(var(--ry,0));
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease;
  will-change: transform;
}
.btn--primary:hover, .btn--lg:hover {
  box-shadow: 0 12px 40px -8px hsla(192,76%,48%,0.55),
              0 0 0 1px hsla(192,76%,60%,0.4) inset;
}
.diorama-card:hover, .feature-card:hover {
  box-shadow: 0 18px 50px -14px hsla(192,76%,45%,0.4);
}
.is-press { transform: translate3d(var(--mx,0), var(--my,0), 0) scale(0.96) !important; }

/* click ripple on primary CTAs */
.btn--primary { position: relative; overflow: hidden; }
.btn-ripple {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, hsla(0,0%,100%,0.85), transparent 70%);
  animation: rippleGrow 0.65s ease-out forwards;
}
@keyframes rippleGrow {
  to { width: 320px; height: 320px; opacity: 0; }
}

/* -----------------------------------------------------------
   SOUND TOGGLE
   ----------------------------------------------------------- */
.cl-sound-toggle {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  font-size: 1.15rem; line-height: 1;
  background: hsla(225, 25%, 10%, 0.82);
  border: 1px solid hsla(192, 76%, 48%, 0.4);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px -6px hsla(192,76%,40%,0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.cl-sound-toggle:hover { transform: scale(1.1) rotate(-6deg); border-color: hsla(192,76%,60%,0.8); }
.cl-sound-toggle:active { transform: scale(0.92); }
.cl-sound-toggle.is-muted { border-color: hsla(0,0%,100%,0.18); box-shadow: none; opacity: 0.7; }
.cl-sound-toggle::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid hsla(192,76%,55%,0.5);
  animation: soundPulse 2.4s ease-out infinite;
}
.cl-sound-toggle.is-muted::after { display: none; }
@keyframes soundPulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}
[data-theme="light"] .cl-sound-toggle { background: hsla(0,0%,100%,0.9); }

/* -----------------------------------------------------------
   SPATIAL SCENE — lift the coach board out of "flat card" into a
   lit stage inside the world (the critic's #1 unlock).
   ----------------------------------------------------------- */
.hero__visual { transform-style: preserve-3d; }

/* focal spotlight beam raking down behind the board */
.hero__visual::before {
  content: ''; position: absolute; z-index: -1;
  top: -18%; left: 50%; width: 120%; height: 150%;
  transform: translateX(-50%) rotate(8deg);
  background: conic-gradient(from 200deg at 50% 0%,
     transparent 0deg,
     hsla(192, 80%, 55%, 0.18) 18deg,
     hsla(192, 80%, 60%, 0.05) 30deg,
     transparent 46deg);
  filter: blur(6px);
  pointer-events: none;
  animation: beamSweep 9s ease-in-out infinite alternate;
}
@keyframes beamSweep {
  0% { transform: translateX(-50%) rotate(4deg); opacity: 0.7; }
  100% { transform: translateX(-50%) rotate(12deg); opacity: 1; }
}

/* pedestal: TWO layers for believable mass —
   (1) a tight, dark occlusion shadow directly under the board (primary),
   (2) a broader soft green bloom (secondary), + a floor sheen line. */
.coach-board { position: relative; z-index: 2; }
/* (1) tight occlusion contact shadow */
.coach-board::after {
  content: ''; position: absolute; z-index: -1;
  left: 20%; right: 12%; bottom: -16px; height: 22px;
  background: radial-gradient(ellipse at 46% center,
     hsla(225, 50%, 2%, 0.92), hsla(225, 48%, 2%, 0.5) 42%, transparent 70%);
  filter: blur(5px);
  transform: scaleY(0.44);
  animation: contactShadow 6s ease-in-out infinite;
}
@keyframes contactShadow {
  0%,100% { opacity: 0.9; transform: scaleY(0.5) scaleX(0.96); }
  50% { opacity: 0.7; transform: scaleY(0.46) scaleX(1); }
}
/* (2) reflection: a real optical floor mirror of the board (elite cue).
   Uses a scaled+flipped duplicate glow that fades into the ground. */
.coach-board::before {
  content: ''; position: absolute; z-index: -2;
  left: 6%; right: 6%; bottom: -52px; height: 68px;
  background:
    linear-gradient(180deg,
       hsla(192, 60%, 42%, 0.22) 0%,
       hsla(192, 55%, 40%, 0.1) 34%,
       transparent 68%);
  -webkit-mask-image: linear-gradient(180deg, black, transparent 72%);
          mask-image: linear-gradient(180deg, black, transparent 72%);
  filter: blur(5px);
  transform: scaleY(0.62);
  opacity: 0.55;
  animation: pedestalPulse 6s ease-in-out infinite;
}
@keyframes pedestalPulse {
  0%,100% { opacity: 0.45; transform: scaleY(0.62) scaleX(0.95); }
  50% { opacity: 0.62; transform: scaleY(0.66) scaleX(1); }
}

/* KEY LIGHT — a directional light source hitting the board top-left.
   Rim highlight (top+left edges catch light) + soft falloff bottom-right.
   This is the physical-light-logic the review asked for. */
.coach-board {
  box-shadow:
    /* rim highlight, top-left, as if lit (white-ish, not green FX) */
    -1px -1px 0 0.5px hsla(150, 40%, 88%, 0.3),
    inset 1px 1px 0 hsla(0, 0%, 100%, 0.16),
    /* ambient occlusion bottom-right (away from light) — stronger form shadow */
    inset -3px -5px 22px hsla(225, 55%, 2%, 0.68),
    /* projected soft cast */
    20px 30px 66px -18px hsla(225, 62%, 2%, 0.74);
}
/* form-shadow: interior tonal gradient (lit top-left → dark bottom-right)
   layered OVER the panel's existing bg so it reads as a photographed
   surface, not an FX-lit plane. Applied to __main (the inner scene area). */
.coach-board { isolation: isolate; }
.coach-board__main::before {
  content: ''; position: absolute; inset: 0; z-index: 4;
  pointer-events: none; border-radius: inherit;
  background: linear-gradient(135deg,
     hsla(0,0%,100%,0.06) 0%,
     transparent 34%,
     hsla(225,52%,2%,0.34) 100%);
}
/* specular sweep travelling across the board's glass surface */
.coach-board__main::after {
  content: ''; position: absolute; inset: 0; z-index: 5;
  pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg,
     transparent 38%, hsla(0,0%,100%,0.06) 47%,
     hsla(0,0%,100%,0.13) 50%, hsla(0,0%,100%,0.06) 53%, transparent 62%);
  background-size: 260% 100%;
  animation: specSweep 7s ease-in-out infinite;
}
@keyframes specSweep {
  0%, 62% { background-position: 150% 0; }
  100% { background-position: -40% 0; }
}
.coach-board__main { position: relative; }

/* animate the ball travelling along the play arrow — gives the scene life */
.pitch-ball {
  animation: ballRun 4.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  offset-rotate: 0deg;
}
@keyframes ballRun {
  0%   { top: 63%; left: 22%; transform: scale(0.9); }
  45%  { top: 26%; left: 55%; transform: scale(1.15); }
  55%  { top: 26%; left: 55%; transform: scale(1.15); }
  100% { top: 63%; left: 22%; transform: scale(0.9); }
}
/* trailing glow pulse on the active dot as ball arrives */
.pitch-dot--one { animation: dotPing 4.2s ease-in-out infinite; }
.pitch-dot--two { animation: dotPing 4.2s ease-in-out 1.9s infinite; }
@keyframes dotPing {
  0%,40%,100% { box-shadow: 0 0 18px hsla(192,76%,48%,0.65); }
  48% { box-shadow: 0 0 34px 6px hsla(192,76%,55%,0.9); transform: scale(1.25); }
}

/* foreground depth glow layer above particles, framing the board.
   Directional key-light wash top-left + a darkening vignette that cuts the
   card out of the green haze (local contrast → photographed separation). */
.hero__visual::after {
  content: ''; position: absolute; z-index: 3; inset: -6% -4%;
  border-radius: 3rem; pointer-events: none;
  background:
    radial-gradient(circle at 30% 18%, hsla(192, 80%, 60%, 0.08), transparent 44%),
    radial-gradient(ellipse 62% 58% at 52% 50%, transparent 52%, hsla(225, 55%, 3%, 0.55) 100%);
  mix-blend-mode: multiply;
}

/* -----------------------------------------------------------
   LIVING HERO SCENE — cursor-aware coach + kids (hero-scene.js)
   Replaces the abstract pitch-card tile with characters that
   look at you + parallax + hover-reveal.
   ----------------------------------------------------------- */
#hero-scene {
  position: relative;
  width: 100%;
  border-radius: 1.6rem;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, hsl(210 40% 11%), hsl(200 42% 6%));
  border: 1px solid hsla(192, 60%, 50%, 0.2);
  box-shadow: inset 0 0 60px hsla(225, 60%, 2%, 0.6);
  cursor: crosshair;
}
#hero-scene .hs-svg { display: block; width: 100%; height: auto; }
.hs-layer { will-change: transform; }
.hs-head, .hs-eyes { will-change: transform; }
.hs-head { transform-box: fill-box; transform-origin: center; transition: transform 0.05s linear; }
.hs-shadow { fill: hsla(225, 60%, 2%, 0.5); }
.hs-cue { transition: opacity 0.35s ease; pointer-events: none; }
.hs-ball { animation: hsBall 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hsBall { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* -----------------------------------------------------------
   TEXT LUMINANCE HIERARCHY — the last lever to 9+.
   Crisper headline, brighter lead line, clearer contrast steps
   H1 (max luminance) → subhead (mid) → stats (structured).
   ----------------------------------------------------------- */
.hero__title {
  /* near-pure white for max luminance + a razor-thin light halo (no blur mush)
     and a soft depth shadow to separate the H1 from the background haze */
  color: hsl(0, 0%, 99%);
  text-shadow:
    0 1px 0 hsla(0, 0%, 100%, 0.25),
    0 2px 26px hsla(225, 60%, 2%, 0.5),
    0 0 22px hsla(192, 70%, 60%, 0.14);
}
.hero__title .gradient-text {
  /* cleaner single-hue treatment (Kira: disliked the multi-color gradient).
     Solid brand green with a soft glow — reads premium, not rainbow. */
  background: none;
  -webkit-text-fill-color: hsl(192, 82%, 58%);
          color: hsl(192, 82%, 58%);
  filter: drop-shadow(0 0 16px hsla(192, 80%, 52%, 0.35));
}
.hero__sub {
  /* mid-tier luminance: clearly readable, clearly below the H1 */
  color: hsl(215, 15%, 78%);
  text-shadow: 0 1px 2px hsla(225, 50%, 3%, 0.55);
}
/* stats: brighter figures, quieter labels → clean tonal hierarchy.
   Widened brightness gap so the tiers read as distinct steps. */
.hero__stats .stat dt {
  color: hsl(0, 0%, 99%);
  text-shadow: 0 0 16px hsla(192, 70%, 55%, 0.2);
}
.hero__stats .stat dd {
  color: hsl(215, 11%, 55%);
  letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.76rem;
}
/* localized scrim: lift the text column off the hazy bg so the H1 detaches.
   Sits behind the copy, softly darkening the area under the headline. */
.hero__content { position: relative; z-index: 1; }
.hero__content::before {
  content: ''; position: absolute; z-index: -1;
  inset: -8% -6% -4% -8%;
  background: radial-gradient(115% 90% at 22% 34%,
     hsla(225, 48%, 3%, 0.62) 0%,
     hsla(225, 48%, 4%, 0.32) 42%,
     transparent 74%);
  filter: blur(6px);
  pointer-events: none;
}

/* -----------------------------------------------------------
   REDUCED MOTION — kill it all
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-fx-canvas { display: none; }
  .hero__title.kinetic-ready .kw { opacity: 1; transform: none; animation: none; }
  .btn--primary, .btn--lg, .diorama-card, .feature-card { transform: none; }
  .cl-sound-toggle::after { animation: none; }
  .hero__visual::before, .coach-board::after, .coach-board::before,
  .coach-board__main::after, .pitch-ball,
  .pitch-dot--one, .pitch-dot--two,
  .hs-ball, .hs-layer, .hs-head, .hs-eyes { animation: none; }
  #hero-scene { cursor: default; }
}