/* Scroll depth moves scenery while the reading and control layers stay in flow. */
.hero { --depth-x: 0px; --depth-y: 0px; --depth-scroll: 0px; }
.hero__landscape {
  position: absolute;
  z-index: -1;
  inset: 0;
  mask-image: linear-gradient(#000 57%, #000a 78%, transparent 100%);
  pointer-events: none;
}
.hero__depth-back { position: absolute; z-index: -3; inset: -24px; overflow: hidden; transform: translate3d(calc(var(--depth-x) * -1), calc(var(--depth-y) * -1 + var(--depth-scroll)), 0) scale(1.035); }
.hero__depth-back .hero__image { filter: saturate(.84) contrast(1.04) brightness(.65) blur(.55px); animation-play-state: paused; }
.hero.is-depth-active .hero__depth-back .hero__image { filter: saturate(.84) contrast(1.04) brightness(.65) blur(.55px); animation-play-state: running; }
.hero__copy { position: relative; transform: translate3d(calc(var(--depth-x) * .32), calc(var(--depth-y) * .25), 0); }
.hero__depth-mist { position: absolute; z-index: -1; inset: 15% -10% -12%; pointer-events: none; opacity: .46; background: radial-gradient(ellipse at 78% 92%, #e5dec21f, transparent 54%), radial-gradient(ellipse at 5% 70%, #060805a6, transparent 45%); filter: blur(16px); transform: translate3d(calc(var(--depth-x) * 1.5), calc(var(--depth-y) * 1.1 + var(--depth-scroll) * .43), 0); }
.hero.is-depth-active .hero__depth-back, .hero.is-depth-active .hero__copy, .hero.is-depth-active .hero__depth-mist { will-change: transform; }
.hero__arrival {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.hero__arrival::before,
.hero__arrival::after {
  position: absolute;
  top: 43%;
  left: 50%;
  width: min(81vw, 840px);
  aspect-ratio: 2.65;
  border: 1px solid #eadfc3a6;
  border-radius: 50%;
  box-shadow: 0 0 12px #d1d8c64a, inset 0 0 10px #c9d3c12b;
  content: '';
}

@media (prefers-reduced-motion: no-preference) {
  .hero.is-arriving .hero__arrival { animation: hero-arrival-veil 1.18s ease-out both; }
  .hero.is-arriving .hero__arrival::before { animation: hero-arrival-ring 1.16s cubic-bezier(.15, .53, .36, 1) both; }
  .hero.is-arriving .hero__arrival::after { animation: hero-arrival-ring .94s .13s cubic-bezier(.15, .53, .36, 1) both; }
  .hero.is-arriving .hero__depth-back { animation: hero-arrival-landscape 1.06s var(--ease) both; }
  .hero.is-arriving .hero-intro { animation: hero-arrival-copy .68s .26s var(--ease) both; }

  .hero.is-arriving.is-ink-synced .hero__depth-back {
    animation: none;
    scale: calc(1.05 - var(--entry-ink, 0) * .05);
    opacity: calc(.63 + var(--entry-ink, 0) * .37);
  }

  .hero.is-arriving.is-ink-synced .hero-intro {
    --credit-reveal: clamp(0, calc((var(--entry-title, 0) - .52) * 2.1), 1);
    animation: none;
    opacity: var(--credit-reveal);
    translate: 0 calc((1 - var(--credit-reveal)) * 12px);
  }
}

@keyframes hero-arrival-veil {
  0%, 100% { opacity: 0; }
  29%, 54% { opacity: .72; }
}

@keyframes hero-arrival-ring {
  from { transform: translate(-50%, -50%) scale(.09); opacity: .82; }
  to { transform: translate(-50%, -50%) scale(1.44); opacity: 0; }
}

@keyframes hero-arrival-landscape {
  from { scale: 1.065; opacity: .53; }
  to { scale: 1; opacity: 1; }
}

@keyframes hero-arrival-copy {
  from { translate: 0 14px; opacity: 0; }
  to { translate: 0 0; opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (mask-image: linear-gradient(#000, transparent)) {
    body:not(.motion-reduced) .hero.is-arriving .hero__title-art {
      mask-image: linear-gradient(100deg, #000 43%, #000d 47%, #0005 51%, transparent 56%);
      mask-size: 265% 100%;
      mask-repeat: no-repeat;
      animation: hero-title-ink-reveal 1.02s .08s cubic-bezier(.36, .05, .35, 1) both;
    }

    body:not(.motion-reduced) .hero.is-arriving .hero__title-art::before {
      position: absolute;
      z-index: 1;
      inset: 0;
      content: '';
      pointer-events: none;
      background-image: linear-gradient(103deg, transparent 43%, #fff0be70 48%, #fff8dfda 50%, #e4b95c64 53%, transparent 59%);
      background-size: 265% 100%;
      background-repeat: no-repeat;
      mask: url('./assets/handwritten-title.png') center / 100% 100% no-repeat luminance;
      animation: hero-title-gold-pass .84s .29s ease-out both;
    }

    body:not(.motion-reduced) .hero.is-arriving.is-ink-synced .hero__title-art {
      animation: none;
      mask-position: calc((1 - var(--entry-title, 0)) * 100%) center;
    }

    body:not(.motion-reduced) .hero.is-arriving.is-ink-synced .hero__title-art::before {
      animation: none;
      background-position: calc((1 - max(0, var(--entry-title, 0) - .12)) * 100%) center;
      opacity: clamp(0, min(calc((var(--entry-title, 0) - .13) * 3), calc((.98 - var(--entry-title, 0)) * 3)), .72);
    }
  }
}

@keyframes hero-title-ink-reveal {
  from { mask-position: 100% center; }
  to { mask-position: 0% center; }
}

@keyframes hero-title-gold-pass {
  0% { background-position: 100% center; opacity: 0; }
  27%, 55% { opacity: .7; }
  100% { background-position: 0% center; opacity: 0; }
}

.page-water { position: fixed; z-index: 41; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; contain: strict; }
body.has-water .page-water { opacity: 1; }
.water-overlay, .water-artwork { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.water-overlay { opacity: .8; }
.hero__depth-back > .water-artwork { z-index: 0; filter: saturate(.84) contrast(1.04) brightness(.65) blur(.3px); }
.stage__shell > .water-artwork { z-index: -4; filter: saturate(.75) brightness(.46) contrast(1.05); }
@media (prefers-reduced-motion: no-preference) {
  body:not(.motion-reduced) .stage__shell > :is(.stage__image, .water-artwork) {
    transform: translate3d(0, var(--stage-scroll, 0px), 0) scale(1.16);
  }
}
.water-rendering > .hero__image, .water-rendering > .stage__image { opacity: 0; }
body.motion-reduced .page-water, body.gate-open .page-water, body.modal-open .page-water { display: none; }
body.motion-reduced .hero__depth-back { transform: scale(1.035); }
body.motion-reduced .hero__copy, body.motion-reduced .hero__depth-mist { transform: none; }
@media (max-width: 739px) { .hero__depth-back .hero__image, .hero.is-depth-active .hero__depth-back .hero__image { filter: saturate(.84) contrast(1.04) brightness(.65); } .hero__depth-mist { opacity: .3; } .water-overlay { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .page-water { display: none; } .hero__depth-back { transform: scale(1.035); } .hero__copy, .hero__depth-mist { transform: none; } .hero.is-depth-active .hero__depth-back .hero__image { filter: saturate(.84) contrast(1.04) brightness(.65); } }