:root { --gold: #f3d27a; --gold-deep: #c9a24a; --white: #fffaf0; --blue: #9fd3ff; --ink: #050812; }
* { box-sizing: border-box; }
html { scroll-snap-type: y mandatory; scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--white); font-family: "Cormorant Garamond", Georgia, serif; overflow-x: clip; }
.track { position: relative; z-index: 0; }
.snap { height: 100vh; height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; }

#stage { position: fixed; inset: 0; overflow: hidden; z-index: 1; background: var(--ink); }
.layer { position: absolute; inset: 0; will-change: transform, opacity; }

/* ---------- scene 0: island ---------- */
.sky-bg { background: #bfe3ff url("../img/clouds-distant.jpg") center / cover no-repeat; transform-origin: 50% 40%; }
.island { background: url("../img/island.png") center bottom / cover no-repeat; }
.hero-veil { background: radial-gradient(ellipse at 50% 30%, rgba(255, 246, 214, 0.35), transparent 60%); pointer-events: none; }

.hero-tile { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, 86vw); padding: clamp(28px, 5vw, 56px) clamp(22px, 5vw, 60px); text-align: center;
  background: linear-gradient(160deg, rgba(24, 34, 80, 0.42), rgba(60, 50, 30, 0.28)); border: 1px solid rgba(243, 210, 122, 0.85); outline: 1px solid rgba(243, 210, 122, 0.35); outline-offset: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 30px 80px rgba(20, 40, 90, 0.25), 0 0 60px rgba(243, 210, 122, 0.25); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); z-index: 3; }
.hero-tile::before, .hero-tile::after { content: ""; position: absolute; left: 14px; right: 14px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.hero-tile::before { top: 14px; } .hero-tile::after { bottom: 14px; }
.hero-tile .corner { position: absolute; color: var(--gold); font-size: 18px; line-height: 1; text-shadow: 0 0 12px rgba(243, 210, 122, 0.9); }
.c1 { left: 6px; top: 4px; } .c2 { right: 6px; top: 4px; } .c3 { left: 6px; bottom: 4px; } .c4 { right: 6px; bottom: 4px; }
.hero-tile .eyebrow { margin: 0 0 14px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); font-family: Cinzel, serif; font-size: clamp(11px, 1.3vw, 14px); letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold); }
.hero-tile h1 { margin: 0; font-family: "Cinzel Decorative", Cinzel, serif; font-weight: 400; font-size: clamp(26px, 4.6vw, 54px); line-height: 1.18; color: #fff; text-shadow: 0 0 22px rgba(255, 236, 180, 0.95), 0 2px 10px rgba(20, 20, 50, 0.9), 0 1px 0 rgba(201, 162, 74, 0.8); }
.descend { margin: 28px auto 0; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); display: inline-flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; color: var(--gold); font: 500 13px/1 Cinzel, serif; letter-spacing: 0.3em; text-transform: uppercase; cursor: pointer; }
.descend i { width: 14px; height: 14px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: rotate(45deg); animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.6; } 50% { transform: translateY(8px) rotate(45deg); opacity: 1; } }

/* ---------- scenes 1–3: between the clouds ---------- */
.heaven { background: radial-gradient(ellipse at 50% 50%, #0a1026 0%, #050812 60%, #02030a 100%); opacity: 0; }
.clouds { position: absolute; left: -90vw; right: -90vw; height: 70vh; pointer-events: none; filter: brightness(1); }
.clouds--upper { top: -9vh; } .clouds--lower { bottom: -9vh; }
.clouds__img { position: absolute; inset: 0; background: url("../img/clouds-upper.png") left center / auto 100% repeat-x; animation: billow 26s ease-in-out infinite alternate; }
.clouds--lower .clouds__img { background-image: url("../img/clouds-lower.png"); animation-duration: 31s; }
.clouds__img--b { opacity: 0.55; background-position: 37% center; animation-duration: 38s; animation-direction: alternate-reverse; transform-origin: 30% 50%; }
@keyframes billow { from { transform: scale(1.02) translate(-1.5%, 0); } to { transform: scale(1.09) translate(1.5%, -2%); } }
.moon { position: absolute; left: 50%; top: 42%; width: min(27vh, 27vw); transform: translate(-50%, -50%); filter: drop-shadow(0 0 40px rgba(255, 250, 230, 0.7)); }
.wheel-wrap { position: absolute; inset: 0; } #fx { position: absolute; inset: 0; width: 100%; height: 100%; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.earth { position: absolute; left: 50%; top: 50%; width: min(62vh, 62vw); transform: translate(-50%, -50%); filter: drop-shadow(0 0 60px rgba(120, 180, 255, 0.55)); opacity: 0; }
.earth-glow { position: absolute; left: 50%; top: 50%; width: min(90vh, 90vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(140, 190, 255, 0.35), rgba(80, 120, 255, 0.12) 40%, transparent 68%); opacity: 0; }
.figure { position: absolute; left: 50%; top: 50%; height: 42vh; transform: translate(-50%, -50%); filter: drop-shadow(0 0 30px rgba(255, 250, 230, 0.55)); opacity: 0; }
.orb { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; background: radial-gradient(circle, #fff 0 30%, rgba(255, 245, 200, 0.9) 45%, rgba(255, 220, 140, 0.4) 65%, transparent 72%); box-shadow: 0 0 60px 20px rgba(255, 240, 190, 0.55); }

/* ---------- messages ---------- */
.msg { position: absolute; left: 50%; top: 50%; width: min(820px, 88vw); transform: translate(-50%, -50%); z-index: 3; text-align: center; opacity: 0; pointer-events: none; }
.msg p { margin: 0 0 0.6em; font-size: clamp(18px, 2.5vw, 34px); line-height: 1.35; font-weight: 400; color: #fff; text-shadow: 0 0 18px rgba(255, 240, 200, 0.85), 0 0 2px #fff; }
.msg p.indent { padding-left: 22%; text-align: left; }
.msg-1 { top: auto; bottom: 21vh; transform: translate(-50%, 0); width: min(980px, 92vw); }
.msg-1 p { font-size: clamp(16px, 2vw, 26px); margin-bottom: 0.45em; }
.msg-2, .msg-3 { top: auto; bottom: 10vh; transform: none; text-align: left; left: 7vw; width: min(640px, 70vw); }
.msg-2 p, .msg-3 p { text-shadow: 0 0 18px rgba(0, 0, 0, 0.9), 0 0 24px rgba(255, 240, 200, 0.6); }

.progress { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 4; }
.progress i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0.55; transition: 0.4s; }
.progress i.on { background: var(--gold); box-shadow: 0 0 10px var(--gold); opacity: 1; transform: scale(1.3); }
.vignette { position: absolute; inset: 0; pointer-events: none; z-index: 5; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.35) 100%); }

@media (max-width: 720px) { .msg p.indent { padding-left: 8%; } .msg-2, .msg-3 { left: 6vw; width: 88vw; bottom: 8vh; } .figure { height: 28vh; } }
@media (prefers-reduced-motion: reduce) { .clouds__img { animation: none; } .descend i { animation: none; } }