:root {
  /* Native asset dimensions: 5017 x 3344 */
  --img-w: 5017;
  --img-h: 3344;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #000;
}

/* ---- Scroll scene: gives the sticky hero room to scrub through ----
   0 - 100vh of scroll  -> Phase 1 (scrubbed)
   100vh - 200vh        -> hero stays pinned while Phase 2 auto-plays      */
.scroll-scene {
  position: relative;
  /* 0-100vh: Phase 1 (scrubbed) | 100-200vh: Phase 2 logo resize (scrubbed)
     200-300vh: hold final state pinned before the hero releases. */
  height: 400vh;
}

.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.hero-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

/* Every full-frame layer occupies the exact same box. */
.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

.backdrop {
  z-index: 1;
}

.bottle {
  z-index: 3;
}

/* Bottle relocation: layers 2 and 3 shift straight down. The pixel amounts are
   driven by JS via these custom properties (default 0 = original position). */
#b2 {
  transform: translateY(var(--shift2, 0px));
}

#b3 {
  transform: translateY(var(--shift3, 0px));
}

/* ---- Video (Phase 0 handoff) ---- */
.hero-video {
  z-index: 5;
  opacity: 1;
  transition: opacity 1s ease;
}

.hero-video.is-fading {
  opacity: 0;
}

.hero-video.is-gone {
  display: none;
}

/* The composite is hidden until the video reaches its final frame. */
.composite {
  visibility: hidden;
}

.hero-stage.is-revealed .composite {
  visibility: visible;
}

/* ---- NULA wordmark (z2: behind bottles, in front of backdrop) ----
   Fully scrubbed by JS: size, vertical centre and slide are all driven from
   scroll position via custom properties, so the Phase 2 shrink follows scroll
   exactly like the rest of the animation (no auto-play transition). The element
   is anchored by its vertical centre (top = centre, translateY(-50%)). */
.wordmark {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  top: var(--wm-top, 40%);
  z-index: 2;
  margin: 0;
  font-family: 'Aboreto', serif;
  font-size: var(--wm-size, 21vw);
  line-height: 0.9;
  letter-spacing: var(--wm-track, 0.02em);
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(calc(-50% + var(--wm-slide, 100vh)));
  will-change: transform, top, font-size;
}

/* ---- Navigation bar (Phase 2) ---- */
.hero-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.4rem 3.5rem;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.nav-group {
  display: flex;
  gap: 2.6rem;
}

.hero-nav a {
  color: #fff;
  text-decoration: none;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  opacity: 0.92;
  transition: opacity 0.25s ease;
}

.hero-nav a:hover {
  opacity: 1;
}

/* ---- Quote (Phase 2) ---- */
.hero-quote {
  position: absolute;
  top: 17vh;
  left: 0;
  width: 100%;
  margin: 0;
  text-align: center;
  z-index: 6;
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

/* Phase 2: once the scrubbed logo resize completes (p2 === 1), the nav and
   quote fade in, with a small stagger. */
.hero.phase2 .hero-nav {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.05s;
}

.hero.phase2 .hero-quote {
  opacity: 1;
  transition-delay: 0.18s;
}