/* ═══════════════════════════════════════════════════════════════════
   J BALAJI — CINEMATIC LAYER
   One shared sheet for all nine pages. Loaded from /cinematic.css so a
   change here reaches the whole site with one upload.

   It layers ON TOP of the reveal system already in each page. It never
   touches `animation` or `animation-play-state`, so nothing here can
   fight the existing [data-reveal] choreography — it works through
   clip-path, opacity, filter and transform on elements the old system
   leaves alone.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · scroll progress rail ─────────────────────────────────────── */
#cin-rail{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:700;pointer-events:none;
  background:rgba(201,153,58,.12);
}
#cin-rail i{
  display:block;height:100%;width:0;transform-origin:left;
  background:linear-gradient(90deg,#8A6A22,#C9993A 40%,#FFE97A 60%,#C9993A 85%);
  box-shadow:0 0 14px rgba(201,153,58,.55);
}

/* ── 2 · the chapter marker: where you are, down the left edge ─────── */
#cin-chapters{
  position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:640;
  display:flex;flex-direction:column;gap:9px;pointer-events:none;
  opacity:0;transition:opacity .7s cubic-bezier(.25,.46,.45,.94);
}
#cin-chapters.on{opacity:1}
#cin-chapters b{
  display:block;width:2px;height:14px;background:rgba(201,153,58,.3);
  transition:height .55s cubic-bezier(.16,1,.3,1),background .55s;
}
#cin-chapters b.here{height:30px;background:#FFE97A;box-shadow:0 0 10px rgba(255,233,122,.6)}
#cin-chapters.dark b{background:rgba(255,255,255,.22)}
#cin-chapters.dark b.here{background:#FFE97A}
@media(max-width:1100px){#cin-chapters{display:none}}

/* ── 3 · every photograph arrives behind a wipe ────────────────────── */
/* clip-path is untouched by the old system, so this composes cleanly. */
img[data-cin-wipe]{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.06);
  filter:saturate(.72);
  transition:
    clip-path 1.15s cubic-bezier(.76,0,.17,1),
    transform 1.5s cubic-bezier(.2,.7,.2,1),
    filter 1.2s ease-out;
}
img[data-cin-wipe].cin-seen{
  clip-path:inset(0 0 0 0);
  transform:scale(1);
  filter:saturate(1);
}
/* a photograph already being drifted keeps its own transform */
img[data-drift][data-cin-wipe],img[data-par][data-cin-wipe]{transform:none}
img[data-drift][data-cin-wipe].cin-seen,img[data-par][data-cin-wipe].cin-seen{transform:none}

/* ── 4 · a section settles into place as it takes over ─────────────── */
/* Deliberately NOT dimming the section itself. Hiding real content behind a
   class that JS has to add is how pages end up half-invisible when anything
   goes wrong. The arrival is carried by the glow, the wipes and the cascades
   below — all of which fail safe to "fully visible". */

/* the band behind the copy lifts a little on arrival */
section[data-cin]::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 60% at 50% 0%,rgba(201,153,58,.10),transparent 62%);
  opacity:0;transition:opacity 1.3s cubic-bezier(.25,.46,.45,.94);
}
section[data-cin].cin-in::after{opacity:1}

/* ── 5 · headline words rise one after another ─────────────────────── */
/* Only applied to headings the page had not already split. */
.cin-w{display:inline-block;white-space:pre;opacity:0;transform:translate3d(0,.7em,0);filter:blur(6px)}
.cin-h.cin-in .cin-w{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),filter .8s ease-out;
  transition-delay:calc(var(--w) * 52ms);
}

/* ── 6 · body copy and controls follow the heading in ───────────────── */
[data-cin-step]{
  opacity:0;transform:translate3d(0,22px,0);
}
.cin-in [data-cin-step]{
  opacity:1;transform:none;
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--s) * 80ms + 180ms);
}

/* ── 7 · the wash that passes between chapters ─────────────────────── */
#cin-wash{
  position:fixed;inset:0;z-index:395;pointer-events:none;opacity:0;
  background:linear-gradient(to bottom,rgba(30,5,9,.55),transparent 58%);
  transition:opacity .5s ease-out;
}

/* ── 8 · empty cells must not read as blocks of colour ─────────────── */
/*
   79 grids draw hairlines by showing a gold backdrop through a 1px gap.
   That backdrop also fills every unused cell in the last row, so a row
   holding one card ends up as one card plus a large beige slab.

   Overriding the backdrop from here turned out to be the wrong lever: the
   pages already set `box-shadow:none!important` on .jb-card below 1000px,
   so the replacement hairline would vanish on exactly the screens where
   the problem is most visible.

   So the fix is done in script instead — a filler is placed into the unused
   cells, painted with the section's own background, which hides the
   backdrop without touching a single existing rule. All this sheet does is
   describe the filler.
*/
[data-cin-filler]{
  pointer-events:none;
}
/* No negative bleed: the gold line along the filler's left edge is the
   right-hand border of the last real card, and the line along its top is
   the row above. Both belong there. Covering them would leave the last
   card looking unfinished. */

/* a last row that is barely filled gets centred rather than stranded */
[data-cin-centre]{grid-column-start:var(--cs)}

/* ── quiet on small screens: keep the reveals, drop the scenery ────── */
@media(max-width:760px){
  section[data-cin]::after{display:none}
  img[data-cin-wipe]{transition-duration:.8s,1s,.8s}
  #cin-wash{display:none}
}

/* ── anyone who asked for less motion gets none of it ──────────────── */
@media(prefers-reduced-motion:reduce){
  #cin-rail,#cin-chapters,#cin-wash{display:none!important}
  img[data-cin-wipe]{clip-path:none!important;transform:none!important;filter:none!important;transition:none!important}
  section[data-cin]::after{display:none!important}
  .cin-w{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  [data-cin-step]{opacity:1!important;transform:none!important;transition:none!important}
}