/* ────────────────────────────────────────────────────────────────────
 * LANDING INTRO OVERLAY
 * Plays a video, animates the brand logo into the hero logo position,
 * then fades out to reveal the static hero landing page underneath.
 * ────────────────────────────────────────────────────────────────────*/

/* Lock the body only WHILE the intro overlay is up. After dismiss, JS adds
   .intro-done — V2's landing page is scrollable (hero + carousel + day
   cards on one URL), so we MUST release the lock once the intro is gone.
   V1's single-screen landing stays effectively locked because there is
   simply no scrollable content below the hero. */
body.home-landing:not(.intro-done) { overflow: hidden; height: 100vh; }
body.home-landing:not(.intro-done) .hero { min-height: 100vh; height: 100vh; }

/* Hide nav on landing until the intro is dismissed */
/* Transition both opacity (for intro reveal) AND top (for hide-on-scroll). */
body.home-landing #nav { opacity: 0; pointer-events: none; transition: opacity 0.6s ease, top 0.4s cubic-bezier(0.6,0.05,0.2,1); }
body.home-landing.intro-done #nav { opacity: 1; pointer-events: auto; }

/* While the intro overlay is up, body bg is the same ink as #landing AND
   every hero element except the .hero-logo (which we need for measurement
   + the landing-logo will be docked into) is fully hidden. This way no
   hero content can peek above/below #landing on any iOS viewport quirk.
   .hero-logo stays visibility:hidden so it RESERVES layout space (so its
   position is stable for alignment) but doesn't paint. */
body.home-landing:not(.intro-done) {
  background: var(--ink);
}
body.home-landing:not(.intro-done) .hero-cinematic .hero-layer-bg,
body.home-landing:not(.intro-done) .hero-cinematic .hero-media,
body.home-landing:not(.intro-done) .hero-cinematic .hero-overlay,
body.home-landing:not(.intro-done) .hero-actions,
body.home-landing:not(.intro-done) .hero-meta-line,
body.home-landing:not(.intro-done) .hero-presenters,
body.home-landing:not(.intro-done) .hero-presenters-banner,
body.home-landing:not(.intro-done) .hero-tagline,
body.home-landing:not(.intro-done) .hero-scroll-cue {
  visibility: hidden;
}
/* CRITICAL: on phone the tagline is display:none (not visible at all in the
   landing layout). Without this rule the higher-specificity visibility:hidden
   above keeps the tagline RESERVING LAYOUT SPACE during the intro, then
   intro-done strips that space and the entire hero reflows upward — the
   hero-logo ends up ~30px HIGHER post-intro than during intro, which is why
   the grown landing-logo always landed slightly too low. Force display:none
   so the layout is identical during AND after intro on phone. */
@media (max-width: 600px) {
  body.home-landing:not(.intro-done) .hero-tagline { display: none; }
}
/* .hero-logo itself stays visibility:visible (default) — it's z-index'd
   below #landing during the intro so it can't peek anyway, and at the
   end the docked #landing-logo overlays its brand-logo-img pixel-on-pixel
   so there's nothing visually inconsistent. */

#landing {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--ink);
  overflow: hidden;
  /* Slower fade when intro dismisses (was 1.4s) so the skip feels
     less abrupt and the music tail has time to taper. */
  transition: opacity 4s ease-out, visibility 4s ease-out;
}
#landing.gone { opacity: 0; visibility: hidden; pointer-events: none; }

#landing-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
#landing-still {
  position: absolute; inset: 0;
  display: none;
}
#landing-still img {
  width: 100%; height: 100%; object-fit: cover;
}

/* Logo choreography — uses transform-only positioning so transitions interpolate
   smoothly (no jump between % and px units). JS sets --final-tx/-ty/-width to align
   exactly with the underlying hero logo. */
#landing-logo {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--start-width, clamp(420px, 65vw, 880px));
  transform: translate(-50%, -50%) translateY(-200%);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 8px 28px rgba(0,0,0,0.55));
  transition:
    transform 4.5s cubic-bezier(0.55, 0.0, 0.30, 1),
    opacity 1.8s ease,
    width 4.5s cubic-bezier(0.55, 0.0, 0.30, 1);
  will-change: transform, width, opacity;
}
#landing.logo-small #landing-logo {
  width: clamp(220px, 35vw, 440px);
  transform: translate(-50%, -50%) translateY(0);
  opacity: 1;
}
#landing.logo-final #landing-logo {
  width: var(--final-width, clamp(420px, 65vw, 880px));
  transform: translate(-50%, -50%) translate(var(--final-tx, 0px), var(--final-ty, 0px));
  opacity: 1;
}

#landing-skip {
  position: absolute;
  bottom: 1.6rem; right: 1.6rem;
  z-index: 5;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(247,236,206,0.3);
  color: rgba(247,236,206,0.92);
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.3s, color 0.3s;
}
#landing-skip:hover { background: var(--brass); color: var(--ink); border-color: var(--brass); }

#landing-sound-hint {
  /* Reset button defaults — element is now <button> for the strongest
     possible iOS Safari gesture binding, but should look exactly like
     the old div. */
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  position: absolute;
  bottom: 1.6rem; left: 1.6rem;
  z-index: 5;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(247,236,206,0.25);
  color: rgba(247,236,206,0.85);
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.55rem 0.95rem;
  border-radius: 2px;
  /* iOS Safari refuses to satisfy the autoplay gesture requirement when
     the tap target has pointer-events:none — so the hint stayed visible
     and tapping it did nothing until the user pressed Skip (a real
     <button>). Make the hint itself a valid tap target. */
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#landing.muted #landing-sound-hint { opacity: 1; }

@media (max-width: 768px) {
  /* Match the desktop 2.5s fade (this override used to clamp it to
     0.55s on phone, which made the skip cut abruptly). */
  #landing { transition: opacity 4s ease-out, visibility 4s ease-out; }
  #landing-video { object-fit: contain; }
  #landing-skip { bottom: 1rem; right: 1rem; font-size: 0.6rem; padding: 0.5rem 0.9rem; }
  /* Park the "tap for sound" hint RIGHT UNDER the video. The video has
     aspect-ratio 2:1 and is contain-fit centred, so its bottom edge sits
     at viewport-centre + ¼ viewport-width (= half its rendered height,
     which is 50vw / 2 = 25vw). Add a small gap and pin to the left. */
  #landing-sound-hint {
    bottom: auto;
    top: calc(50% + 25vw + 0.6rem);
    left: 1rem;
    font-size: 0.6rem; padding: 0.5rem 0.9rem;
  }
}

/* Presenter line on the landing hero — clean small caps, easy to read */
.hero-cinematic .hero-presenters {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(247,236,206,0.72);
  margin: 0 auto 2rem;
  padding-left: 0.32em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}