@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Manrope:wght@300;400;500;600&display=swap');
:root{--cream:#fff0d8;--gold:#e9c69a;--muted:#d9d7e5;--navy:#071127;--wine:#762d3a}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#030815;color:var(--cream);font-family:Manrope,system-ui,sans-serif}
body{min-height:100vh}
button{font:inherit}
.app{position:relative;width:100%;height:100vh;height:100svh;min-height:100vh;overflow:hidden;background:#030815}
.screen{position:absolute;inset:0;min-height:100svh;overflow:auto;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .8s ease,visibility .8s ease}
.screen.active{opacity:1;visibility:visible;pointer-events:auto}
.opening-screen{background:#030815;display:flex;align-items:center;justify-content:center}
.opening-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#030815}
.opening-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(1,4,14,.48),transparent 28%,transparent 75%,rgba(1,4,14,.15));pointer-events:none}
.opening-controls{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(16px,4vw,48px);gap:16px}
.opening-caption{margin:0;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#f2dfc3;text-shadow:0 2px 12px #000}
.sound-toggle,.quiet-button,.back-button{color:var(--cream);background:rgba(5,13,31,.58);border:1px solid #e8c69a80;border-radius:999px;padding:10px 16px;cursor:pointer;backdrop-filter:blur(8px);transition:background .25s,border-color .25s}
.sound-toggle:hover,.quiet-button:hover,.back-button:hover{background:rgba(74,83,125,.42);border-color:#f4d8ae}
.video-error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:85%;text-align:center;background:#081329eF;padding:24px;border:1px solid #e8c69a66;border-radius:16px}
.video-error button{display:block;margin:14px auto 0}
.scene-bg{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 0%,#193b61 0%,#0b1c38 40%,#040916 100%);z-index:-2}
.scene-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,transparent 10%,rgba(1,4,15,.45) 100%)}
.stars{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.star{position:absolute;width:2px;height:2px;border-radius:50%;background:#e9f3ff;box-shadow:0 0 8px #8ecbff;animation:twinkle var(--speed,3s) ease-in-out infinite alternate;animation-delay:var(--delay,0s)}
.cluster-screen,.collection-screen,.video-screen{background:transparent}
.cluster-content{min-height:100svh;width:min(780px,94vw);margin:auto;padding:50px 20px 36px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}
.eyebrow{font-size:.64rem;letter-spacing:.25em;text-transform:uppercase;color:#edcda5;margin:0 0 14px}
h1,h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;line-height:1.02;margin:0}
h1{font-size:clamp(2.8rem,7vw,5.3rem);text-shadow:0 2px 20px #0007}
.intro-copy,.page-heading>p:not(.eyebrow){font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.35;color:#eee5d9;max-width:540px;margin:18px auto 0}
.cluster{position:relative;width:min(450px,85vw);height:clamp(220px,37vh,340px);border:0;background:transparent;cursor:pointer;margin:18px 0 6px;filter:drop-shadow(0 18px 24px #0005);transition:transform .4s}
.cluster:hover{transform:translateY(-4px) scale(1.015)}
.envelope-card{position:absolute;display:block;width:48%;height:47%;border-radius:5px;background:linear-gradient(145deg,#fff3d9,#d9bc8c);box-shadow:0 7px 22px #0006;border:1px solid #fff3d9;overflow:hidden}
.envelope-card:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,transparent 49%,#c8a77c 50%,transparent 51%),linear-gradient(35deg,transparent 49%,#e5cc9e 50%,transparent 51%);opacity:.9}
.envelope-card:after{content:"";position:absolute;left:50%;top:46%;width:26px;height:26px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 30% 25%,#b9585c,#712832 70%);box-shadow:0 2px 5px #4b151d88}
.envelope-card i{position:absolute;z-index:1;left:50%;top:46%;width:8px;height:8px;transform:translate(-50%,-50%);color:#f7d9b2}
.card-one{left:4%;top:21%;transform:rotate(-15deg);animation:floatA 5s ease-in-out infinite}
.card-two{left:27%;top:8%;transform:rotate(-5deg);animation:floatB 5.8s ease-in-out infinite}
.card-three{right:5%;top:18%;transform:rotate(13deg);animation:floatC 5.3s ease-in-out infinite}
.card-four{left:18%;bottom:7%;transform:rotate(8deg);animation:floatC 6s ease-in-out infinite}
.card-five{right:18%;bottom:4%;transform:rotate(-8deg);animation:floatA 5.4s ease-in-out infinite}
.cluster-glow{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(ellipse,rgba(234,190,126,.17),transparent 68%);animation:glow 3.5s ease-in-out infinite;pointer-events:none}
.tap-hint{font-size:.78rem;letter-spacing:.04em;color:#eee0ca;margin:4px 0 22px}
.page-heading{text-align:center;padding:54px 20px 20px}
.page-heading h1{font-size:clamp(2.8rem,6vw,4.5rem)}
.envelope-grid{width:min(1000px,92vw);margin:20px auto 28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:22px}
.friend-envelope{position:relative;min-height:190px;padding:18px 12px 14px;border:1px solid #e8c69a55;border-radius:12px;background:linear-gradient(145deg,rgba(255,241,215,.12),rgba(8,18,39,.65));color:var(--cream);cursor:pointer;transition:transform .25s,border-color .25s,background .25s;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:13px;overflow:hidden}
.friend-envelope:hover{transform:translateY(-5px);border-color:#f2d0a1;background:rgba(92,83,102,.25)}
.envelope-icon{position:relative;width:94px;height:63px;background:linear-gradient(145deg,#fff1d5,#d6b887);border-radius:3px;box-shadow:0 8px 16px #0004}
.envelope-icon:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,transparent 49%,#c6a275 50%,transparent 52%),linear-gradient(35deg,transparent 49%,#e7cda0 50%,transparent 52%)}
.envelope-icon:after{content:"✦";position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:23px;height:23px;border-radius:50%;background:#812f3b;color:#f6d8b0;display:grid;place-items:center;font-size:11px}
.friend-name{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.3rem}
.friend-status{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:#d7c5a9}
.friend-envelope.watched{opacity:.65}
.video-content{width:min(1000px,94vw);min-height:100svh;margin:auto;padding:58px 20px 32px;display:flex;align-items:center;flex-direction:column;text-align:center}
.back-button{position:absolute;z-index:3;top:20px;left:20px}
.video-content h1{font-size:clamp(2.5rem,5vw,4.2rem);margin-bottom:22px}
.video-frame{position:relative;width:min(820px,100%);aspect-ratio:16/9;background:#02050c;border:1px solid #e8c69a65;border-radius:12px;overflow:hidden;box-shadow:0 22px 65px #0007}
#friendVideo{width:100%;height:100%;object-fit:contain;background:#02050c;display:none}
.video-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px;background:radial-gradient(ellipse at center,#142745,#030815)}
.placeholder-icon{font-size:2.4rem;color:#e9c69a;margin-bottom:12px}
.video-placeholder h2{font-size:clamp(1.6rem,3vw,2.3rem)}
.video-placeholder p{max-width:460px;line-height:1.6;color:#c9ccda;font-size:.88rem}
.video-placeholder code{color:#f0d1a6}
.video-caption{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.2rem;color:#e8dfd1;margin:14px 0}
.next-row{width:min(820px,100%);display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px}
.watch-note{color:#c7c8d4;font-size:.75rem;text-align:left}
.next-button{border:1px solid #edcda5;background:#e8c69a;color:#20162a;border-radius:999px;padding:12px 20px;cursor:pointer;font-weight:600;box-shadow:0 4px 18px #d5ad7540;animation:nextReveal .7s ease both}
.next-button span{margin-left:12px}
.next-button:hover{background:#ffe0b5}
.next-button[hidden]{display:none}
.toast{position:fixed;z-index:10;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:#09152ceF;border:1px solid #e8c69a66;border-radius:10px;padding:12px 18px;color:#fff0d8;transition:.3s;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes twinkle{from{opacity:.2;transform:scale(.65)}to{opacity:1;transform:scale(1.5)}}
@keyframes floatA{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes floatB{0%,100%{translate:0 0}50%{translate:0 7px}}
@keyframes floatC{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes glow{0%,100%{opacity:.45;scale:.96}50%{opacity:1;scale:1.05}}
@keyframes nextReveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:650px){.opening-video{object-fit:contain}.opening-controls{align-items:flex-end}.opening-caption{max-width:45%;line-height:1.5}.cluster-content{padding-top:35px}.cluster{height:245px}.envelope-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.friend-envelope{min-height:160px}.video-content{padding-top:76px}.back-button{top:12px;left:12px}.next-row{flex-direction:column;align-items:stretch}.watch-note{text-align:center}.next-button{align-self:center}.video-frame{aspect-ratio:16/9}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


/* Birthday reading pause: appears over the unchanged final video frame. */
.reading-pause{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:22px;transform:none;background:rgba(3,8,21,.38);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .8s ease,visibility .8s ease;backdrop-filter:blur(1.5px)}
.reading-pause.visible{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.reading-card{width:min(760px,92vw);padding:clamp(24px,5vw,52px);text-align:center;background:rgba(5,13,31,.74);border:1px solid #e8c69a66;border-radius:18px;box-shadow:0 24px 80px #0007;backdrop-filter:blur(12px)}
.birthday-message{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(1.6rem,4vw,2.8rem);line-height:1.25;color:#fff0d8;margin:8px auto 28px;max-width:680px}
.continue-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid #f3d8b0;border-radius:999px;padding:13px 22px;background:linear-gradient(120deg,#f0d7b1,#d7b47e);color:#241923;font:inherit;cursor:pointer;transition:transform .25s,filter .25s}.continue-button:hover{transform:translateY(-2px);filter:brightness(1.06)}
.private-envelope-wrap{width:min(440px,90vw);margin:10px auto 26px;animation:floatB 5.7s ease-in-out infinite}
.private-envelope{width:100%;padding:18px 16px 20px;display:flex;align-items:center;gap:12px;flex-direction:column;border:1px solid #c5a25c55;border-radius:14px;background:linear-gradient(145deg,rgba(255,241,215,.09),rgba(8,18,39,.7));color:var(--cream);cursor:pointer;transition:transform .3s,border-color .3s,opacity .3s}
.private-envelope:disabled{cursor:not-allowed;opacity:.68}.private-envelope:not(:disabled){border-color:#d8b56f;box-shadow:0 0 32px #d8b56f22}.private-envelope:not(:disabled):hover{transform:translateY(-3px)}
.private-envelope-icon{width:98px;height:65px;position:relative;background:linear-gradient(145deg,#fff3dc,#d9bd8e);border-radius:4px;box-shadow:0 8px 18px #0005}.private-envelope-icon:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,transparent 49%,#c9a878 50%,transparent 51%),linear-gradient(35deg,transparent 49%,#ead3a9 50%,transparent 51%)}
.gold-seal,.secret-gold-seal{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:29px;height:29px;border-radius:50%;display:grid;place-items:center;color:#fff0c7;font-size:15px;background:radial-gradient(circle at 30% 25%,#f2d99c,#b58a42 70%,#75552d);box-shadow:0 2px 9px #2b1b0a66;border:1px solid #f9e5b1}.private-envelope-title{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.35rem}.private-envelope-status{font-size:.76rem;color:#d9d7e5;line-height:1.5}
.secret-screen{background:transparent}.secret-card{position:relative;width:min(720px,92vw);min-height:100svh;margin:auto;padding:clamp(34px,7vh,72px) 20px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}.secret-envelope-open{position:relative;width:118px;height:80px;margin:0 auto 30px;border-radius:4px;background:linear-gradient(145deg,#fff2d8,#d7b785);box-shadow:0 14px 40px #0005;animation:floatA 4s ease-in-out infinite}.secret-envelope-open:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,transparent 49%,#c5a477 50%,transparent 51%),linear-gradient(35deg,transparent 49%,#e5cda1 50%,transparent 51%)}.secret-envelope-open .secret-gold-seal{position:absolute;left:50%;top:55%}
.secret-card h1{font-size:clamp(2.2rem,5vw,4rem);max-width:670px;margin:0 auto 18px}.secret-copy{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(1.25rem,2.5vw,1.65rem);line-height:1.45;max-width:600px;color:#f3e6d8;margin:0 auto 28px}.password-form{width:min(380px,100%);display:flex;flex-direction:column;gap:12px;text-align:left}.password-form label{font-size:.8rem;color:#e8c69a}.password-form input{width:100%;padding:14px 15px;border:1px solid #e8c69a88;border-radius:10px;background:#071127d9;color:#fff0d8;font:inherit;outline:none}.password-form input:focus{border-color:#f5d8a4;box-shadow:0 0 0 3px #e8c69a22}.password-form .continue-button{width:100%;margin-top:4px}.password-feedback{min-height:1.3em;margin:0;font-size:.8rem;color:#f0c4bd}.secret-card>.quiet-button{margin-top:22px}
[hidden]{display:none!important}
@media(max-width:560px){.reading-card{padding:25px 20px}.opening-controls{bottom:14px}.private-envelope-wrap{margin-top:0}.secret-card{padding-top:48px;padding-bottom:35px}}