:root {
  color-scheme: dark;
  --night: #080d18;
  --night-soft: #111c31;
  --pearl: #f7f5ef;
  --silver: #cbd1d9;
  --warm: #f3e8d7;
  --ink: #2c292a;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--night); color: var(--pearl); font-family: Georgia, 'Times New Roman', serif; overflow: hidden; }
button, input { font: inherit; touch-action: manipulation; }
button { -webkit-tap-highlight-color: transparent; }
.experience { isolation: isolate; height: 100svh; height: 100dvh; min-height: 31rem; overflow: hidden; position: relative; background: radial-gradient(ellipse at 50% 44%, #192943 0%, #0d1728 35%, var(--night) 76%); }
.sky, .scene, .letter-overlay { position: absolute; inset: 0; }
.sky { overflow: hidden; pointer-events: none; z-index: -1; }
.stars { position: absolute; inset: -12%; transition: transform 1.4s var(--ease-out); }
.star { position: absolute; width: var(--size); height: var(--size); border-radius: 999px; background: #fff; box-shadow: 0 0 calc(var(--size) * 3) rgba(230, 240, 255, .85); opacity: var(--opacity); animation: twinkle var(--duration) ease-in-out infinite alternate; animation-delay: var(--delay); }
.nebula { position: absolute; inset: -20%; opacity: .25; background: radial-gradient(ellipse at 18% 53%, rgba(115, 135, 170, .3), transparent 30%), radial-gradient(ellipse at 81% 23%, rgba(90, 112, 157, .18), transparent 26%); filter: blur(20px); animation: drift 24s ease-in-out infinite alternate; }
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.5) 100%); }

.scene { display: grid; place-items: center; transition: opacity .9s var(--ease-out), transform 1.3s var(--ease-out), visibility .9s; }
.welcome-scene { z-index: 2; }
.welcome-copy { width: min(41rem, calc(100vw - 3rem)); text-align: center; opacity: 0; transform: translateY(1.3rem); }
.is-ready .welcome-copy { animation: rise-in 1.4s .5s var(--ease-out) forwards; }
.eyebrow, .letter-kicker { color: var(--silver); text-transform: uppercase; letter-spacing: .25em; font-size: .67rem; margin: 0 0 1.5rem; }
h1 { max-width: 35rem; margin: 0 auto; font-size: clamp(2.05rem, 6vw, 4.25rem); font-weight: 400; line-height: 1.08; text-wrap: balance; }
.intro-line { max-width: 34rem; margin: 2rem auto 2.6rem; color: rgba(247,245,239,.78); font-size: clamp(1rem, 2.8vw, 1.25rem); line-height: 1.55; text-wrap: pretty; opacity: 0; animation: rise-in 1.2s 1.7s var(--ease-out) forwards; }
.primary-button, .text-button, .read-again { color: var(--pearl); background: transparent; border: 1px solid rgba(247,245,239,.55); border-radius: 999px; cursor: pointer; transition: color .35s, background .35s, transform .35s, border-color .35s; }
.primary-button { padding: .95rem 1.35rem .9rem 1.5rem; font-size: 1rem; opacity: 0; animation: rise-in 1.1s 2.55s var(--ease-out) forwards; }
.primary-button span { display: inline-block; margin-left: .8rem; transition: transform .35s; }
.primary-button:hover, .primary-button:focus-visible { color: var(--night); background: var(--pearl); border-color: var(--pearl); outline: none; transform: translateY(-2px); }
.primary-button:hover span { transform: translateX(3px); }

.moon-scene { z-index: 1; visibility: hidden; opacity: 0; transform: scale(.94); }
.moon-button { position: relative; z-index: 1; width: min(52vw, 25rem); aspect-ratio: 1; padding: 0; background: none; border: 0; border-radius: 50%; cursor: pointer; transform: scale(.88); opacity: 0; transition: transform 1.35s var(--ease-out), filter .7s; }
.moon-button img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 0 13px rgba(232,239,255,.3)) drop-shadow(0 0 38px rgba(196,213,246,.18)); }
.moon-aura { position: absolute; width: min(52vw, 25rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(230,239,255,.19) 0%, rgba(210,229,255,.06) 34%, transparent 67%); filter: blur(8px); opacity: 0; transform: scale(.75); transition: opacity 1.5s, transform 1.5s var(--ease-out); }
.moon-prompt { position: absolute; top: calc(50% + min(29vw, 13.7rem)); margin: 1.1rem 0 0; color: rgba(247,245,239,.75); letter-spacing: .08em; font-size: .85rem; opacity: 0; transform: translateY(-.5rem); transition: .8s .9s var(--ease-out); }
.experience[data-stage="moon"] .welcome-scene, .experience[data-stage="constellation"] .welcome-scene { pointer-events: none; opacity: 0; transform: scale(1.04); visibility: hidden; }
.experience[data-stage="moon"] .moon-scene, .experience[data-stage="constellation"] .moon-scene { visibility: visible; opacity: 1; transform: none; }
.experience[data-stage="moon"] .moon-button, .experience[data-stage="constellation"] .moon-button { opacity: 1; transform: none; animation: moon-breathe 6s 1.4s ease-in-out infinite; }
.experience[data-stage="moon"] .moon-aura, .experience[data-stage="constellation"] .moon-aura { opacity: 1; transform: scale(1.2); }
.experience[data-stage="moon"] .moon-prompt, .experience[data-stage="constellation"] .moon-prompt { opacity: 1; transform: none; }
.moon-button:hover, .moon-button:focus-visible { filter: brightness(1.1); outline: 1px solid rgba(255,255,255,.4); outline-offset: 9px; }

.constellation { position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: 0; transition: opacity .8s .55s; }
.constellation-title { position: absolute; top: max(6vh, 2rem); left: 0; right: 0; margin: 0; text-align: center; letter-spacing: .13em; text-transform: uppercase; color: rgba(247,245,239,.8); font-size: clamp(.72rem, 2vw, .85rem); transform: translateY(-1rem); transition: transform .8s .55s var(--ease-out); }
.secret-star { position: absolute; display: inline-flex; align-items: center; gap: .55rem; min-width: 2.75rem; min-height: 2.75rem; padding: .65rem; color: var(--pearl); background: transparent; border: 0; cursor: pointer; pointer-events: auto; text-align: left; opacity: 0; transform: translateY(.7rem) scale(.8); transition: opacity .65s var(--ease-out), transform .65s var(--ease-out), color .35s; }
.secret-star span { display: block; width: .65rem; height: .65rem; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff, 0 0 30px rgba(188,212,255,.8); transition: transform .35s, box-shadow .35s, background .35s; }
.secret-star b { font-size: clamp(.75rem, 2vw, .95rem); font-weight: 400; white-space: nowrap; text-shadow: 0 1px 5px #080d18; }
.secret-star:hover span, .secret-star:focus-visible span, .secret-star.discovered span { transform: scale(1.55); background: #fff7d8; box-shadow: 0 0 16px #fff, 0 0 40px #f2e8c0; }
.secret-star:focus-visible { outline: 1px solid rgba(255,255,255,.7); outline-offset: 2px; border-radius: .5rem; }
.star-1 { top: 25%; left: 12%; transition-delay: .1s; }
.star-2 { top: 28%; right: 11%; transition-delay: .2s; }
.star-3 { bottom: 22%; left: 14%; transition-delay: .3s; }
.star-4 { bottom: 20%; right: 13%; transition-delay: .4s; }
.experience[data-stage="constellation"] .moon-button { transform: scale(1.28); animation: none; }
.experience[data-stage="constellation"] .moon-aura { transform: scale(1.8); opacity: .95; }
.experience[data-stage="constellation"] .moon-prompt { opacity: 0; }
.experience[data-stage="constellation"] .constellation { opacity: 1; }
.experience[data-stage="constellation"] .constellation-title { transform: none; }
.experience[data-stage="constellation"] .secret-star { opacity: 1; transform: none; }
.experience[data-stage="constellation"].instrumental .moon-button img { filter: brightness(1.1) drop-shadow(0 0 17px rgba(239,244,255,.5)) drop-shadow(0 0 45px rgba(201,219,255,.3)); transition: filter 1.1s var(--ease-out); }
.experience[data-stage="constellation"].instrumental .moon-aura { opacity: 1; transform: scale(1.95); transition: opacity 1.2s, transform 1.2s var(--ease-out); }
.experience[data-stage="constellation"].instrumental .secret-star { animation: secret-star-float 4.8s ease-in-out infinite alternate; }
.experience[data-stage="constellation"].instrumental .star-2 { animation-delay: -.9s; }
.experience[data-stage="constellation"].instrumental .star-3 { animation-delay: -1.8s; }
.experience[data-stage="constellation"].instrumental .star-4 { animation-delay: -2.7s; }

.secret-card { position: absolute; z-index: 4; top: 50%; left: 50%; width: min(38rem, calc(100vw - 2.4rem)); max-height: min(34rem, calc(100svh - 5rem)); max-height: min(34rem, calc(100dvh - 5rem)); padding: clamp(1.6rem, 5vw, 3.2rem); overflow-x: hidden; overflow-y: auto; color: var(--pearl); background: linear-gradient(145deg, rgba(21,34,57,.9), rgba(10,19,34,.93)); border: 1px solid rgba(226,237,255,.23); border-radius: 1.5rem; box-shadow: 0 25px 75px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; pointer-events: none; transform: translate(-50%, -45%) scale(.95); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.secret-card.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.card-glow { position: absolute; inset: -30%; z-index: -1; background: radial-gradient(circle at 22% 17%, rgba(190,214,255,.14), transparent 40%); pointer-events: none; }
.secret-index { margin: 0 0 .7rem; color: var(--silver); letter-spacing: .2em; font-size: .75rem; }
.secret-card h2 { margin: 0; font-size: clamp(1.9rem, 5vw, 2.8rem); font-weight: 400; }
.secret-copy { margin: 1.7rem 0 2rem; font-size: clamp(1.05rem, 3vw, 1.3rem); line-height: 1.65; color: rgba(247,245,239,.91); text-wrap: pretty; }
.text-button { padding: .67rem 1rem; font-size: .9rem; }
.text-button:hover, .text-button:focus-visible { background: rgba(255,255,255,.12); outline: none; transform: translateY(-1px); }

.final-unlock { position: absolute; z-index: 3; inset: 0; display: grid; align-content: center; justify-items: center; gap: 1.35rem; visibility: hidden; opacity: 0; pointer-events: none; transform: scale(.98); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), visibility .8s; }
.final-unlock.visible { visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
.final-unlock p { margin: 0; font-size: clamp(1.4rem, 4vw, 2.25rem); text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.envelope { position: relative; width: min(15rem, 55vw); aspect-ratio: 1.45; padding: 0; border: 0; background: transparent; cursor: pointer; filter: drop-shadow(0 16px 22px rgba(0,0,0,.35)); transition: transform .45s var(--ease-out); }
.envelope:hover, .envelope:focus-visible { transform: translateY(-5px) scale(1.03); outline: none; }
.envelope-back, .envelope-letter, .envelope-flap, .envelope-seal { position: absolute; display: block; }
.envelope-back { inset: 0; overflow: hidden; background: #ede9df; border-radius: .25rem; }
.envelope-back::after { content: ''; position: absolute; inset: 0; background: linear-gradient(32deg, transparent 49.5%, #d3cec4 50%, transparent 50.5%), linear-gradient(-32deg, transparent 49.5%, #d3cec4 50%, transparent 50.5%); }
.envelope-letter { z-index: 1; left: 12%; right: 12%; bottom: 8%; height: 83%; background: #fcfaf4; border-radius: .12rem; box-shadow: 0 3px 8px rgba(0,0,0,.16); transition: transform .8s var(--ease-out); }
.envelope-flap { z-index: 3; top: 0; left: 0; width: 100%; height: 62%; background: #e4dfd5; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .8s var(--ease-out); }
.envelope-seal { z-index: 4; top: 50%; left: 50%; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #c5ad9e; transform: translate(-50%, -45%); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: opacity .3s; }
.envelope.open .envelope-flap { transform: rotateX(180deg); z-index: 0; }
.envelope.open .envelope-letter { transform: translateY(-36%); }
.envelope.open .envelope-seal { opacity: 0; }

.letter-overlay { z-index: 6; display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); background: rgba(3, 8, 16, .58); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .9s var(--ease-out); }
.letter-overlay.open { opacity: 1; pointer-events: auto; }
.letter-light { position: absolute; width: min(55rem, 105vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(253,239,208,.3), transparent 62%); filter: blur(15px); animation: letter-light 4s ease-in-out infinite alternate; }
.letter { position: relative; width: min(42rem, 100%); max-height: min(43rem, calc(100svh - 2rem)); max-height: min(43rem, calc(100dvh - 2rem)); padding: clamp(1.7rem, 6vw, 4.2rem); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; color: var(--ink); background: var(--warm); border: 1px solid rgba(112,87,69,.24); box-shadow: 0 25px 80px rgba(0,0,0,.5); opacity: 0; transform: translateY(2rem) scale(.97); transition: opacity .9s .2s var(--ease-out), transform 1s .2s var(--ease-out); scrollbar-color: #b8a898 transparent; }
.letter-overlay.open .letter { opacity: 1; transform: none; }
.paper-texture { position: absolute; inset: 0; pointer-events: none; opacity: .34; background-image: repeating-linear-gradient(0deg, rgba(116,89,70,.05) 0, rgba(116,89,70,.05) 1px, transparent 1px, transparent 5px), radial-gradient(circle at 10% 5%, rgba(255,255,255,.7), transparent 27%); mix-blend-mode: multiply; }
.letter-kicker { position: relative; margin-bottom: 1.25rem; color: #73665a; }
.letter h2 { position: relative; margin: 0 0 2.3rem; font-weight: 400; font-size: clamp(2rem, 7vw, 3.55rem); line-height: 1.08; }
.letter-copy { position: relative; font-size: clamp(1.05rem, 3.3vw, 1.26rem); line-height: 1.65; }
.letter-copy p { margin: 0 0 1.5rem; }
.letter-ending { position: relative; display: flex; align-items: center; gap: .7rem; margin-top: 2.2rem; color: #746358; font-size: .9rem; letter-spacing: .05em; }
.tiny-heart { width: .7rem; height: .7rem; background: #ae8278; transform: rotate(45deg); animation: heartbeat 2s ease-in-out infinite; }
.tiny-heart::before, .tiny-heart::after { content: ''; position: absolute; width: .7rem; height: .7rem; border-radius: 50%; background: inherit; }
.tiny-heart::before { left: -.35rem; }.tiny-heart::after { top: -.35rem; }
.letter-actions { position: relative; display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 2rem; }
.read-again { margin: 0; padding: .7rem 1rem; color: #5e5046; border-color: rgba(94,80,70,.55); }
.read-again:hover, .read-again:focus-visible { background: rgba(102,82,66,.09); outline: none; }

.sound-control { position: fixed; z-index: 10; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); display: flex; flex-direction: row-reverse; align-items: center; gap: .65rem; }
.icon-button { display: grid; place-items: center; width: 2.65rem; height: 2.65rem; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(9,15,27,.35); color: var(--pearl); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .3s, border-color .3s, opacity .3s; }
.icon-button:hover:not(:disabled), .icon-button:focus-visible { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.7); outline: none; }
.icon-button:disabled { cursor: not-allowed; opacity: .45; }
.sound-icon { position: relative; display: block; width: .8rem; height: 1rem; border: solid currentColor; border-width: .32rem .45rem .32rem 0; }
.sound-icon::before { content: ''; position: absolute; left: -.62rem; top: .22rem; width: .55rem; height: .55rem; background: currentColor; clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 70%); }
.icon-button.playing .sound-icon::after { content: ''; position: absolute; left: .4rem; top: -.32rem; width: .75rem; height: 1.25rem; border: 1px solid currentColor; border-left: 0; border-top-color: transparent; border-bottom-color: transparent; border-radius: 0 100% 100% 0; }
.sound-popover { width: min(16rem, calc(100vw - 5.2rem)); padding: .75rem .85rem; color: var(--pearl); background: rgba(10,17,30,.82); border: 1px solid rgba(255,255,255,.14); border-radius: .75rem; box-shadow: 0 10px 25px rgba(0,0,0,.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transform: translateX(.4rem); transition: .25s; }
.sound-control:hover .sound-popover, .sound-control:focus-within .sound-popover { opacity: 1; visibility: visible; transform: none; }
.sound-popover p { margin: 0 0 .6rem; color: rgba(247,245,239,.82); font: .72rem/1.35 system-ui, sans-serif; }
.sound-popover label { display: block; margin-bottom: .25rem; font: .68rem system-ui, sans-serif; text-transform: uppercase; letter-spacing: .1em; color: rgba(247,245,239,.7); }
#volume { width: 100%; accent-color: #f3eee1; }

@keyframes twinkle { 0% { transform: scale(.55); opacity: calc(var(--opacity) * .28); } 100% { transform: scale(1.2); opacity: var(--opacity); } }
@keyframes drift { to { transform: translate3d(5%, -3%, 0) scale(1.05); } }
@keyframes rise-in { to { opacity: 1; transform: none; } }
@keyframes moon-breathe { 50% { transform: scale(1.025); } }
@keyframes secret-star-float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -.32rem, 0); } }
@keyframes letter-light { to { transform: scale(1.08); opacity: .8; } }
@keyframes heartbeat { 50% { transform: rotate(45deg) scale(1.18); } }

@media (max-width: 38rem) {
  .experience { min-height: 31rem; }
  .welcome-copy { width: min(27rem, calc(100vw - 2rem)); }
  .moon-button, .moon-aura { width: min(72vw, 21rem); }
  .moon-prompt { top: calc(50% + min(39vw, 11rem)); }
  .constellation-title { top: max(10vh, 3.4rem); }
  .star-1 { top: 26%; left: 2%; }.star-2 { top: 27%; right: 2%; }.star-3 { bottom: 20%; left: 3%; }.star-4 { bottom: 19%; right: 2%; }
  .secret-star { gap: .35rem; padding: .55rem .4rem; }.secret-star b { font-size: .72rem; }
  .secret-card { width: min(34rem, calc(100vw - 1.5rem)); max-height: calc(100svh - 2rem); max-height: calc(100dvh - 2rem); border-radius: 1.15rem; }
  .letter { max-height: calc(100svh - 1.5rem); max-height: calc(100dvh - 1.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}