/* ============================================================
   MIDNIGHT — MOTION
   The layer that makes the page feel alive rather than set.
   Four ideas, applied everywhere:

     1. Type arrives word by word, from behind a mask, rotating
        up off its own baseline. Nothing fades in as a block.
     2. Every chapter is scroll-linked — it rises as it enters
        and sinks and dims as it leaves, so the page is always
        in motion under the reader rather than jumping.
     3. The whole frame is washed in the active capability's
        colour, so the page changes hue six times on the way
        down and every change is motivated.
     4. Anything you can touch answers: lift, tilt, light, or
        travel. Nothing is inert.
   ============================================================ */

/* ---------- 1. kinetic type --------------------------------- */
.w{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.1em;margin-bottom:-.1em;
}
.w > i{
  display:inline-block;font-style:inherit;
  transform:translateY(118%) rotate(4deg);transform-origin:0% 100%;
  transition:transform 1.15s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--wi,0) * 52ms + var(--rd,0) * 60ms);
}
[data-r].in .w > i{transform:none;}
.unclip .w{overflow:visible;}
/* the container stops animating once its words do the work */
[data-r].is-split{opacity:1;transform:none;transition:none;}

/* ---------- 2. scroll-linked chapters ----------------------- */
.ch__in{
  transform:translate3d(0,var(--py,0px),0);
  opacity:var(--po,1);
  will-change:transform,opacity;
}
/* the eyebrow and the rule travel further than the body: parallax
   inside the chapter, not just under it */
.ch__no{transform:translate3d(0,calc(var(--py,0px) * -0.55),0);}
.ch__no::after{width:var(--rule,120px);transition:width 1.4s var(--ease);}
[data-r].in.ch__no::after{width:120px;}

/* ---------- 3. the colour wash ------------------------------ */
.wash{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.85;
  background:
    radial-gradient(58vw 62vh at 14% 32%,
      color-mix(in srgb,var(--accent,#6FB8FF) 20%,transparent),transparent 68%),
    radial-gradient(46vw 54vh at 88% 76%,
      color-mix(in srgb,var(--accent,#6FB8FF) 13%,transparent),transparent 66%);
  transition:background 1.6s var(--ease);
  animation:wash-drift 26s ease-in-out infinite alternate;
}
@keyframes wash-drift{
  from{transform:translate3d(-1.5%,-1%,0) scale(1.02);}
  to{transform:translate3d(2%,1.5%,0) scale(1.06);}
}

/* a hairline that travels the full width as a chapter arrives */
.ch::before{
  content:"";position:absolute;left:clamp(20px,5vw,72px);right:clamp(20px,5vw,72px);
  top:0;height:1px;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent,#6FB8FF) 70%,transparent),transparent 72%);
  transition:transform 1.6s cubic-bezier(.16,1,.3,1);
}
.ch.seen::before{transform:scaleX(1);}
.call::before{display:none;}

/* ---------- 4. things that answer --------------------------- */

/* the gathering: the words breathe before they are pulled in */
.gather.in .gword{animation:gw-float 7s ease-in-out infinite;animation-delay:calc(var(--i,0) * .7s + 1.4s);}
@keyframes gw-float{0%,100%{translate:0 0;}50%{translate:0 -5px;}}
.gword{cursor:default;transition:transform 1.25s cubic-bezier(.16,1,.3,1),opacity .8s var(--ease),color .4s var(--ease);}
.gword:hover{color:#fff;}
.gword:hover::before{box-shadow:0 0 22px var(--nc),0 0 60px color-mix(in srgb,var(--nc) 60%,transparent);}

/* the STAR stations rise in sequence and light as they land */
.path__st{
  transform:translate3d(0,26px,0);opacity:0;
  transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .8s var(--ease);
}
.path__st:nth-child(1){transition-delay:.05s;}
.path__st:nth-child(2){transition-delay:.19s;}
.path__st:nth-child(3){transition-delay:.33s;}
.path__st:nth-child(4){transition-delay:.47s;}
[data-path].in .path__st{transform:none;opacity:1;}

/* the readout figures sit on their own small stage */
.readout__c{
  position:relative;transition:background .6s var(--ease);
}
.readout__c::after{
  content:"";position:absolute;left:0;right:14px;bottom:0;height:1px;
  background:var(--accent);box-shadow:0 0 14px var(--accent);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1);
}
.readout__c:hover::after{transform:scaleX(1);}
.readout__c:hover .readout__n{color:#fff;}
.readout__n{transition:color .5s var(--ease);}

/* the sectors drift, and hovering one holds it */
.sectors span{cursor:default;}
.sectors span:hover{transform:translateY(-2px);}

/* The offers used to become glass on approach. That treatment belonged
   to an earlier version of the section and it was still winning here —
   motion.css loads after chapters.css, so these four rules were quietly
   overriding the card system's background, shadow, radius and title
   colour, including forcing a 2px radius onto a 16px card and a white
   title onto a white hover. The cards own their own state now; the only
   thing still needed from this file is the text-shadow on the figure. */
.offer:hover .offer__p{text-shadow:0 0 46px color-mix(in srgb,var(--accent) 45%,transparent);}
.offer__p{transition:text-shadow .6s var(--ease);}

/* the partner scale draws itself */
.scale__axis{transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.8s cubic-bezier(.16,1,.3,1) .2s;}
[data-r].in .scale__axis{transform:scaleX(1);}
.scale__st{transition:transform .6s var(--ease);}
.scale__st:hover{transform:translateY(-4px);}
.scale__st:hover .scale__n{color:#fff;text-shadow:0 0 50px color-mix(in srgb,var(--accent) 70%,transparent);}
.scale__n{transition:color .5s var(--ease),text-shadow .6s var(--ease);}

/* questions open with weight */
.q{transition:background .5s var(--ease);}
.q:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent 60%);}
.q__p p{
  transform:translateY(-10px);opacity:0;
  transition:transform .55s var(--ease) .06s,opacity .5s var(--ease) .06s;
}
.q.on .q__p p{transform:none;opacity:1;}

/* the closing call breathes */
.call__h{
  animation:call-glow 8s ease-in-out infinite;
}
@keyframes call-glow{
  0%,100%{text-shadow:0 0 80px rgba(59,157,255,.30);}
  50%{text-shadow:0 0 120px rgba(111,184,255,.55);}
}

/* voices lift as a set */
.voice{transition:transform .6s var(--ease),border-color .6s var(--ease);}
.voice:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 60%,transparent);}

@media (prefers-reduced-motion:reduce){
  .w > i{transform:none;transition:none;}
  .ch__in{transform:none;opacity:1;}
  .ch__no{transform:none;}
  .ch::before{transform:scaleX(1);transition:none;}
  .wash{animation:none;}
  .gather.in .gword{animation:none;}
  .path__st{transform:none;opacity:1;}
  .scale__axis{transform:scaleX(1);}
  .call__h{animation:none;}
}

/* ---------- the capabilities answer ------------------------- */
.cap{transition:background .6s var(--ease),padding-left .6s var(--ease);}
[data-r].in .cap::before{transform:scaleY(1);transition-delay:calc(var(--ci,0) * 90ms);}
.cap:hover{
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--nc) 8%,transparent),transparent 62%);
  padding-left:clamp(20px,2.6vw,34px);
}
.cap:hover .cap__t{color:#fff;}
.cap:hover .cap__l li{border-color:color-mix(in srgb,var(--nc) 45%,transparent);color:#fff;}
.cap__l li:hover{background:color-mix(in srgb,var(--nc) 22%,transparent);border-color:var(--nc);}

/* ---------- the lower half answers -------------------------- */

/* Scroll velocity skews the whole lower page a fraction of a degree.
   It is the difference between a page that scrolls and a page that has
   weight — set in JS, clamped hard, and off entirely for reduced motion. */
.ch--wide .ch__in{
  transform:translate3d(0,var(--py,0px),0) skewY(var(--skew,0deg));
  transform-origin:50% 0;
}

/* the marquee rows arrive from opposite sides */
.mq__row{opacity:0;transform:translateX(-4%);transition:opacity 1s var(--ease),transform 1.3s cubic-bezier(.16,1,.3,1);}
.mq__row--rev{transform:translateX(4%);}
[data-r].in .mq__row{opacity:1;transform:none;}
[data-r].in .mq__row--rev{transition-delay:.14s;}

/* the figures land on a rule that draws itself under the whole row */
.readout{position:relative;}
.readout::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--accent),transparent 78%);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.8s cubic-bezier(.16,1,.3,1) .3s;
}
[data-r].in.readout::after{transform:scaleX(1);}
.readout__n{
  transition:color .5s var(--ease),transform .5s var(--ease);
}
.readout__c:hover .readout__n{transform:translateY(-3px);}

/* offer rows tilt very slightly toward the pointer */
.offer{transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));}

/* the sticky FAQ heading fades as its column runs out */
#questions .ch__head{transition:opacity .6s var(--ease);}

@media (prefers-reduced-motion:reduce){
  .ch--wide .ch__in{transform:none;}
  .mq__track{animation:none;}
  .mq__row{opacity:1;transform:none;}
  .readout::after{transform:scaleX(1);}
  .offer{transform:none;}
}