/* lab.css — Home "Here We Go. LAB" (sections/lab.njk, the two hands; D16 reversed 2026-10-15).
   framer.css owns the lifted layout (550vh scroll track, sticky header + sticky card stack, the five
   stacked panels). This file holds the brand fixes and the pre-JS start state.
   The markup is the FINAL composition, so with JavaScript off or prefers-reduced-motion every panel is
   in place and every line of copy is readable. reveal.js (section 6) drives the scroll motion. */

/* title: the clamp()-sized Bingo Dilan h2 (section-title.njk recipe, R3), above the Overlay Blur
   (z-index 2) so it is not half-blurred at rest, with the mirror's bottom fade on the wrapper */
[data-section="lab"] .hwg-lab-headline {
  overflow: visible;
  z-index: 3;
}
[data-section="lab"] .section-title__wrap {
  -webkit-mask: linear-gradient(#000 0%, #0000 100%);
  mask: linear-gradient(#000 0%, #0000 100%);
}

/* start state before reveal.js's first frame, so the panels never flash in their final place.
   Inline styles set by reveal.js replace these as soon as it runs. */
@media (prefers-reduced-motion: no-preference) {
  html.hwg-js [data-section="lab"] [data-lab-stack="1"],
  html.hwg-js [data-section="lab"] [data-lab-stack="2"],
  html.hwg-js [data-section="lab"] [data-lab-stack="3"],
  html.hwg-js [data-section="lab"] [data-lab-stack="4"],
  html.hwg-js [data-section="lab"] [data-lab-stack="5"],
  html.hwg-js [data-section="lab"] [data-lab-stack="6"] {
    transform: translateY(1200px);
  }
  html.hwg-js [data-section="lab"] [data-lab-counter="-"] {
    transform: translateY(-1200px);
  }
  html.hwg-js [data-section="lab"] [data-lab-counter="+"] {
    transform: translateY(1200px);
  }
  html.hwg-js [data-section="lab"] [data-lab-stack="0"] {
    opacity: 0;
  }
  html.hwg-js [data-section="lab"] [data-lab-wrap] {
    transform: translateY(125px);
  }
  html.hwg-js [data-section="lab"] .hwg-lab-headline {
    opacity: 0;
    transform: translateY(240px) scale(0.7);
  }
}