/* ============================================================
   HOME — CINEMATIC SCROLL LAYER
   Scoped entirely to .home-cinematic so approach.html (which
   shares .discovery-* classes) is completely unaffected.

   Model: the background video stays pinned. Everything layered
   over it is driven by scroll position rather than by one-shot
   triggers, so the wheel actually drives the motion.

   Per-panel custom properties, written by assets/js/home.js:
     --enter  0 -> 1   panel rising into view
     --exit   0 -> 1   panel leaving past the top
     --p     -1 -> 1   signed distance from viewport centre
   Defaults below are the *visible* state, so if JS never runs
   the page still reads normally. JS opts in by adding .hc-ready.
   ============================================================ */

/* --enter / --exit / --p are set on .discovery-item but read by its
   descendants (content, panel box, cards), so they must inherit. */
@property --enter {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

@property --exit {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* Stagger offset used below to remap --enter into each card's own
   --ce window. --ce itself, along with the whole hover/tilt/float
   vocabulary, is registered and owned by assets/css/cards.css. */
@property --stagger {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

@property --zoom {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

@property --vel {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.home-cinematic {
  --hc-gold: var(--color-gold-bright, #F2C464);
  /* The shared --video-text-shadow/--video-gold-shadow tokens default to
     none sitewide. Redefined here, scoped to .home-cinematic only, so
     text stays legible over this page's brighter footage without
     touching the video's own darkening/grade/vignette (which broke
     legibility when tried) or approach.html's text (untouched — it
     never sits inside .home-cinematic, so it keeps reading the global
     none default). */
  --video-text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
  --video-gold-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* :not(.discovery-duo-card) — the nested Our Mission marker also carries
   .discovery-item (for the story rail/colour grade only, see home.html)
   but isn't a scroll panel in its own right; it must inherit --enter/--exit
   from its ancestor panel rather than have this default clobber them. */
.home-cinematic .discovery-item:not(.discovery-duo-card) {
  --enter: 1;
  --exit: 0;
  --p: 0;
}

/* ============================================================
   1. BACKGROUND — pinned video, but no longer inert
   ============================================================ */

/* Slow push-in across the whole section + a small kick tied to
   scroll velocity, so fast scrolling feels like a camera move.
   Both are transform-only, so this stays on the compositor. */
/* --- Exposure balance ---------------------------------------------
   Three values control how much footage you see. The base stylesheet
   dimmed the video to brightness(0.55) with nothing on top of it;
   here a grade and a vignette sit above it, so the video itself is
   lifted to compensate. Net effect at the centre (where text sits)
   is roughly the old contrast, while the mid-field shows noticeably
   more of the clinic.

   To show MORE footage: raise brightness, lower --hc-grade-strength.
   To show LESS (if text contrast suffers): do the reverse.
   ------------------------------------------------------------------ */
.home-cinematic {
  /* Reverted — lowering these to 0.12 (from 0.45/0.42) made text
     illegible over the video's brighter footage (e.g. the white-walled
     conference room shot), since unlike approach.html's darker clip,
     this background genuinely needs the darkening for text contrast to
     hold across scenes. Back to the original, known-legible values. */
  --hc-grade-strength: 0.45;
  --hc-vignette-strength: 0.42;
}

.home-cinematic .discovery-video {
  --zoom: 0;
  --vel: 0;
  filter: brightness(0.68);
  transform: scale(calc(1.02 + var(--zoom) * 0.10 + var(--vel) * 0.018));
  transform-origin: center center;
  will-change: transform;
}

/* Per-chapter colour grade. The video stays fully visible — this
   is a tint on top, not a curtain, so each chapter reads as its
   own "room" without hiding the footage. */
.home-cinematic .hc-grade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(120% 90% at 20% 30%, rgba(92, 10, 10, 0.55), transparent 70%);
  transition: background 1.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 1.4s ease;
}

.home-cinematic[data-chapter='story'] .hc-grade {
  background: radial-gradient(120% 90% at 18% 40%, rgba(92, 10, 10, 0.62), transparent 72%);
}

.home-cinematic[data-chapter='mission'] .hc-grade {
  background: radial-gradient(120% 90% at 82% 40%, rgba(58, 6, 6, 0.66), transparent 72%);
}

.home-cinematic[data-chapter='values'] .hc-grade {
  background: radial-gradient(130% 100% at 50% 20%, rgba(20, 10, 4, 0.70), transparent 78%);
}

.home-cinematic[data-chapter='impact'] .hc-grade {
  background: radial-gradient(130% 100% at 50% 80%, rgba(198, 167, 94, 0.20), rgba(10, 6, 4, 0.72) 68%);
}

.home-cinematic[data-chapter='cta'] .hc-grade {
  background: radial-gradient(120% 100% at 50% 50%, rgba(92, 10, 10, 0.30), rgba(0, 0, 0, 0.78) 76%);
  /* Closing chapter settles darker so the CTA carries the frame. */
  opacity: calc(var(--hc-grade-strength) + 0.18);
}

/* Vignette — pulls the eye to the centre and lifts text contrast. */
.home-cinematic .hc-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    115% 85% at 50% 50%,
    transparent 45%,
    rgba(0, 0, 0, var(--hc-vignette-strength)) 100%
  );
}

/* Fine film grain. Static texture, animated only by nudging the
   background position — no repaint of the noise itself. */
.home-cinematic .hc-grain {
  position: absolute;
  inset: -60px;
  z-index: 4;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: hc-grain-shift 0.7s steps(4, end) infinite;
}

@keyframes hc-grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-14px, 8px); }
  50%  { transform: translate(10px, -12px); }
  75%  { transform: translate(-8px, -6px); }
  100% { transform: translate(0, 0); }
}

/* ============================================================
   2. SCROLL-DRIVEN PANEL CHOREOGRAPHY
   Every panel gets its own move instead of one effect x7.
   All transform + opacity only.
   ============================================================ */

/* Neutralise the old one-shot system inside this section — the
   scroll engine owns visibility here now. */
.home-cinematic.hc-ready .fade-in-scroll,
.home-cinematic.hc-ready .fade-in-scroll.visible {
  opacity: 1;
  transform: none;
  transition: none;
}

.home-cinematic.hc-ready .discovery-item .discovery-content {
  transition: none;
  opacity: calc(var(--enter) * (1 - var(--exit)));
  will-change: transform, opacity;
  /* Darken cards as they scroll into full view — 0% darker when
     entering, 22% darker at full --enter. Creates a sense of
     presence/emphasis as a chapter comes into focus. */
  filter: brightness(calc(1 - var(--enter) * 0.22));
}

/* -- Default: rise + settle, with continuous parallax drift so
      the panel keeps moving the whole time it is on screen. -- */
.home-cinematic.hc-ready .discovery-item .discovery-content {
  transform:
    translateY(calc((1 - var(--enter)) * 64px + var(--exit) * -70px + var(--p) * -34px))
    scale(calc(0.955 + var(--enter) * 0.045));
}

/* -- Story + Mission duo: three clearly separate beats off the same
      --enter, not a simultaneous fade. Story arrives first with just the
      gold dot beside it (mission fully hidden). Only once story has fully
      settled does the line draw out from the dot. Mission itself doesn't
      start appearing until the line is most of the way drawn, so it never
      reads as "shown together" with story — by --enter's end all three
      have resolved into one linked pair. -- */
.home-cinematic .discovery-duo-card,
.home-cinematic .discovery-duo-dot,
.home-cinematic .discovery-duo-line,
.home-cinematic .discovery-duo-card h3.hc-words {
  --stagger: 0;
  --ce: clamp(0, calc((var(--enter) - var(--stagger)) / 0.35), 1);
}

.home-cinematic .discovery-duo-card--story,
.home-cinematic .discovery-duo-card--story h3.hc-words,
.home-cinematic .discovery-duo-dot { --stagger: 0; }
.home-cinematic .discovery-duo-line { --stagger: 0.35; }
.home-cinematic .discovery-duo-card--mission,
.home-cinematic .discovery-duo-card--mission h3.hc-words { --stagger: 0.65; }

.home-cinematic.hc-ready .discovery-duo-card {
  transition: none;
  opacity: calc(var(--ce) * (1 - var(--exit)));
  will-change: transform, opacity;
  /* Darken duo cards as they reveal — same 22% darkening as other
     cards, but tied to the card's own --ce (per-card reveal timing)
     instead of the shared panel --enter. */
  filter: brightness(calc(1 - var(--ce) * 0.22));
}

.home-cinematic.hc-ready .discovery-duo-card--story {
  transform:
    translateX(calc((1 - var(--ce)) * -70px))
    translateY(calc(var(--p) * -30px + var(--exit) * -60px));
}

.home-cinematic.hc-ready .discovery-duo-card--mission {
  transform:
    translateX(calc((1 - var(--ce)) * 70px))
    translateY(calc(var(--p) * -30px + var(--exit) * -60px));
}

.home-cinematic.hc-ready .discovery-duo-dot {
  transition: none;
  opacity: calc(var(--ce) * (1 - var(--exit)));
  transform: scale(calc(0.3 + var(--ce) * 0.7));
  will-change: transform, opacity;
}

.home-cinematic.hc-ready .discovery-duo-line {
  transition: none;
  transform-origin: left center;
  transform: scaleX(var(--ce));
  opacity: calc(1 - var(--exit));
  will-change: transform, opacity;
}

@media (max-width: 820px) {
  .home-cinematic.hc-ready .discovery-duo-line {
    transform-origin: top center;
    transform: scaleY(var(--ce));
  }
}

/* -- Section titles: scale up out of the floor. -- */
.home-cinematic.hc-ready .discovery-item--title-only .discovery-content {
  transform:
    translateY(calc((1 - var(--enter)) * 46px + var(--p) * -22px))
    scale(calc(0.90 + var(--enter) * 0.10));
}

/* -- Hero panel: drifts back as you leave it, so the first
      scroll gesture immediately produces depth.
      !important is required here: the base stylesheet pins this
      element with `transform: translateY(0) !important` (styles.css
      :5248), which would otherwise cancel the parallax outright. -- */
.home-cinematic.hc-ready .discovery-content--hero.discovery-content--visible {
  opacity: 1;
  transform:
    translateY(calc(var(--p) * -46px))
    scale(calc(1 - var(--exit) * 0.06)) !important;
}

/* -- Every title except the hero: starts small and grows to full size,
      so each heading reads as a small-to-large zoom rather than a
      static pop-in. The hero title is excluded (stays static) — it's
      the very first thing visible on load, so it has no scroll-in
      moment to key the animation off. Two tiers, most specific wins:
        - default: tracks --enter, the same 0->1 "how settled is this
          panel" value already driving its container — grows in step
          with everything else in title-only/CTA panels.
        - duo cards (story/mission): each title tracks that card's own
          --ce, so it finishes growing exactly when that card finishes
          revealing rather than on the shared panel's timing. -- */
.home-cinematic.hc-ready h3.hc-words {
  transform-origin: center center;
  transform: scale(calc(0.55 + var(--enter) * 0.45));
  will-change: transform;
}

.home-cinematic.hc-ready .discovery-content--hero.discovery-content--visible h3.hc-words {
  transform: none;
}

.home-cinematic.hc-ready .discovery-duo-card h3.hc-words {
  transform: scale(calc(0.55 + var(--ce) * 0.45));
}

/* -- Panel boxes (values / impact): rise as a unit, and the
      cards inside stagger on top of it. -- */
.home-cinematic.hc-ready .discovery-panel-box {
  opacity: calc(var(--enter) * (1 - var(--exit)));
  transform:
    translateY(calc((1 - var(--enter)) * 54px + var(--p) * -20px))
    scale(calc(0.97 + var(--enter) * 0.03));
  will-change: transform, opacity;
}

/* ============================================================
   3. STAGGERED CARD ENTRY
   Each card resolves on its own delay off the shared --enter,
   by remapping the 0..1 range into per-card windows.
   ============================================================ */

.home-cinematic .discovery-wide-card {
  --stagger: 0;
  --ce: clamp(0, calc((var(--enter) - var(--stagger)) / 0.62), 1);
  /* Cards start light and brighten as they fully resolve, so step 1 is
     subtle and steps 2-3 are bold. */
  filter: brightness(calc(0.65 + var(--ce) * 0.35));
}

.home-cinematic .discovery-wide-grid > .discovery-wide-card:nth-child(1) { --stagger: 0.00; }
.home-cinematic .discovery-wide-grid > .discovery-wide-card:nth-child(2) { --stagger: 0.16; }
.home-cinematic .discovery-wide-grid > .discovery-wide-card:nth-child(3) { --stagger: 0.32; }

/* ============================================================
   5. STAT TILES
   ============================================================ */

.home-cinematic .hc-stat {
  text-align: center;
  transition: box-shadow 0.45s ease, border-color 0.45s ease;
}

.home-cinematic .hc-stat__num {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  color: var(--hc-gold);
  line-height: 1;
  margin-bottom: var(--space-xs);
  text-shadow: var(--video-gold-shadow, 0 2px 16px rgba(0, 0, 0, 0.7));
  transition: text-shadow 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-cinematic .hc-stat__label {
  font-size: var(--fs-small);
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: var(--video-text-shadow, 0 2px 14px rgba(0, 0, 0, 0.65));
}

@media (hover: hover) and (pointer: fine) {
  .home-cinematic .hc-stat:hover .hc-stat__num {
    transform: scale(1.09);
    text-shadow: 0 0 34px rgba(198, 167, 94, 0.75);
  }
}

/* Gold pulse the moment a counter finishes ticking. */
.home-cinematic .hc-stat__num.is-counted {
  animation: hc-count-pop 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes hc-count-pop {
  0%   { text-shadow: 0 0 0 rgba(198, 167, 94, 0); transform: scale(1); }
  38%  { text-shadow: 0 0 40px rgba(198, 167, 94, 0.85); transform: scale(1.1); }
  100% { text-shadow: 0 0 0 rgba(198, 167, 94, 0); transform: scale(1); }
}

/* ============================================================
   6. KINETIC HEADINGS
   Words rise, unblur and settle in sequence. One-shot CSS
   animation (not scroll-linked), so the blur is cheap.
   ============================================================ */

.home-cinematic .hc-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em) rotateX(-42deg);
  filter: blur(7px);
  transform-origin: center bottom;
}

.home-cinematic .hc-words.is-lit .hc-word {
  animation: hc-word-in 0.82s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--wd, 0s);
}

@keyframes hc-word-in {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
    filter: blur(0);
  }
}

/* Gold hairline that draws itself under each section label. */
.home-cinematic .hc-rule {
  display: block;
  width: 100%;
  max-width: 190px;
  height: 1px;
  margin: var(--space-sm) 0 var(--space-md);
  background: linear-gradient(90deg, var(--hc-gold), rgba(198, 167, 94, 0));
  transform: scaleX(var(--enter, 1));
  transform-origin: left center;
  transition: transform 0.2s linear;
}

.home-cinematic .discovery-content--hero .hc-rule {
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(90deg, rgba(198, 167, 94, 0), var(--hc-gold), rgba(198, 167, 94, 0));
  transform-origin: center;
}

/* ============================================================
   7. CTA
   ============================================================ */

.home-cinematic .hc-cta-btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .home-cinematic .hc-cta-btn:hover {
    box-shadow: 0 14px 40px rgba(198, 167, 94, 0.4);
  }
}

/* Soft gold halo breathing behind the final call to action. */
.home-cinematic #chapter-cta .discovery-content {
  position: relative;
}

.home-cinematic #chapter-cta .discovery-content::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 620px;
  height: 620px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle, rgba(198, 167, 94, 0.16), transparent 62%);
  animation: hc-halo 6s ease-in-out infinite;
}

@keyframes hc-halo {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.9); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}

/* ============================================================
   8. STORY RAIL — chapter counter + active pulse
   ============================================================ */

/* This stylesheet is loaded only by home.html, so the rail can be
   targeted directly — it sits outside .home-cinematic in the DOM. */
.story-rail .story-rail__dot.is-active {
  box-shadow: 0 0 0 4px rgba(198, 167, 94, 0.18);
  animation: hc-dot-pulse 2.4s ease-in-out infinite;
}

@keyframes hc-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(198, 167, 94, 0.16); }
  50%      { box-shadow: 0 0 0 9px rgba(198, 167, 94, 0.04); }
}

/* ============================================================
   9. SCROLL HINT — gentle bob so it reads as an invitation
   ============================================================ */

.home-cinematic .scroll-hint {
  animation: hc-bob 2.6s ease-in-out infinite;
  transition: opacity 0.5s ease;
}

@keyframes hc-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(9px); }
}

/* ============================================================
   10. RESPONSIVE — lighter motion on small screens
   ============================================================ */

@media (max-width: 820px) {
  /* Halve the parallax travel: short panels + big drift reads as
     jitter rather than depth. */
  .home-cinematic.hc-ready .discovery-item .discovery-content {
    transform:
      translateY(calc((1 - var(--enter)) * 34px + var(--p) * -14px))
      scale(calc(0.975 + var(--enter) * 0.025));
  }

  .home-cinematic.hc-ready .discovery-duo-card--story,
  .home-cinematic.hc-ready .discovery-duo-card--mission {
    transform: translateY(calc((1 - var(--ce)) * 34px));
  }

  .home-cinematic .hc-grain { display: none; }

  .home-cinematic .discovery-wide-grid > .discovery-wide-card {
    animation: none;
  }

  .home-cinematic #chapter-cta .discovery-content::before {
    width: 320px;
    height: 320px;
  }

  .home-cinematic .hc-stat__num { font-size: 2.2rem; }
}

/* ============================================================
   11. REDUCED MOTION — everything resolves, nothing moves
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .home-cinematic.hc-ready .discovery-item .discovery-content,
  .home-cinematic.hc-ready .discovery-duo-card,
  .home-cinematic.hc-ready .discovery-duo-dot,
  .home-cinematic.hc-ready .discovery-duo-line,
  .home-cinematic.hc-ready .discovery-item--title-only .discovery-content,
  .home-cinematic.hc-ready .discovery-content--hero.discovery-content--visible,
  .home-cinematic.hc-ready h3.hc-words,
  .home-cinematic.hc-ready .discovery-panel-box,
  .home-cinematic.hc-ready .discovery-wide-card {
    opacity: 1 !important;
    transform: none !important;
  }

  .home-cinematic .discovery-video {
    transform: none !important;
  }

  .home-cinematic .hc-word {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none !important;
  }

  .home-cinematic .hc-rule {
    transform: scaleX(1) !important;
  }

  .home-cinematic .hc-grain,
  .home-cinematic .discovery-wide-grid > .discovery-wide-card,
  .home-cinematic .scroll-hint,
  .home-cinematic #chapter-cta .discovery-content::before,
  .story-rail .story-rail__dot.is-active {
    animation: none !important;
  }

  .home-cinematic .discovery-wide-card::after {
    display: none;
  }
}