/* ============================================================
   OMNI LABS — scroll choreography styles (lead-authored)
   Active only when choreo.js adds .choreo-on to #expStage
   (desktop ≥1024px, motion allowed, JS on). The default stacked
   layout in style.css serves mobile / reduced-motion / no-JS.
   ============================================================ */

.experiments__stage.choreo-on .experiments__pin {
  position: relative;
  height: 100vh;
  display: block;
  overflow: hidden;
  /* full-bleed dark screen: break out of the section's horizontal padding so
     the stage (and the glow's soft falloff) reaches the viewport edges —
     no boxed-panel effect */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--green-darkest, #103B16);
}

/* Beaker locked center-stage. Centering is done with GSAP xPercent/yPercent
   (not a CSS transform) so scale/y tweens compose instead of clobbering it. */
.experiments__stage.choreo-on .experiments__beaker {
  position: absolute;
  left: 50%;
  top: 50%;
  /* dominant: taller than the cards, ~3/4 of the stage height at rest */
  width: clamp(340px, 36vw, 540px);
  height: clamp(453px, 48vw, 720px);
  margin: 0;
  /* frontmost — the cards pass BEHIND the vessel; that depth is the effect */
  z-index: 6;
}

/* finale trio: flank the main vessel, one layer behind it, risen by the
   timeline from below the stage edge — a cluster, not a lineup, so the
   closing statement above stays the loudest thing on screen */
.experiments__stage.choreo-on .experiments__side-beaker {
  display: block;
  position: absolute;
  top: 50%;
  width: clamp(230px, 22vw, 360px);
  height: clamp(307px, 29.4vw, 480px);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
/* tucked inward so the flagship's silhouette overlaps them */
.experiments__stage.choreo-on .experiments__side-beaker--l { left: 38%; }
.experiments__stage.choreo-on .experiments__side-beaker--r { left: 62%; }

/* closing statement inside the pin: parked in the top band of the stage;
   the timeline raises it from below while the flagship descends. Behind
   every vessel (z2 vs 5/6) — the glass passes in front of the words. */
.experiments__stage.choreo-on .experiments__finale-head {
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(64px, 9vh, 130px);
  margin: 0 auto;
  max-width: none;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.experiments__stage.choreo-on .experiments__finale-head h2 {
  font-size: clamp(36px, 6.2vh, 88px);
}

/* handwritten specimen notes beside the trio */
.experiments__stage.choreo-on .experiments__spec-note {
  display: block;
  position: absolute;
  margin: 0;
  z-index: 7;
  opacity: 0;
  pointer-events: none;
  font: 600 clamp(21px, 1.8vw, 29px)/1.08 var(--font-hand, 'Caveat', cursive);
  color: var(--sage-soft, #B7CAAB);
  text-align: center;
  will-change: transform, opacity;
}
/* hugging their vessels: just outside each flask's shoulder (flasks sit at
   38% / 62%), so note → arrow → cork reads as one gesture */
.experiments__stage.choreo-on .experiments__spec-note--l { left: 29.5%; top: 57%; }
.experiments__stage.choreo-on .experiments__spec-note--r { left: 70.5%; top: 57%; }
.experiments__stage.choreo-on .experiments__spec-note svg {
  display: block; width: clamp(28px, 2.4vw, 40px); margin-top: 6px;
}
.experiments__stage.choreo-on .experiments__spec-note--l svg { margin-left: auto; margin-right: 4px; }
.experiments__stage.choreo-on .experiments__spec-note--r svg { margin-right: auto; margin-left: 4px; }

.experiments__stage.choreo-on .experiments__cards {
  position: static;
  display: block;
  max-width: none;
  margin: 0;
}

/* Cards start hidden; GSAP flies them through on alternating sides. */
/* landscape specimen tiles: centered text leaves whitespace both sides, so the
   vessel can overlap a flank without sitting on the words — and what it does
   cover stays readable through the transparent glass */
.experiments__stage.choreo-on .exp-card {
  position: absolute;
  top: 50%;
  margin: 0;
  width: min(620px, 47vw);
  padding: clamp(24px, 3vw, 36px) clamp(28px, 3.4vw, 48px);
  text-align: center;
  opacity: 0;
  z-index: 3;
  will-change: transform, opacity;
}
.experiments__stage.choreo-on .exp-card__body { max-width: 44ch; margin-left: auto; margin-right: auto; }
.experiments__stage.choreo-on .exp-card__features { align-items: center; }
/* lanes pulled inward so each card's inner edge slides behind the vessel */
.experiments__stage.choreo-on .exp-card[data-side="left"] {
  left: clamp(20px, 9vw, 170px);
}
.experiments__stage.choreo-on .exp-card[data-side="right"] {
  right: clamp(20px, 9vw, 170px);
}