@font-face { font-family: LightSerif; src: url('assets/fonts/Fraunces72pt-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: LightHand; src: url('assets/fonts/Caveat-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: LightSerif; src: url('assets/fonts/Fraunces72pt-Italic.ttf') format('truetype'); font-style: italic; font-display: swap; }
:root { color-scheme: dark; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #12242c; color: #f7e9ce; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; }
body { -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:disabled { cursor: default; }
button:focus-visible { outline: 2px solid #ffe3a4; outline-offset: 4px; }
[hidden] { display: none !important; }
p, h1, h2 { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.experience { --intro: 1; --enter: 0; position: relative; isolation: isolate; width: 100%; max-width: 560px; height: 100vh; height: 100svh; min-height: 360px; margin: 0 auto; overflow: hidden; background: #203b50; box-shadow: 0 0 150px #0006; }
canvas[data-scene] { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
canvas[data-ready=true] { opacity: 1; }
.scene-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #10212e80, transparent 28%, transparent 72%, #11202c90), radial-gradient(ellipse at 50% 48%, transparent 40%, #08171e28); opacity: calc(.18 + var(--intro)*.82); }
.invitation { position: absolute; z-index: 2; top: calc(41px + env(safe-area-inset-top)); left: 20px; right: 20px; text-align: center; opacity: var(--intro); transform: translateY(calc((1 - var(--intro))*-12px)); pointer-events: none; text-shadow: 0 2px 18px #10232e; }
.eyebrow { font-size: 8px; letter-spacing: .27em; color: #e4d7bb; margin-bottom: 15px; }
.invitation h1 { font: 400 clamp(31px, 9vw, 45px)/1.08 LightSerif, Georgia, serif; letter-spacing: -.045em; }
.invitation em { color: #e7c796; font-weight: 400; }
.fine-rule { display: block; height: 1px; width: 29px; margin: 17px auto 0; background: #e7cd9b66; }
.door-trigger { position: absolute; z-index: 3; top: 26%; left: 23%; width: 54%; height: 46%; border-radius: 50% 50% 0 0 / 26% 26% 0 0; background: transparent; border: 0; }
.door-trigger:focus-visible { outline-offset: -6px; box-shadow: 0 0 20px #e5c69144; }
.prompt { position: absolute; z-index: 4; bottom: calc(87px + env(safe-area-inset-bottom)); left: 20px; right: 20px; text-align: center; pointer-events: none; text-shadow: 0 2px 10px #071820; transition: opacity .4s; }
.prompt p { max-width: 300px; margin: 0 auto; font-size: 11px; line-height: 1.7; color: #efe1c5; }
.breathing-ring { display: block; width: 14px; height: 14px; border: 1px solid #dec698; border-radius: 50%; margin: 0 auto 12px; animation: breathing 3.2s ease-in-out infinite; }
.controls { position: absolute; z-index: 7; left: 17px; right: 17px; bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.controls button { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; border: 1px solid #f2e2c52b; border-radius: 24px; background: #14252e55; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 10px; line-height: 1.5; letter-spacing: .01em; }
.controls button:active { background: #ad805d66; }
.controls button:disabled { opacity: .45; }
.controls svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.controls [data-skip], .controls [data-replay] { margin-left: auto; }
.sound-waves { display: none; }
.sound-control[aria-pressed=true] .sound-waves { display: block; }
.sound-control[aria-pressed=true] .sound-slash { display: none; }
.demo-caption { position: absolute; z-index: 3; top: calc(22px + env(safe-area-inset-top)); right: 20px; font-size: 8px; letter-spacing: .07em; color: #f4e5c0a0; opacity: 0; transition: opacity .5s; }
.final-copy { position: absolute; z-index: 3; left: 26px; right: 26px; bottom: calc(88px + env(safe-area-inset-bottom)); text-align: center; color: #f6e7cb; text-shadow: 0 2px 12px #2d1d0a; font-size: 11px; line-height: 1.8; pointer-events: none; }
/* Keep the signature beneath the paper, even with full-length personal names.
   Ellipsis changes only the visual line; the complete text stays accessible. */
.final-copy > p { white-space: nowrap; }
.final-copy > p > [data-to] { display: inline-block; max-width: calc(100% - 2.7em); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.final-copy > p > br { display: none; }
.final-copy em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: italic 15px/1.6 LightSerif, Georgia, serif; }
.unavailable { display: none; position: absolute; z-index: 5; inset: 0; align-items: center; justify-content: center; flex-direction: column; gap: 20px; padding: 45px 35px 90px; background: #302a23; }
.unavailable img { width: min(78%, 300px); max-height: 70%; object-fit: contain; border-radius: 2px; box-shadow: 0 12px 40px #0006; }
.unavailable p { text-align: center; font-size: 12px; line-height: 1.8; }
body[data-state=playing] .prompt { opacity: 0; }
body[data-state=playing][data-playback=paused] .prompt { opacity: 1; }
body[data-state=revealed] .prompt, body[data-state=revealed] .invitation { display: none; }
body[data-state=error] .unavailable { display: flex; }
body[data-state=error] .prompt, body[data-state=error] .invitation, body[data-state=error] .door-trigger { display: none; }
body[data-state=playing][data-chapter=memories] .demo-caption { opacity: 1; }
body[data-state=loading] .breathing-ring { animation-duration: 1s; }
body[data-state=revealed] .controls button { background: #30201670; }
@keyframes breathing { 0%, 100% { transform: scale(.8); opacity: .4; } 50% { transform: scale(1.1); opacity: .9; } }
@media (max-height: 700px) and (orientation: portrait) {
  .invitation { top: calc(23px + env(safe-area-inset-top)); }
  .invitation h1 { font-size: 30px; }
  .eyebrow { font-size: 7px; margin-bottom: 10px; }
  .fine-rule { margin-top: 12px; }
  .prompt { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .controls { bottom: calc(10px + env(safe-area-inset-bottom)); }
  .final-copy { bottom: calc(72px + env(safe-area-inset-bottom)); font-size: 10px; }
  .final-copy em { font-size: 13px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .experience { max-width: none; min-height: 320px; }
  .invitation { top: 22%; left: 4%; right: 72%; text-align: left; }
  .invitation h1 { font-size: 27px; }
  .eyebrow { font-size: 7px; line-height: 1.7; }
  .fine-rule { margin-left: 0; }
  .prompt { left: 73%; right: 3%; bottom: 36%; text-align: left; }
  .breathing-ring { margin-left: 0; }
  .door-trigger { left: 38%; width: 24%; }
  .final-copy { left: 74%; right: 3%; bottom: 40%; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }