/**
 * scroll.css — what the scroll system (js/scroll.js) draws on its own.
 */

/* ── the chapter wipe (js/wipe.js) ──────────────────────────────────
   A deep navy panel in both themes: in dark mode --navy-deep turns to
   ink-white, and a white flash is the wrong beat. Above the top bar and
   the morph ghost, below the cursor and the skip link. */
.chapter-wipe {
  --wipe-bg: var(--fw-s70);
  --wipe-ink: var(--fw-t90);
  --wipe-thread: var(--fw-t40);
  position: fixed; inset: 0; z-index: 9500;
  display: grid; place-items: center;
  background: var(--wipe-bg); color: var(--wipe-ink);
  visibility: hidden; clip-path: inset(100% 0% 0% 0%);
  pointer-events: none;
}
.cw-center { display: grid; justify-items: center; gap: 14px; padding: 0 24px; text-align: center; max-width: 980px; }
.cw-num, .cw-title { margin: 0; }
/* a line mask: the text rises through the bottom edge of its own box */
.cw-mask { display: block; overflow: hidden; padding-bottom: .08em; }
.cw-num-in, .cw-title-in { display: block; will-change: transform; }
.cw-num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--wipe-thread); }
.cw-num-of { color: rgba(var(--fw-t90-rgb), .38); }
.cw-title {
  font-size: var(--fs-title); font-weight: 800; line-height: 1.04; letter-spacing: -.03em;   /* the chapter title it announces */
  text-wrap: balance;
}

/* the loader: while the panel waits for what it opens (the FIDA PLANT garden) — a light running along a short line
   under the title, and a quiet line saying what is being made; it fades in only if the wait is noticeable */
.cw-load {
  display: grid; justify-items: center; gap: 12px; margin-top: 14px;
  opacity: 0; translate: 0 6px; transition: opacity .4s var(--ease-out-quart, ease), translate .4s var(--ease-out-quart, ease);
}
.cw-load.is-on { opacity: 1; translate: 0 0; }
.cw-load-bar { position: relative; width: 168px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(var(--fw-t90-rgb), .14); }
.cw-load-run {
  position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--wipe-thread), transparent);
  animation: cw-load-run 1.25s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes cw-load-run { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.cw-load-text { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--fw-t90-rgb), .55); }
.cw-load-text:empty { display: none; }

/* the batch thread at the panel's foot: nine ticks, the token one step on */
.cw-thread {
  position: absolute; left: 50%; bottom: clamp(32px, 7vh, 64px);
  width: min(560px, calc(100vw - 64px)); height: 12px; translate: -50% 0;
}
.cw-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: rgba(var(--fw-t90-rgb), .14); border-radius: 2px; overflow: hidden;
}
.cw-fill { position: absolute; inset: 0; background: var(--wipe-thread); transform-origin: 0 50%; transform: scaleX(0); }
.cw-tick {
  position: absolute; top: 50%; left: calc(var(--k) * 100%);
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: rgba(var(--fw-t90-rgb), .32);
}
.cw-token { position: absolute; top: 50%; left: 0; margin: -5px 0 0 -9px; }

/* ── the scroll vocabulary (js/vocab.js) ────────────────────────────
   Nothing here hides anything on its own: every start state is written
   by JS when a build runs, so without it (reduced motion, a script
   failure) each element is simply as written. */

/* data-reveal="lines" / chapter titles: SplitText's line masks clip, so
   each gets room below for descenders without moving the line box */
:is([data-reveal="lines"], .chapter-title) .split-line-mask { padding-bottom: .14em; margin-bottom: -.14em; }

/* data-reveal="media": full screen shows the whole picture, square */
.vp.is-full [data-reveal="media"] { clip-path: none !important; }
.vp.is-full [data-media-inner] { transform: none !important; }

/* data-marquee: one line that runs; its clones carry the loop. The edges
   fade so items enter and leave rather than being cut. */
[data-marquee].is-marquee {
  display: block; overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track { display: flex; width: max-content; gap: inherit; will-change: transform; }
.marquee-group { display: flex; flex: none; gap: inherit; }

/* ── 01 · the liquid lens (js/lens.js) ──────────────────────────────
   BASE is the photo at its true colour; REVEAL (the SVG) is the same
   photo, magnified a touch and lifted, with the MES layer, shown only
   through the goo mask and edged as glass (a bright rim, a blue glow).
   Fixed dark ink: it sits on a photograph. */
.lab-lens {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none; overflow: hidden;
}
.lab-lens image { filter: saturate(1.18) contrast(1.06) brightness(1.06); }
.lab-lens .lens-tint { fill: rgba(var(--fw-t40-rgb), .08); }
.lab-stage.has-lens .lab-torch { display: none; }      /* the lens is the light now */
.lab-stage.lens-off .lab-lens { visibility: hidden; }
.lab-lens .lens-grid path { stroke: rgba(var(--fw-t40-rgb), .26); stroke-width: 1.4; }
.lab-lens .lens-ring { fill: none; stroke: var(--fw-t40); stroke-width: 2; }
.lab-lens .lens-ring.is-outer { stroke: rgba(var(--fw-t40-rgb), .35); stroke-width: 1; stroke-dasharray: 3 5; }
.lab-lens .lens-leader { fill: none; stroke: rgba(var(--fw-t40-rgb), .7); stroke-width: 1; }
.lab-lens .lens-card-bg { fill: rgba(var(--fw-s90-rgb), .82); stroke: rgba(var(--fw-t40-rgb), .4); stroke-width: 1; }
.lab-lens text { font-family: var(--font-mono); fill: var(--fw-t90); }
.lab-lens .lens-label { font-size: 9px; font-weight: 700; letter-spacing: .12em; fill: var(--fw-t40); }
.lab-lens .lens-value { font-size: 14px; font-weight: 700; }
.lab-lens .lens-value.is-chip { font-size: 12px; }
.lab-lens .lens-line { font-size: 10px; fill: rgba(var(--fw-t90-rgb), .74); }
.lab-lens .lens-time { fill: var(--fw-t40); }
/* reduced motion: the layer is simply on — no photo copy, a lighter grid */
@media (prefers-reduced-motion: reduce) { .lab-lens .lens-grid { opacity: .5; } .lab-lens .lens-tint { display: none; } }
@media print { .lab-lens { display: none; } }

/* ── 03 · 04 · the station and template strips (js/strip.js) ────────
   Desktop only (the class is set there): the coverflow's cards lie in one
   row that runs edge to edge; the scroll moves the row (transform on the
   track). The first and last cards line up with the content column.
   Scoped to the pinned blocks: nothing else in either view (the App
   Library above the templates) is touched. */
/* a pin can't sit inside a transformed view — and at rest .page.in is
   scale(1) translateY(0), which draws exactly as none */
#grid-view.is-strip, #plant-grid-view.is-strip { transform: none; }
.is-strip :is(#stations-index, #templates-index) .carousel-wrap { display: block; position: relative; }
.is-strip :is(#stations-index, #templates-index) .carousel-viewport {
  height: auto; overflow: hidden;
  perspective: var(--pano-depth, none); perspective-origin: 50% 50%;   /* the panorama's eye: the strip's middle */
  width: var(--strip-w, 100vw); margin-left: calc(-1 * var(--strip-left, 0px));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.is-strip :is(#stations-index, #templates-index) .carousel-track {
  display: flex; gap: clamp(20px, 2.2vw, 34px); width: max-content; height: auto;
  padding: 22px var(--strip-right, 0px) 26px var(--strip-left, 0px);
  transform-style: preserve-3d; will-change: transform; cursor: default;   /* the cards bend in the viewport's 3D space */
}
.is-strip :is(#stations-index, #templates-index) .carousel-card {
  position: relative; top: auto; left: auto; flex: none;
  width: clamp(320px, 30vw, 430px); transition: none;
}
/* the arrows flank the dots below the row */
.is-strip :is(#stations-index, #templates-index) .carousel-arrow { position: absolute; top: calc(100% + 2px); z-index: 2; }
.is-strip :is(#car-prev, #plant-prev) { left: 0; }
.is-strip :is(#car-next, #plant-next) { right: 0; }
.is-strip :is(#stations-index, #templates-index) .carousel-dots { min-height: 38px; align-items: center; margin-top: 2px; }

/* ── 06 · the year nav's line reveal (js/proof.js) ──────────────────
   The arrows' own hover transition would trail every frame of the tween. */
.orbit-yearnav.is-lining .orbit-year-arrow { transition: none; }

@media (prefers-reduced-motion: reduce) { .chapter-wipe { display: none; } }
@media print { .chapter-wipe { display: none; } }