/* SECTION 02 — the Adaptation Laboratory (js/lab.js). A pinned stage scrubbing the film,
   with a copy bar beneath it in the film's own floor colour. One capability at a time. */

.lab {
  --lab-sky: #E2D2BF;          /* sampled from the film: top of frame */
  --lab-floor: #E4DDCB;        /* and its floor at the bottom edge, which the copy bar continues */
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: calc(100svh - var(--nav-h));
  min-height: 34rem;
  overflow: hidden;
  background: var(--lab-floor);
  color: var(--black);
  font-family: var(--satoshi);
}

/* ---------- Stage: the film ---------- */
.lab-stage { position: relative; overflow: hidden; background: linear-gradient(var(--lab-sky), #E4DBC9 60%, var(--lab-floor)); }
.lab-film { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1440 / 630; will-change: transform; }
.lab-film > * { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }

/* ---------- Copy bar ---------- */
.lab-bar {
  position: static; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1rem 2rem;
  min-height: clamp(9.5rem, 24svh, 13.5rem);
  padding: 0.6rem var(--gutter) clamp(1rem, 3svh, 1.8rem);
}
.lab-texts { display: grid; min-width: 0; }
.lab-intro, .lab-cap { grid-area: 1 / 1; align-self: end; }
.lab-caps { display: contents; margin: 0; padding: 0; list-style: none; }

.lab-kicker { margin: 0 0 0.8rem; font: 700 0.72rem/1 var(--satoshi); letter-spacing: 0.16em; text-transform: uppercase; }
.lab-title {
  margin: 0; font: 900 clamp(2.1rem, 4.6vw, 5.4rem)/0.9 var(--satoshi);
  letter-spacing: -0.055em; text-transform: uppercase;
}
.lab-title .lab-alt { color: var(--olive); }

.lab-cap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(1rem, 3vw, 3rem); align-items: end; }
.lab-cap-img { display: none; }
/* The service is the anchor of each caption: a bold name on a block of its own accent colour
    (the brief's expressive palette), with the number as a plain outlined badge beside it. */
.lab-num {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 0.7rem; margin: 0 0 1.1rem;
  font: 800 clamp(1.05rem, 1.45vw, 1.45rem)/1.1 var(--satoshi); letter-spacing: 0.01em; text-transform: uppercase;
}
.lab-n {
  display: inline-grid; place-items: center; flex: none; width: 2.5em; height: 2.5em; border: 2px solid var(--black); border-radius: 50%;
  font-size: 0.6em; font-weight: 700; letter-spacing: 0.06em;
}
.lab-service { position: relative; z-index: 0; padding: 0.2em 0.5em 0.16em; color: var(--svc-ink); }
.lab-service::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 0.18em; background: var(--svc); transform-origin: left center; }
.lab-cap[data-cap="0"] { --svc: var(--pink); --svc-ink: var(--black); }   /* black on hot pink: ~5.2:1 (ivory is ~3.2:1) */
.lab-cap[data-cap="1"] { --svc: var(--blue); --svc-ink: var(--ivory); }
.lab-cap[data-cap="2"] { --svc: var(--forest); --svc-ink: var(--ivory); }
.lab-cap[data-cap="3"] { --svc: var(--acid); --svc-ink: var(--black); }
.lab-cap[data-cap="4"] { --svc: var(--yellow); --svc-ink: var(--black); }
.lab-head { margin: 0; font: 900 clamp(2rem, 3.7vw, 4.3rem)/0.9 var(--satoshi); letter-spacing: -0.05em; text-transform: uppercase; }
.lab-copy { margin: 0; max-width: 30ch; font: 500 clamp(1rem, 1.2vw, 1.15rem)/1.45 var(--satoshi); color: #3A3A33; }

/* One line of copy at a time: the rest wait just below, invisible. */
.lab-intro, .lab-cap { opacity: 0; translate: 0 1.2rem; pointer-events: none; transition: opacity 320ms var(--ease), translate 480ms var(--ease); }
.lab[data-cap="intro"] .lab-intro,
.lab[data-cap="0"] .lab-cap[data-cap="0"], .lab[data-cap="1"] .lab-cap[data-cap="1"],
.lab[data-cap="2"] .lab-cap[data-cap="2"], .lab[data-cap="3"] .lab-cap[data-cap="3"],
.lab[data-cap="4"] .lab-cap[data-cap="4"] { opacity: 1; translate: 0 0; pointer-events: auto; }

/* ---------- Progress: five ticks, each a shortcut ---------- */
.lab-progress { display: flex; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.lab-progress button {
  display: grid; place-items: center; width: 2.6rem; height: 1.9rem; border: 1.5px solid var(--black); border-radius: 999px;
  background: transparent; color: var(--black); font: 700 0.66rem var(--satoshi); letter-spacing: 0.08em; cursor: pointer;
  transition: background 240ms, color 240ms;
}
.lab-progress li.is-on button { background: var(--black); color: var(--ivory); }
.lab-progress button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- The still version: reduced motion, no GSAP, no JS, or the film failed ---------- */
.lab--still, html:not(.js) .lab { display: block; height: auto; min-height: 0; padding: clamp(3rem, 8vw, 6rem) 0; }
.lab--still .lab-stage, html:not(.js) .lab-stage,
.lab--still .lab-progress, html:not(.js) .lab-progress { display: none; }
.lab--still .lab-bar, html:not(.js) .lab-bar { display: block; min-height: 0; padding: 0 var(--gutter); }
.lab--still .lab-intro, .lab--still .lab-cap,
html:not(.js) .lab-intro, html:not(.js) .lab-cap { opacity: 1; translate: none; pointer-events: auto; }
.lab--still .lab-intro, html:not(.js) .lab-intro { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.lab--still .lab-caps, html:not(.js) .lab-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 2.5rem 1.5rem; }
.lab--still .lab-cap, html:not(.js) .lab-cap { display: block; }
.lab--still .lab-cap-img, html:not(.js) .lab-cap-img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 695; object-fit: cover; margin-bottom: 1rem; border-radius: 0.6rem; }
.lab--still .lab-head, html:not(.js) .lab-head { font-size: clamp(1.6rem, 2.4vw, 2.3rem); margin-bottom: 0.6rem; }

/* ---------- Phones: copy stacks; the stage pans to follow Girgit ---------- */
@media (max-width: 760px) {
  .lab-bar { grid-template-columns: 1fr; min-height: clamp(13rem, 36svh, 17rem); align-items: start; }
  .lab-texts { align-self: start; }
  .lab-intro, .lab-cap { align-self: start; }
  .lab-cap { grid-template-columns: 1fr; row-gap: 0.7rem; }
  .lab-title { font-size: clamp(2rem, 10vw, 3rem); }
  .lab-head { font-size: clamp(1.9rem, 9.4vw, 2.7rem); }
  .lab-copy { font-size: 0.98rem; }
  .lab-progress { order: 2; }
  .lab-progress button { width: 2.2rem; }
}

/* Wide screens: the film fills the section and the caption is an overlay on one side of it,
   the side Girgit isn't on (data-side, set by js/lab.js). Kicker, headline, copy and the
   progress buttons move as one block; it fades out, swaps sides and fades back in.
   Live scene only: the still version keeps its plain list. */
@media (min-width: 761px) {
  .js .lab:not(.lab--still) { grid-template-rows: minmax(0, 1fr); }
  .js .lab:not(.lab--still) .lab-bar {
    position: absolute; z-index: 2; top: 0; left: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1.2rem, 3svh, 2rem);
    width: min(40rem, 42%); min-height: 0;
    padding: clamp(2rem, 8svh, 5rem) var(--gutter) 0;
    transition: opacity 220ms var(--ease);
  }
  .js .lab:not(.lab--still)[data-side="right"] .lab-bar { left: auto; right: 0; }
  .js .lab:not(.lab--still) .lab-bar.is-flipping { opacity: 0; }
  .js .lab:not(.lab--still) .lab-texts { width: 100%; }
  .js .lab:not(.lab--still) .lab-cap { grid-template-columns: 1fr; row-gap: 0.6rem; }   /* headline over copy */
  .js .lab:not(.lab--still) .lab-intro, .js .lab:not(.lab--still) .lab-cap { align-self: start; }
}

/* ---------- Appearing: each caption's pieces arrive in sequence ----------
   The number badge pops, the headline words rise from their clipped boxes one by one, then
   the line and kicker fade up. The progress buttons pop in as the scene arrives (.is-in). */
.lab-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.14em 0.12em 0.16em; margin: -0.14em -0.12em -0.16em;   /* room for the whole letter: tight tracking and line-height otherwise shave its edges */ }
.lab-w > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .lab:not(.lab--still) .lab-w > span { translate: 0 150%; transition: translate 650ms var(--ease) calc(var(--i, 0) * 45ms + 90ms); }
  .js .lab:not(.lab--still) .lab-n { scale: 0.3; transition: scale 460ms cubic-bezier(0.34, 1.56, 0.64, 1) 40ms; }
  /* The service highlight wipes in like a marker, then its name takes the highlight's ink. */
  .js .lab:not(.lab--still) .lab-service { color: var(--black); transition: color 200ms var(--ease) 360ms; }
  .js .lab:not(.lab--still) .lab-service::before { transform: scaleX(0); transition: transform 560ms cubic-bezier(0.7, 0, 0.2, 1) 120ms; }
  .js .lab:not(.lab--still) :is(.lab-copy, .lab-kicker) { opacity: 0; translate: 0 0.7rem; transition: opacity 420ms var(--ease) 280ms, translate 560ms var(--ease) 280ms; }
  .js .lab:not(.lab--still) :is(.lab[data-cap="intro"] .lab-intro, .lab[data-cap="0"] .lab-cap[data-cap="0"], .lab[data-cap="1"] .lab-cap[data-cap="1"], .lab[data-cap="2"] .lab-cap[data-cap="2"], .lab[data-cap="3"] .lab-cap[data-cap="3"], .lab[data-cap="4"] .lab-cap[data-cap="4"]) :is(.lab-w > span, .lab-copy, .lab-kicker) { translate: 0 0; opacity: 1; }
  .js .lab:not(.lab--still) :is(.lab[data-cap="intro"] .lab-intro, .lab[data-cap="0"] .lab-cap[data-cap="0"], .lab[data-cap="1"] .lab-cap[data-cap="1"], .lab[data-cap="2"] .lab-cap[data-cap="2"], .lab[data-cap="3"] .lab-cap[data-cap="3"], .lab[data-cap="4"] .lab-cap[data-cap="4"]) .lab-n { scale: 1; }
  .js .lab:not(.lab--still) :is(.lab[data-cap="0"] .lab-cap[data-cap="0"], .lab[data-cap="1"] .lab-cap[data-cap="1"], .lab[data-cap="2"] .lab-cap[data-cap="2"], .lab[data-cap="3"] .lab-cap[data-cap="3"], .lab[data-cap="4"] .lab-cap[data-cap="4"]) .lab-service { color: var(--svc-ink); }
  .js .lab:not(.lab--still) :is(.lab[data-cap="0"] .lab-cap[data-cap="0"], .lab[data-cap="1"] .lab-cap[data-cap="1"], .lab[data-cap="2"] .lab-cap[data-cap="2"], .lab[data-cap="3"] .lab-cap[data-cap="3"], .lab[data-cap="4"] .lab-cap[data-cap="4"]) .lab-service::before { transform: none; }

  .js .lab:not(.lab--still) .lab-progress li { opacity: 0; scale: 0.6; transition: opacity 300ms var(--ease), scale 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
  .js .lab.is-in .lab-progress li { opacity: 1; scale: 1; }
  .lab-progress li:nth-child(2) { transition-delay: 60ms; }
  .lab-progress li:nth-child(3) { transition-delay: 120ms; }
  .lab-progress li:nth-child(4) { transition-delay: 180ms; }
  .lab-progress li:nth-child(5) { transition-delay: 240ms; }
}

/* ---------- The track (js/lab.js): the section sticks under the nav while the film plays ---------- */
.lab-track { position: relative; background: var(--lab-floor); }
.lab-track > .lab { position: sticky; top: var(--nav-h); }