/* =========================================================
   Hero — scroll-driven orbit timeline
   (GSAP ScrollTrigger + SplitText + Lenis)
   ========================================================= */

/* Tall scroll track: the pin wrapper sticks while we scrub through it. */
.chapter_evolution{
  position:relative;
  width:100%;
  height:260vh;   /* animation ends at +=250%; trailing slack removed */
  overflow:visible;
}

.pin_wrapper{
  width:100%;
  height:100svh;
  overflow:hidden;
  position:relative;
}

.orbit_stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  padding-top:4em;
}

/* ---------- Headline stack ---------- */
.h1_box{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:1.4rem;
  padding-top:5.5rem;
  text-align:center;
  pointer-events:none;
}

.headline_box{
  position:relative;
  display:grid;
}
/* Local scrim: the orbit cards and the centre video pass behind the headline
   as they animate, so the copy needs its own contrast floor independent of
   whatever footage is underneath. A soft radial keeps it from reading as a
   visible box. */
.h1_box::before{
  content:"";
  position:absolute;
  inset:0 auto auto 50%;
  transform:translateX(-50%);
  width:min(72rem,110%);
  height:26rem;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(
    ellipse 60% 55% at 50% 38%,
    rgba(8,10,18,.92) 0%,
    rgba(8,10,18,.78) 45%,
    rgba(8,10,18,0) 78%
  );
}
/* Both headlines occupy the same grid cell so they cross-fade in place. */
.headline_box .h1{
  grid-area:1 / 1;
  margin:0;
  font-family:var(--serif); font-weight:250; letter-spacing:-.02em;
  font-size:clamp(2.4rem,6.08vw,4.4rem);
  line-height:1.02;
  letter-spacing:-.03em;
  font-weight:600;
  max-width:18ch;
}
.headline_box .h1 em{ font-style:italic; color:var(--accent); }

.hero_spec{ opacity:0; }

/* SplitText line wrapper — clips the 3D flip so lines rotate out of a mask. */
.title_line{ overflow:hidden; padding-bottom:.08em; }

.buttons_hero{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  justify-content:center;
  pointer-events:auto;
}

/* ---------- Centre video ---------- */
.core_video{
  position:relative;
  width:min(46em,72vw);
  aspect-ratio:16 / 9;
  margin-top:12em;
  border-radius:6px;
  overflow:hidden;
  background:var(--surface);
  will-change:transform;
}

.video_embed{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---------- Orbiting clip cards ---------- */
.orbit_card{
  position:absolute;
  width:15em;
  aspect-ratio:16 / 10;
  height:auto;
  border-radius:5px;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line-soft);
  will-change:transform, top, left, width;
}
.orbit_card .video_embed{ height:100%; }

.orbit_card.first { width:13em; top:24%; left:7%;  }
.orbit_card.second{ width:14em; top:13%; right:8%; }
.orbit_card.third { width:14em; bottom:12%; left:16%; }
.orbit_card.fourth{ width:14em; bottom:9%;  right:14%; }

/* Filename label that fades in once a card lands on the timeline. */
.card_info{
  position:absolute;
  inset:0;
  opacity:0;
  z-index:2;
  pointer-events:none;
}
.txt_card{
  padding:8px 0 0 10px;
  font-size:.72rem;
  letter-spacing:.01em;
  color:var(--fg);
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.splitter_card{
  width:0%;
  height:1px;
  margin:6px auto 0 0;
  background:rgba(207,212,245,.4);
}

/* ---------- Timeline rail + playhead ---------- */
.timeline_line{
  position:absolute;
  left:0; right:0; bottom:5.5em;
  width:72vw;
  height:1px;
  margin-inline:auto;
  background:var(--line);
  opacity:0;
}

.timeline_cursor-layer{
  position:absolute;
  inset:auto 0 5.5em;
  height:0;
  pointer-events:none;
  z-index:4;
}

.timeline_cursor{
  position:absolute;
  left:0; top:-11.5em;
  width:1px;
  height:12em;
  background:var(--accent);
  transform:translateX(-50%) scaleY(0);
  transform-origin:top;
  box-shadow:0 0 1.125em rgba(207,212,245,.6), 0 0 2.5em rgba(109,60,232,.45);
  pointer-events:none;
}
.timeline_cursor-head{
  position:absolute;
  left:50%; bottom:0;
  width:6px; height:10px;
  background:var(--accent);
  transform:translate(-50%,0);
  pointer-events:none;
}
.timeline_cursor-blur{
  position:absolute;
  left:0; top:-11.5em;
  width:0;
  height:12em;
  background:rgba(5,6,12,.85);
  filter:blur(.75em);
  opacity:.55;
  pointer-events:none;
}

/* ---------- Scroll hint ---------- */
.hero__scroll{
  position:absolute;
  bottom:1.25rem; right:var(--pad);
  z-index:6;
  display:flex; align-items:center; gap:.75rem;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-faint);
}
.hero__scroll span{
  width:44px; height:1px; background:var(--line);
  position:relative; overflow:hidden;
}
.hero__scroll span::after{
  content:""; position:absolute; inset:0;
  background:var(--accent);
  animation:scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine{
  0%{ transform:translateX(-100%) } 60%,100%{ transform:translateX(100%) }
}

/* ---------- Responsive ---------- */
@media (max-width:991px){
  .orbit_stage{ padding-top:3em; }
  .core_video{ width:78vw; margin-top:6em; }
  .h1_box{ padding-top:6rem; }
  .orbit_card.first { width:10em; top:30%; left:4%; }
  .orbit_card.second{ width:10em; top:20%; right:4%; }
  .orbit_card.third { width:10em; bottom:14%; left:10%; }
  .orbit_card.fourth{ width:10em; bottom:12%; right:8%; }
  .timeline_line{ width:88vw; }
}

@media (max-width:640px){
  .chapter_evolution{ height:150vh; }  /* mobile timeline ends at +=140% */
  .orbit_stage{ padding-top:2em; }
  .core_video{ width:88vw; margin-top:17em; }
  .h1_box{ padding-top:4.5rem; gap:1rem; }
  .headline_box .h1{ font-size:clamp(1.9rem,8.075vw,2.8rem); max-width:14ch; }
  .orbit_card{ width:7rem; }
  .orbit_card.first { top:52%; left:3%; }
  .orbit_card.second{ top:50%; right:3%; }
  .orbit_card.third { bottom:16%; left:8%; }
  .orbit_card.fourth{ bottom:14%; right:6%; }
  .timeline_line{ width:92vw; bottom:2em; }
  .timeline_cursor,.timeline_cursor-blur{ top:-16em; height:16.5em; }
  .timeline_cursor-layer{ inset:auto 0 2em; }
  .txt_card{ font-size:.6rem; }
  .hero__scroll{ display:none; }
}

/* Hide the stage until the timeline has primed, to avoid a flash of
   un-positioned cards on first paint. */
.orbit_stage{ opacity:0; transition:opacity .5s var(--ease); }
body.orbit-ready .orbit_stage{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .chapter_evolution{ height:auto; }
  .pin_wrapper{ height:auto; min-height:100svh; }
  .orbit_stage{ opacity:1; }
  .hero__scroll span::after{ animation:none; }
}

/* ---------- Lenis (smooth scroll) ----------
   lenis@1.3.23/dist/lenis.css, inlined so the hero no longer waits on a
   render-blocking stylesheet from a third origin. Inert until Lenis adds
   its classes to <html>. Keep in step with the Lenis version in functions.php. */
html.lenis,
html.lenis body{ height:auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped{ overflow:clip; }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal]{ overscroll-behavior:contain; }
.lenis.lenis-smooth iframe{ pointer-events:none; }
.lenis.lenis-autoToggle{
  transition-property:overflow;
  transition-duration:1ms;
  transition-behavior:allow-discrete;
}