:root{--ink:#070d24;--navy:#0b1740;--navy2:#142358;--blue:#5b7fd6;--paper:#f4efe6;--gold:#c9a86a;
--serif:"Instrument Serif",Georgia,"Times New Roman",serif;--sans:"Hanken Grotesk",system-ui,sans-serif;color-scheme:dark}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--ink)}
body{font-family:var(--sans);color:var(--paper);background:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* Intro + envelope */
#intro{position:fixed;inset:0;z-index:50;display:grid;place-content:center;justify-items:center;gap:clamp(36px,8vh,72px);
text-align:center;padding:6vw;background:radial-gradient(ellipse at 50% 40%,#16275f 0,var(--ink) 72%);
transition:opacity 1.4s ease,visibility 0s 1.4s}
#intro.done{opacity:0;visibility:hidden;pointer-events:none}
#intro h1{font:400 clamp(1.4rem,5.2vw,2.5rem)/1.25 var(--serif);letter-spacing:.14em}
.env-wrap{display:grid;justify-items:center;gap:34px}
.env{position:relative;width:min(74vw,320px);aspect-ratio:3/2;background:#1c2d66;border-radius:3px;perspective:900px;
box-shadow:0 0 60px rgba(201,168,106,.18),0 30px 60px -20px #000;animation:glow 3.2s ease-in-out infinite}
.env>span{position:absolute}
.letter{inset:7% 6%;background:var(--paper);z-index:1;transition:transform 1.1s .55s cubic-bezier(.3,.7,.2,1)}
.pocket{inset:0;z-index:2;background:#27408a;clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);clip-path:polygon(0 100%,0 0,50% 58%,100% 0,100% 100%)}
.flap{left:0;right:0;top:0;height:60%;z-index:3;background:#33509f;transform-origin:50% 0;clip-path:polygon(0 0,100% 0,50% 100%)}
.seal{left:50%;top:48%;width:16%;aspect-ratio:1;z-index:4;translate:-50% 0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e8d3a2,var(--gold) 60%,#8f7340);box-shadow:0 2px 8px #0008;transition:opacity .4s}
.open .seal{opacity:0}
.open .env{animation:none}
.open .flap{animation:flap .9s ease forwards}
.open .letter{transform:translateY(-62%)}
.cta{font-size:.82rem;letter-spacing:.24em;color:var(--gold);transition:opacity .6s}
.open .cta{opacity:0}
@keyframes flap{0%{transform:rotateX(0);z-index:3}49%{z-index:3}50%{z-index:0}100%{transform:rotateX(180deg);z-index:0}}
@keyframes glow{50%{box-shadow:0 0 90px rgba(201,168,106,.34),0 30px 60px -20px #000}}

/* Reveal */
#reveal{min-height:100svh;display:grid;place-content:center;text-align:center;padding:8vw 5vw;perspective:1100px;
background:radial-gradient(circle at 50% 42%,#1a2c6e 0,var(--ink) 66%)}
.title{font-weight:400}
.line{display:block;font:400 clamp(3.4rem,15vw,10rem)/.96 var(--serif);letter-spacing:.02em}
.line.name{color:var(--gold);font-style:italic;text-shadow:0 0 50px rgba(201,168,106,.4)}
.line span{display:inline-block;opacity:0;transform:rotateX(-100deg) translateY(.35em);transform-origin:50% 100%}
.go .line span{animation:rise 1.2s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*70ms)}
@keyframes rise{to{opacity:1;transform:none}}
.sub{margin-top:clamp(20px,4vh,40px);font:italic 400 clamp(1.3rem,4vw,2.1rem) var(--serif);color:#cdd6f0;opacity:0;transform:translateY(10px);transition:opacity 1.4s 2.9s,transform 1.4s 2.9s}
.go .sub{opacity:1;transform:none}

/* Memories */
.mem-title{min-height:70svh;display:grid;place-content:center;text-align:center;padding:0 7vw;font:italic 400 clamp(2rem,7.5vw,4.6rem)/1.1 var(--serif)}
.scene{position:relative}
.full{height:100svh;overflow:hidden}
.full img,.full .ph{width:100%;height:100%;object-fit:cover;display:block}
.full img{scale:1.14;translate:0 var(--py,0);transition:scale 3.2s cubic-bezier(.2,.6,.2,1);cursor:zoom-in}
.full.in img{scale:1.04}
.full::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,rgba(7,13,36,.88));pointer-events:none}
.cap{position:absolute;left:0;right:0;bottom:9svh;z-index:2;text-align:center;padding:0 7vw;font:italic 400 clamp(1.4rem,4.2vw,2.3rem)/1.2 var(--serif);
opacity:0;transform:translateY(14px);transition:opacity 1s .7s,transform 1s .7s}
.in .cap{opacity:1;transform:none}
.scrap-scene{display:grid;place-items:center;padding:12svh 0;background:linear-gradient(180deg,var(--ink),var(--navy) 50%,var(--ink))}
.scrap{position:relative;width:min(92vw,880px);height:min(125vw,92svh)}
.pol{position:absolute;width:min(58%,36svh);background:var(--paper);color:var(--ink);padding:2.6% 2.6% 0;box-shadow:0 30px 60px -20px #000c;
opacity:0;transform:translateY(46px) rotate(var(--r));transition:opacity 1s,transform 1.5s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--k)*.28s)}
.in .pol{opacity:1;transform:rotate(var(--r))}
.pol:nth-child(1){left:0;top:0;--r:-3.5deg;--k:0}
.pol:nth-child(2){right:0;bottom:5%;--r:3deg;--k:1;z-index:2}
.pol:nth-child(3){left:24%;top:33%;--r:-1deg;--k:2;z-index:1;width:min(50%,31svh)}
.pol img,.pol .ph{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;cursor:zoom-in}
.pol figcaption{min-height:clamp(2.2rem,8vw,3.2rem);display:grid;place-items:center;padding:.3rem;font:italic 400 clamp(.95rem,3vw,1.25rem) var(--serif)}
.ph{display:grid;place-items:center;text-align:center;padding:1rem;background:#101c4a;border:1px dashed var(--gold);color:var(--gold);font-size:.8rem;letter-spacing:.06em;cursor:default!important}

/* Portrait screens: show the whole photo so neither face is cropped */
@media (max-aspect-ratio:1/1){.full img{object-fit:contain!important;background:var(--ink)}}

/* Message */
#message{min-height:100svh;display:grid;place-content:center;padding:14svh 8vw;background:radial-gradient(ellipse at 50% 100%,#14235a,var(--ink) 70%)}
#msg{max-width:34rem;font:400 clamp(1.35rem,3.8vw,1.95rem)/1.5 var(--serif)}
#msg p+p{margin-top:1.05em}
#msg span{opacity:0;transition:opacity .35s}
#msg span.on{opacity:1}

/* Final */
#final{min-height:100svh;display:grid;justify-items:center;align-content:center;gap:clamp(22px,4vh,40px);text-align:center;padding:14svh 6vw 10svh;
background:radial-gradient(ellipse at 50% 30%,#101d52,var(--ink) 70%)}
.final-photo{width:min(84vw,520px);box-shadow:0 0 140px rgba(91,127,214,.28),0 40px 80px -30px #000}
.final-photo img,.final-photo .ph{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;cursor:zoom-in}
.tag{max-width:30rem;font:400 clamp(1.5rem,5vw,2.6rem)/1.15 var(--serif);letter-spacing:.06em}
.again{font:italic 400 clamp(1.5rem,5vw,2.6rem) var(--serif);color:var(--gold)}
.replay{font-size:.85rem;letter-spacing:.12em;padding:.7rem 1.4rem;border:1px solid rgba(244,239,230,.35);border-radius:99px;transition:border-color .3s,color .3s}
.replay:hover{border-color:var(--gold);color:var(--gold)}
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 1.4s,transform 1.4s}
[data-reveal].in{opacity:1;transform:none}
.tag[data-reveal]{transition-delay:.8s}
.again[data-reveal]{transition-delay:2s}
.replay[data-reveal]{transition-delay:3.2s}

/* UI */
#confetti{position:fixed;inset:0;width:100%;height:100%;z-index:40;pointer-events:none}
.mute{position:fixed;top:max(14px,env(safe-area-inset-top));right:14px;z-index:55;font-size:.75rem;letter-spacing:.1em;padding:.5rem .9rem;border-radius:99px;background:rgba(7,13,36,.6);border:1px solid rgba(244,239,230,.25)}
#lightbox{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(4,8,22,.94);cursor:zoom-out;padding:4vw}
#lightbox img{max-width:100%;max-height:100%;object-fit:contain}

@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
.full img{scale:1.04}
}