/* CELL Performance Lab — scroll experience layer
   Additive. Loads AFTER cell.css and changes nothing that already exists.
   No dependencies: CSS sticky + one rAF loop, matching cell.js.

   Typography rule from the README still holds — Panchang is the page-title
   h1 and nothing else. Every heading below is Roboto.
   ------------------------------------------------------------------ */

/* ---- grouped stagger -------------------------------------------------
   data-cl-rise on a PARENT lifts its direct children in sequence, so
   content can be added or reordered in Oncord without touching markup
   on each child. cell-scroll.js sets --i per child.
   -------------------------------------------------------------------- */
/* Uses `translate`, not `transform`. Children here have their own
   transforms — the tier cards lift on hover — and a `transform:none` from
   this rule lands at equal specificity but later in the cascade, which
   silently cancelled that lift. The independent property composes with
   transform instead of replacing it. */
[data-cl-rise] > *{
  opacity:0;translate:0 26px;filter:blur(4px);
  transition:opacity .9s var(--ease),translate .9s var(--ease),filter .9s var(--ease);
  transition-delay:calc(var(--i,0) * 80ms);
}
[data-cl-rise].is-in > *{opacity:1;translate:none;filter:none}

/* ---- hero handoff ----------------------------------------------------
   The video eases up in scale while the copy drifts and fades, so leaving
   the hero reads as a camera move rather than a section ending.
   -------------------------------------------------------------------- */
.cl-hero__video{will-change:transform}
.cl-hero__inner{will-change:transform,opacity}

/* ---- count-up --------------------------------------------------------
   Reserves the final width so the strip doesn't reflow while counting. */
.cl-count{font-variant-numeric:tabular-nums}


/* ======================================================================
   HEADER CTA CONTRAST  (pre-existing, affects every page)
   `.cl-nav a` and `.cl-drawer a` set a cream link colour at (0,1,1),
   which outranks `.cl-btn--primary`'s navy at (0,1,0) — so the bronze
   button carries cream text. Worse, `.cl-nav a:hover` switches it to
   var(--bronze): bronze on bronze, and the label disappears entirely
   under the cursor. Restated here at a weight that wins.
   ====================================================================== */
.cl-nav a.cl-btn--primary,
.cl-drawer a.cl-btn--primary{color:var(--navy)}
.cl-nav a.cl-btn--primary:hover,
.cl-drawer a.cl-btn--primary:hover{color:var(--navy)}


/* ======================================================================
   CARD SURFACES
   The method steps sat at 0% background and the tier cards at 2% white,
   which held up while the ground behind them was flat navy. With lighting
   and line work back there they stopped reading as surfaces. These give
   each card a real navy gradient — opaque enough to sit ON the page
   rather than float in it — while keeping the selected and hover states,
   and the border, transform and shadow that come with them.
   ====================================================================== */
.cl-step{
  background:linear-gradient(155deg,rgba(24,38,86,.74) 0%,rgba(7,15,44,.84) 100%);
}
.cl-step[aria-selected="true"],.cl-step:hover{
  background:linear-gradient(155deg,rgba(40,58,120,.90) 0%,rgba(11,21,58,.93) 100%);
}

.cl-tier{
  background:linear-gradient(150deg,rgba(24,38,86,.76) 0%,rgba(7,15,44,.86) 100%);
}
.cl-tier[aria-selected="true"],.cl-tier:hover{
  background:linear-gradient(150deg,rgba(42,60,124,.92) 0%,rgba(10,20,56,.95) 100%);
}


/* ======================================================================
   AMBIENT LIGHTING
   cell.css places three glows at 12vh, 118vh and 250vh — the whole page
   runs to roughly 760vh, so everything from the CELL Method down had no
   light source at all. These rules carry the lighting to the foot of the
   page and give the drift enough travel to actually read as movement
   (the original moved 3% over 26s, which is imperceptible).

   Loaded after cell.css, so equal-specificity rules win on source order —
   no !important needed.
   ====================================================================== */
.cl-glow{
  --gx:8%; --gy:-10%; --gs:1.18;
  will-change:transform,opacity;
}

/* Out of phase with each other so the page never pulses as one unit. */
.cl-glow--a{animation:cl-glow-drift 21s ease-in-out infinite}
.cl-glow--b{animation:cl-glow-drift 27s ease-in-out infinite reverse}
.cl-glow--c{animation:cl-glow-drift 24s ease-in-out infinite}

/* Placement is a PERCENTAGE of .cl-page, not vh. cell.css uses vh, which
   assumes a viewport height — change it and the glows slide out of the
   sections they were lit for. Percentages track the real content length.

   With the pinned chapter occupying roughly 19–63% of the page, the
   original .cl-glow--c at 250vh now sits behind its opaque stage and is
   never seen; it is moved down here to light the CELL Method instead. */
.cl-glow--b{top:10%}                                   /* goal selector  */
.cl-glow--c{top:63%}                                   /* CELL Method    */

.cl-glow--d,.cl-glow--e,.cl-glow--f{
  position:absolute;border-radius:50%;pointer-events:none;
}
.cl-glow--e{                                           /* memberships    */
  top:81%;left:-13vw;width:52vw;height:52vw;max-width:780px;max-height:780px;
  filter:blur(22px);
  background:radial-gradient(circle,rgba(220,151,65,.16) 0%,rgba(220,151,65,0) 68%);
  animation:cl-glow-drift 23s ease-in-out infinite;
}

/* ---- the blue light as an aurora -------------------------------------
   A circle pulsing on the spot always reads as a lamp behind the page.
   These are wide, soft bands instead, and they travel most of the screen
   while tilting and stretching — the movement is the thing that sells it,
   not the colour. Warm glows stay as blobs; only the cool ones sweep.
   -------------------------------------------------------------------- */
.cl-glow--b,.cl-glow--d,.cl-glow--f{
  left:-24vw;right:auto;
  width:150vw;max-width:none;
  height:42vw;max-height:660px;
  filter:blur(58px);
  background:radial-gradient(ellipse 46% 50% at 50% 50%,
              rgba(52,88,178,.34) 0%,rgba(52,88,178,.14) 42%,rgba(52,88,178,0) 72%);
}
/* Each band needs its own top here: this rule set overrides the earlier
   one, and an aurora with no top collapses to 0 and stacks on the others. */
.cl-glow--b{top:10%}                                   /* goal selector  */
.cl-glow--d{top:70%}                                   /* gallery        */
.cl-glow--f{top:89%}                                   /* app + closing  */
.cl-glow--b{animation:cl-aurora 33s ease-in-out infinite}
.cl-glow--d{animation:cl-aurora 41s ease-in-out infinite reverse}
.cl-glow--f{animation:cl-aurora 37s ease-in-out infinite}

@keyframes cl-aurora{
  0%,100%{transform:translate3d(-16%,2%,0) rotate(-7deg) scaleY(.82);opacity:.22}
  35%    {opacity:.85}
  50%    {transform:translate3d(14%,-3%,0) rotate(6deg) scaleY(1.18);opacity:1}
  70%    {opacity:.72}
}

/* The swing has to be big to read at all: these gradients top out around
   0.16 alpha, so an opacity range of .70–1 only moves the visible alpha
   between 0.11 and 0.16 — arithmetic nobody can see. Going down to .28
   makes it a light that genuinely rises and falls. */
@keyframes cl-glow-drift{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.28}
  50%    {transform:translate3d(var(--gx),var(--gy),0) scale(var(--gs));opacity:1}
}


/* ---- motes: drifting dark, and lights that come and go ----------------
   Everything ambient so far only ever ADDED light, so the page kept
   getting brighter the more was layered on. These are the other half:
   deep navy shapes that drift through and pull areas back down, and
   small lights that bloom somewhere, hold, and fade out again. Positions
   and clocks come from cell-scroll.js, same approach as the lines.
   -------------------------------------------------------------------- */
.cl-motes{position:absolute;inset:0;pointer-events:none}

.cl-mote{
  position:absolute;border-radius:50%;pointer-events:none;
  opacity:0;
  animation:cl-mote var(--dur,30s) ease-in-out var(--delay,0s) infinite;
}
/* Darker than the page ground, so it reads as depth rather than a smudge */
.cl-mote--dark{
  background:radial-gradient(circle,rgba(2,6,22,.88) 0%,rgba(2,6,22,0) 70%);
  filter:blur(46px);
}
.cl-mote--warm{
  background:radial-gradient(circle,rgba(220,151,65,.30) 0%,rgba(220,151,65,0) 70%);
  filter:blur(50px);
}
.cl-mote--cool{
  background:radial-gradient(circle,rgba(92,200,240,.26) 0%,rgba(92,200,240,0) 70%);
  filter:blur(50px);
}

@keyframes cl-mote{
  0%,100%{opacity:0;transform:translate3d(0,0,0) scale(.82)}
  50%    {opacity:var(--peak,.5);
          transform:translate3d(var(--dx,0px),var(--dy,0px),0) scale(1.16)}
}


/* ---- engineering grid ------------------------------------------------
   cell.css draws both axes in one background, which means they can only
   ever move together. Splitting them across two pseudo-layers lets each
   travel along its own axis — the vertical lines slide left and right,
   the horizontal ones up and down — and fade on their own clock, so the
   lattice never reads as one sheet sliding about.

   Each layer travels exactly 96px, one full cell, so the loop is seamless.
   Transform rather than background-position: the latter repaints a
   full-viewport gradient every frame. .cl-page clips the overflow, and the
   parent's mask still applies to both layers.
   -------------------------------------------------------------------- */
.cl-gridtex{
  inset:0;
  background:none;          /* cell-scroll.js fills it with real lines */
}

/* Each line is its own element with its own clock, brightness and travel,
   set inline by cell-scroll.js. A repeating-linear-gradient cannot do this
   — every line in it shares one opacity and one transform, which is why
   the grid could only ever slide as a single sheet. Lines are free to
   cross each other; that is the point. */
.cl-line{
  position:absolute;pointer-events:none;
  background:rgba(243,239,230,1);
  opacity:0;
}
.cl-line--v{
  top:0;bottom:0;width:1px;
  animation:cl-line-v var(--dur,20s) ease-in-out var(--delay,0s) infinite;
}
.cl-line--h{
  left:0;right:0;height:1px;
  animation:cl-line-h var(--dur,20s) ease-in-out var(--delay,0s) infinite;
}

/* Drifts across its own span while fading up and back down, so a line
   arrives, passes, and leaves rather than blinking on the spot. */
@keyframes cl-line-v{
  0%,100%{opacity:0;transform:translate3d(calc(var(--travel,60px) * -1),0,0)}
  50%    {opacity:var(--peak,.12);transform:translate3d(var(--travel,60px),0,0)}
}
@keyframes cl-line-h{
  0%,100%{opacity:0;transform:translate3d(0,calc(var(--travel,60px) * -1),0)}
  50%    {opacity:var(--peak,.12);transform:translate3d(0,var(--travel,60px),0)}
}


/* ======================================================================
   PINNED CHAPTER
   Full-bleed frame sequence behind a floating copy card. .cl-chapter is a
   tall scroll track; its inner sticks for the duration, and scroll
   progress drives both the frame and which card is showing.
   ====================================================================== */
.cl-chapter{position:relative;height:340vh}

.cl-chapter__inner{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;
  background:var(--deep);
}

/* The footage fills the whole stage */
.cl-chapter__canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  will-change:contents;
}

/* Scrim — holds the card legible and lets the footage sit back as
   atmosphere rather than competing with the type. */
.cl-chapter__wash{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,12,36,.72) 0%,rgba(5,12,36,.44) 42%,rgba(5,12,36,.08) 72%,rgba(5,12,36,.34) 100%),
    linear-gradient(180deg,rgba(0,13,20,.62) 0%,rgba(0,13,20,.04) 26%,rgba(0,13,20,.10) 66%,rgba(5,12,36,.80) 100%);
}

.cl-chapter__stage{
  position:relative;width:100%;max-width:var(--shell);margin:0 auto;
  padding:0 var(--gutter);
}

/* Cards share one grid cell and cross over each other. The tallest sets
   the height, so nothing jumps as they swap. */
.cl-chapter__beats{position:relative;display:grid;max-width:600px}

.cl-chapter__beat{
  grid-area:1/1;
  padding:clamp(28px,3.4vw,44px);
  border:1px solid var(--line);
  background:linear-gradient(140deg,rgba(22,35,79,.62) 0%,rgba(0,13,20,.74) 100%);
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  /* Odd cards arrive from the left and leave right; even cards mirror it,
     so consecutive chapters read as pages turning. */
  --dir:-1;
  opacity:0;
  transform:translate3d(calc(var(--dir) * 74px),0,0);
  transition:opacity .45s var(--ease),transform .55s var(--ease);
  pointer-events:none;
  will-change:transform,opacity;
}
.cl-chapter__beat:nth-child(even){--dir:1}

.cl-chapter__beat.is-on{
  opacity:1;transform:none;pointer-events:auto;
  transition:opacity .5s var(--ease) .14s,transform .7s var(--ease) .08s;
}
/* Already read — exits the side opposite the one it arrived from. */
.cl-chapter__beat.is-past{
  opacity:0;transform:translate3d(calc(var(--dir) * -74px),0,0);
}

/* Contents settle just after the card lands. */
.cl-chapter__beat > *{
  opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.cl-chapter__beat.is-on > *{opacity:1;transform:none}
.cl-chapter__beat.is-on > *:nth-child(1){transition-delay:.26s}
.cl-chapter__beat.is-on > *:nth-child(2){transition-delay:.34s}
.cl-chapter__beat.is-on > *:nth-child(3){transition-delay:.42s}

.cl-chapter__beat h2{
  margin:14px 0 0;font-family:'Roboto',sans-serif;font-weight:300;
  font-size:clamp(28px,3.6vw,48px);line-height:1.08;letter-spacing:-.02em;color:var(--cream);
}
/* Scoped to .cl-body so the .cl-kicker paragraph keeps its own rules. */
.cl-chapter__beat .cl-body{margin-top:20px;max-width:460px;font-size:16.5px}

/* Progress rail — sits under the card, outside it, so it stays put
   while the cards slide across. */
.cl-chapter__rail{
  position:relative;margin-top:clamp(24px,3vw,34px);
  display:flex;gap:8px;max-width:280px;
}
.cl-chapter__tick{flex:1 1 auto;height:2px;background:rgba(243,239,230,.20);overflow:hidden}
.cl-chapter__tick i{
  display:block;height:100%;background:var(--bronze);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.cl-chapter__tick.is-done i{transform:scaleX(1)}

@media(max-width:820px){
  .cl-chapter{height:300vh}
  .cl-chapter__beats{max-width:none}
  .cl-chapter__wash{
    background:
      linear-gradient(180deg,rgba(0,13,20,.72) 0%,rgba(5,12,36,.55) 40%,rgba(5,12,36,.88) 100%);
  }
}

/* ---- reduced motion --------------------------------------------------
   Decorative motion goes; the chapter itself stays whole. Entrances become
   plain fades and the cards cross-fade instead of sliding. The frame
   sequence deliberately keeps scrubbing — it is this section's content
   rather than an effect layered over it, and it only moves while the
   reader is actively scrolling.
   -------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  /* Ambient motion is softened here rather than switched off. Killing it
     outright makes the page look broken rather than considered, so what
     survives is the part with nothing to track — the fades — while the
     travel is cut right back and every clock roughly halves. A 1px lattice
     at 3% opacity creeping a few pixels a minute is about as mild as
     spatial motion gets. */
  .cl-glow{--gx:2.5%; --gy:-3%; --gs:1.06}
  .cl-glow--a,.cl-glow--c,.cl-glow--e{animation-duration:46s}
  /* The aurora keeps sweeping, at about half speed. */
  .cl-glow--b,.cl-glow--d,.cl-glow--f{animation-duration:70s}

  /* Line travel is set inline per element, which would beat a rule here —
     cell-scroll.js shortens it instead. Only the fades are left alone. */

  /* Entrances become a plain fade — no travel, no blur. */
  [data-cl-rise] > *{
    translate:none;filter:none;
    transition:opacity .5s linear;
    transition-delay:calc(var(--i,0) * 40ms);
  }

  .cl-chapter__beat{
    transform:none;
    transition:opacity .35s linear;
    will-change:opacity;
  }
  .cl-chapter__beat.is-on{transform:none;transition:opacity .35s linear .12s}
  .cl-chapter__beat.is-past{transform:none}
  .cl-chapter__beat > *{transform:none;transition:opacity .35s linear}
  .cl-chapter__beat.is-on > *{transform:none}

  .cl-chapter__tick i{transition:transform .2s linear}
}