* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #b9b0a1; color: white; }
main { position: relative; width: 100%; height: 100svh; overflow: hidden; isolation: isolate; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.scene.visible { opacity: 1; }
#home { z-index: 0; }
#transition { z-index: 1; mask-image: url('assets/reveal-atlas.png'); mask-size: 2400% 100%; mask-position: 0 0; mask-repeat: no-repeat; }
#transition.visible { animation: scene-reveal 700ms steps(23) both; }
#transition.revealed { mask: none; animation: none; }
@keyframes scene-reveal { to { mask-position: 100% 0; } }
#next { z-index: 2; transition: opacity 1600ms cubic-bezier(.4, 0, .2, 1); }
main::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 53% 48%, #ede5d6 0%, #d6cbb9 55%, #a6a69f 100%); }
main.cloud-passage::after { animation: cloud-passage 1600ms ease-in-out both; }
@keyframes cloud-passage { 0%, 100% { opacity: 0; } 42% { opacity: .65; } }
.entry-smoke { position: absolute; z-index: 4; inset: 0; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 900ms ease; }
.entry-smoke i { position: absolute; left: -30%; top: 12%; width: 95%; height: 85%; opacity: 0; background: url('assets/smoke.png') center / 100% 100% no-repeat; --turn: -14deg; --strength: .85; }
.entry-smoke i:nth-child(2) { left: -5%; top: -25%; width: 85%; height: 95%; --turn: 28deg; --strength: .6; }
.entry-smoke i:nth-child(3) { left: 10%; top: 35%; width: 80%; height: 75%; --turn: -35deg; --strength: .7; }
.entry-smoke.covering { visibility: visible; opacity: 1; }
.entry-smoke.covering i { animation: smoke-drift 2600ms cubic-bezier(.22, .45, .45, .9) both; }
.entry-smoke.covering i:nth-child(2) { animation-delay: 120ms; animation-duration: 2800ms; }
.entry-smoke.covering i:nth-child(3) { animation-delay: 240ms; animation-duration: 2500ms; }
.entry-smoke.clearing { opacity: 0; }
@keyframes smoke-drift {
  0% { opacity: 0; transform: translate3d(-35%, 12%, 0) rotate(var(--turn)) scale(.8); }
  26% { opacity: var(--strength); }
  55% { opacity: var(--strength); }
  100% { opacity: 0; transform: translate3d(70%, -24%, 0) rotate(calc(var(--turn) + 22deg)) scale(1.5); }
}
.hero-copy { position: absolute; inset: 0; z-index: 3; opacity: 0; transform: translateY(16px); filter: blur(5px); transition: opacity 1200ms ease, transform 1500ms ease, filter 1200ms ease; pointer-events: none; }
body[data-scene="home"] .hero-copy { opacity: 1; transform: translateY(0); filter: blur(0); }
body[data-scene="leaving"] .hero-copy { transition-duration: 700ms; transform: translateY(-12px); }
h1 { position: absolute; top: 15%; left: 50%; height: 64%; margin: 0; transform: translateX(-50%); }
h1 img { width: auto; height: 100%; display: block; }
.signature { position: absolute; top: 65%; right: 50%; margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(22px, 3.75vh, 46px); line-height: 1.28; letter-spacing: .045em; text-align: right; white-space: nowrap; text-shadow: 0 1px 16px #5f4a3630; }
.scroll-cue { position: absolute; z-index: 4; bottom: 24px; left: 50%; transform: translateX(-50%); border: 0; background: transparent; color: white; padding: 12px 24px; opacity: 0; visibility: hidden; transition: opacity 900ms ease, visibility 900ms; cursor: pointer; }
.scroll-cue span { font: 10px/1.5 sans-serif; letter-spacing: .3em; }
.scroll-cue i { display: block; margin: 10px auto 0; width: 6px; height: 6px; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(45deg); }
body[data-scene="home"] .scroll-cue { opacity: .8; visibility: visible; transition-delay: 800ms; }
.play-prompt { position: absolute; z-index: 5; left: 50%; top: 85%; transform: translateX(-50%); padding: 12px 24px; color: white; background: #302a2470; border: 1px solid #ffffff70; border-radius: 24px; cursor: pointer; }
button:focus-visible { outline: 2px solid white; outline-offset: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
@media (max-aspect-ratio: 3/4) {
  h1 { top: 19%; height: 54%; left: 56%; }
  .signature { top: 62%; right: 49%; font-size: clamp(17px, 4.5vw, 25px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy, #next, #transition, .scroll-cue { transition-duration: 100ms; transform: none; filter: none; }
  .scroll-cue { transform: translateX(-50%); }
  main.cloud-passage::after { animation: none; }
  .entry-smoke { transition-duration: 150ms; }
  .entry-smoke.covering i { animation: none; opacity: .3; }
}

.second-copy { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity 900ms ease, transform 1200ms ease; }
body[data-scene="next"] .second-copy { opacity: 1; transform: none; }
.second-title { position: absolute; top: 9%; left: 4%; height: 34%; width: auto; }
.second-signature { position: absolute; right: 5.5%; bottom: 5.5%; margin: 0; font: clamp(22px, 2.3vw, 44px)/1.3 Georgia, 'Times New Roman', serif; letter-spacing: .025em; text-shadow: 0 2px 12px #0006; }
.return-home { position: absolute; z-index: 4; left: 4.5%; bottom: 5.5%; padding: 12px 0; border: 0; background: transparent; color: #fff; font: 12px/1.5 sans-serif; letter-spacing: .16em; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 500ms; }
body[data-scene="next"] .return-home { opacity: .8; visibility: visible; }
body[data-scene="returning"] .second-copy { transition-duration: 400ms; }
@media (max-aspect-ratio: 3/4) {
  .second-title { left: 6%; top: 9%; height: 29%; }
  .second-signature { right: 6%; bottom: 12%; font-size: clamp(18px, 5vw, 25px); }
  .return-home { left: 6%; bottom: 4%; }
}
@media (prefers-reduced-motion: reduce) {
  .second-copy { transform: none; transition-duration: 100ms; }
}