:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background:#000; }
* { box-sizing: border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:#000; }
body { overscroll-behavior:none; }
button { -webkit-tap-highlight-color:transparent; font:inherit; cursor:pointer; }
button:focus-visible { outline:1px solid #ffc6f1; outline-offset:8px; }
[hidden] { display:none!important; }
#experience { position:relative; width:100%; height:100%; min-height:100dvh; overflow:hidden; background:#000; }
#universe { position:absolute; inset:0; width:100%; height:100%; touch-action:none; }
#experience[data-stage="galaxy"] #universe { cursor:grab; }
#experience[data-stage="galaxy"] #universe:active { cursor:grabbing; }
#bouquetScene { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; padding-bottom:4vh; opacity:1; transition:opacity 1.15s ease, transform 1.45s cubic-bezier(.2,.7,.2,1); }
#bouquet { position:relative; display:block; width:min(83vw,345px,59vh); aspect-ratio:4/5; border:0; background:none; padding:0; transform-origin:50% 68%; animation:appear 1.5s ease both, bouquetBreathe 5s ease-in-out 1.5s infinite; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
#bouquet.is-holding { animation-play-state:paused; }
.bouquet-image { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none; }
.bouquet-caption { display:flex; align-items:center; justify-content:center; gap:7px; min-height:16px; font-size:10px; margin:13px 0 0; color:#ddd4dd; font-weight:400; text-align:center; }
.hold-indicator { display:none; width:15px; height:15px; flex:none; border-radius:50%; background:conic-gradient(from -90deg,#ffc8e1 calc(var(--hold-progress,0) * 1turn),#ffffff2e 0); mask-image:radial-gradient(circle,transparent 49%,#000 54%); }
[data-stage="photos"] .hold-indicator,[data-stage="entering"] .hold-indicator { display:block; }
.bouquet-photos { position:absolute; inset:0; pointer-events:none; }
/* The transparent centre leaves portraits visible; real leaves, filler flowers and
   folded paper occlude their outer corners instead of an artificial polygon. */
.bouquet-foreground { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; z-index:20; pointer-events:none; user-select:none; }
.bloom { position:absolute; width:24%; height:23%; transform:rotate(var(--turn)); }
.bloom-layer { position:absolute; inset:0; }
.flower-face,.photo-face { position:absolute; inset:0; }
.flower-face { display:grid; place-items:center; opacity:1; }
.flower-face img { width:130%; max-width:none; aspect-ratio:1; object-fit:contain; pointer-events:none; transform:rotate(var(--petal-turn)); filter:var(--flower-tint,none); }
.photo-face { padding:2px 2px 5px; background:#f8f6f0; box-shadow:0 2px 5px #0008; opacity:0; transition:opacity .8s cubic-bezier(.22,.61,.36,1) calc(var(--delay) + .65s); }
.photo-window { display:block; position:relative; width:100%; height:100%; overflow:hidden; }
.photo-window img { position:absolute; display:block; width:100%; height:100%; object-fit:cover; }
.photo-window[data-atlas="true"] img { width:300%; height:200%; object-fit:fill; max-width:none; left:var(--atlas-left); top:var(--atlas-top); }
.bloom:nth-child(1) { left:14%; top:12%; --turn:-11deg; --petal-turn:-19deg; --delay:0s; z-index:2; }
.bloom:nth-child(2) { left:37%; top:6%; --turn:-3deg; --petal-turn:13deg; --delay:.25s; z-index:3; }
.bloom:nth-child(3) { left:59%; top:9%; --turn:3deg; --petal-turn:34deg; --delay:.5s; z-index:1; }
.bloom:nth-child(4) { left:18%; top:24%; --turn:-5deg; --petal-turn:-39deg; --delay:.75s; z-index:4; }
.bloom:nth-child(5) { left:39%; top:28%; --turn:-2deg; --petal-turn:27deg; --delay:1s; z-index:5; --flower-tint:saturate(.85) brightness(1.05); }
.bloom:nth-child(6) { left:62%; top:25%; --turn:7deg; --petal-turn:55deg; --delay:1.25s; z-index:6; --flower-tint:saturate(.65) sepia(.14) brightness(1.12); }
[data-stage="photos"] .flower-face,[data-stage="entering"] .flower-face { animation:flowerBlinkOut .95s ease-in-out var(--delay) both; }
[data-stage="photos"] .photo-face,[data-stage="entering"] .photo-face { opacity:1; }
[data-stage="entering"] #bouquetScene { opacity:0; transform:scale(1.22); pointer-events:none; }
[data-stage="galaxy"] #bouquetScene { visibility:hidden; pointer-events:none; opacity:0; }
.tiny-button { position:absolute; z-index:4; width:35px; height:35px; padding:7px; color:#fff; border:0; background:transparent; }
.letter-shortcut { top:max(18px,env(safe-area-inset-top)); right:18px; transform:rotate(-4deg); }
.mini-envelope { display:block; position:relative; width:27px; height:18px; background:#f9eaf1; box-shadow:0 0 7px #ffc5f569; }
.mini-envelope::before { content:""; position:absolute; inset:0; background:linear-gradient(33deg,transparent 49%,#c59dab 50%,transparent 52%),linear-gradient(-33deg,transparent 49%,#c59dab 50%,transparent 52%); }
.mini-envelope::after { content:"♥"; position:absolute; inset:0; display:grid; place-items:center; color:#c35880; font-size:8px; }
.sound-control { top:77px; right:18px; }
.music-hint { position:absolute; right:calc(100% + 5px); top:50%; transform:translateY(-50%); padding:7px 10px; border:1px solid #f6d6e538; border-radius:5px; background:#170e17db; color:#f8e5ee; white-space:nowrap; font:11px/1.4 Arial,sans-serif; }
.sound-control svg { fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5; width:20px; height:20px; }
.mute-slash { width:23px; height:1px; background:#fff; position:absolute; top:16px; left:6px; transform:rotate(-48deg); }
[aria-pressed="true"] .mute-slash { display:none; }
dialog { position:fixed; inset:0; margin:0; max-width:none; max-height:none; width:100%; height:100dvh; border:0; padding:0; background:transparent; overflow:hidden; color:#745a60; }
dialog::backdrop { background:rgba(0,0,0,.3); }
.letter-shade { position:absolute; inset:0; background:radial-gradient(ellipse at 40% 105%,#4b33485c,transparent 54%),linear-gradient(#0003,#100c1238); }
.letter-shade::after { content:""; position:absolute; bottom:-14%; left:-20%; width:140%; height:45%; background:repeating-linear-gradient(100deg,transparent 0 8%,#9e688224 10%,transparent 13% 22%); filter:blur(15px); transform:skewY(-5deg); }
.close-letter { position:absolute; top:max(18px,env(safe-area-inset-top)); right:18px; z-index:10; width:32px; height:32px; display:grid; place-items:center; border:1px solid #e2cfdf9c; border-radius:50%; background:#211a2699; color:#f3e8f4; font:23px/1 Arial; padding:0 0 2px; }
.mail-stage { position:absolute; inset:0; display:grid; place-items:center; perspective:1400px; }
.mail-assembly { position:relative; width:min(84vw,460px,60.6dvh); aspect-ratio:.82; perspective:1400px; transform:translateY(-1.5dvh); }
.envelope { position:absolute; left:-4%; bottom:22%; width:108%; height:53%; padding:0; border:0; background:none; color:#8f737b; box-shadow:0 12px 35px #0006; animation:envelopeIn .65s ease both; transition:bottom .8s cubic-bezier(.2,.7,.2,1) .35s; isolation:isolate; }
.envelope-base { position:absolute; inset:0; background:#e4b9c9; box-shadow:inset 0 0 0 1px #f7dee8; }
.envelope-flap { position:absolute; inset:0 0 auto; height:64%; background:linear-gradient(#f9e6ec,#e5b9c9); clip-path:polygon(0 0,100% 0,50% 100%); transform-origin:50% 0; transition:transform .75s ease,filter .75s ease; backface-visibility:visible; z-index:3; filter:drop-shadow(0 2px 1px #a87d8d); }
.envelope-pocket { position:absolute; inset:0; background:#edcbd6 url('assets/floral-envelope.png') center/100% 100%; clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%); z-index:4; }
.envelope-copy { position:absolute; left:10%; right:10%; top:12%; display:flex; flex-direction:column; align-items:center; line-height:1.25; }
.envelope-copy,.seal { z-index:5; transition:opacity .25s ease; }
.envelope-copy small { font:11px/1.6 Georgia,serif; letter-spacing:1px; }
.envelope-copy i { font-size:8px; margin:4px 0 10px; }
.envelope-copy strong { font-family:'Vivaldi','Segoe Script','Brush Script MT',cursive; font-size:clamp(25px,7vw,37px); font-weight:400; }
.envelope-copy em { font-family:'Segoe Script',cursive; font-size:9px; font-weight:400; }
.seal { position:absolute; top:57%; left:43%; width:14%; aspect-ratio:1; display:grid; place-items:center; border-radius:47% 53% 46% 54%/54% 46% 55% 45%; background:radial-gradient(circle,#b95e7a 0 48%,#dd9aad 49% 53%,#b55e79 55% 65%,#d18ba0 67%); box-shadow:2px 3px 4px #6b354c35,inset 0 0 0 1px #ecadbd; color:#f4cbd6; font:italic clamp(13px,4vw,20px) 'Segoe Script',cursive; }
.mail-stage[data-mail="opening"] .envelope,.mail-stage[data-mail="open"] .envelope { bottom:-5%; pointer-events:none; }
.mail-stage[data-mail="opening"] .envelope-flap,.mail-stage[data-mail="open"] .envelope-flap { transform:rotateX(180deg); filter:brightness(.9); }
.mail-stage[data-mail="opening"] .envelope-copy,.mail-stage[data-mail="open"] .envelope-copy,.mail-stage[data-mail="opening"] .seal,.mail-stage[data-mail="open"] .seal { opacity:0; }
.letter-paper { position:absolute; inset:0; z-index:2; width:100%; height:100%; overflow:hidden; padding:0; background:#fff8ef; box-shadow:0 2px 5px #614b5638,0 18px 35px #0004; transform:rotate(-1.3deg); animation:letterEmerge 1.2s cubic-bezier(.2,.65,.2,1) .5s both; }
.letter-paper::before,.letter-paper::after { content:""; position:absolute; pointer-events:none; background-image:url('assets/floral-paper.png'); background-repeat:no-repeat; mix-blend-mode:multiply; }
.letter-paper::before { top:0; left:0; width:120px; height:100px; background-position:top left; background-size:190px 285px; mask-image:radial-gradient(ellipse at top left,#000 40%,transparent 76%); }
.letter-paper::after { bottom:0; right:0; width:42%; height:27%; background-position:bottom right; background-size:300px 450px; z-index:3; mask-image:radial-gradient(ellipse at bottom right,#000 28%,transparent 74%); }
.letter-copy { font-family:'Segoe Script','URW Chancery L','Apple Chancery',cursive; font-size:clamp(10px,2.8vw,13px); line-height:1.65; font-style:italic; position:absolute; inset:16% 7% 37%; z-index:2; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#d5aab9 transparent; padding-right:3px; }
.letter-copy h1 { font-family:'Vivaldi','Segoe Script','Brush Script MT',cursive; font-size:clamp(22px,5.3vw,31px); line-height:1.35; font-weight:400; margin:0 0 13px; }
.letter-copy p { margin:0 0 10px; }
.letter-signature { position:absolute; left:7%; bottom:24%; width:47%; margin:0; color:#88676e; font:italic clamp(10px,2.8vw,13px)/1.8 'Segoe Script','Apple Chancery',cursive; z-index:2; }
.letter-photo { position:absolute; right:7%; bottom:5%; width:30%; height:32%; margin:0; overflow:hidden; border:3px solid #fff8f1; background:#fff8f1; box-shadow:0 2px 6px #72545c26; z-index:4; }
.letter-photo img { position:absolute; display:block; width:100%; height:100%; object-fit:contain; }
.letter-photo[data-atlas="true"] img { width:300%; height:200%; object-fit:fill; max-width:none; left:var(--atlas-left); top:var(--atlas-top); }
@keyframes appear { from { opacity:0; transform:scale(.86); } to { opacity:1; transform:scale(1); } }
@keyframes bouquetBreathe { 50% { transform:translateY(-4px); } }
@keyframes flowerBlinkOut { 0% { opacity:1; } 25% { opacity:.3; } 42% { opacity:.95; } 100% { opacity:0; } }
@keyframes envelopeIn { from { opacity:0; transform:scale(.7) translateY(30px); } }
@keyframes letterEmerge { 0% { opacity:0; transform:translateY(43%) scale(.94); clip-path:inset(50% 0 0); } 15% { opacity:1; } 70% { clip-path:inset(0); } 100% { opacity:1; transform:rotate(-1.3deg); clip-path:inset(0); } }
@media(min-width:800px) { #bouquet { width:min(44vh,345px); } .bouquet-caption { font-size:11px; } }
@media(max-height:570px) { #bouquet { width:49vh; } .bouquet-caption { margin-top:4px; } .letter-copy { font-size:9px; } .letter-copy h1 { font-size:19px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-delay:0ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; transition-delay:0ms!important; } }