/* v2: transform/opacity only. No blur, no blend modes, no animated shadows (the usual iOS Safari lag sources). */
:root{--ivory:#F7F1E8;--esp:#211B19;--rose:#B98F8F;--peach:#D9A89D;--beige:#D8C7B4;--cream:#FFF9F1;--burg:#4B252C;--gold:#C9A769;
--serif:"Cormorant Garamond",Georgia,serif;--sans:"DM Sans",system-ui,sans-serif;--hand:"Caveat","Bradley Hand",cursive;
--bg:var(--esp);--fg:var(--ivory);--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--fg);font:300 1rem/1.6 var(--sans);transition:background-color 1.6s,color 1.6s;-webkit-font-smoothing:antialiased}
body.light{--bg:var(--ivory);--fg:var(--esp)}
body::before{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.045;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;transition:opacity 1.6s}
body.light #sky{opacity:0}
#stage{position:fixed;inset:0;z-index:2}
.scene{position:absolute;inset:0;padding:calc(var(--st) + 1.5rem) 1.5rem calc(var(--sb) + 1.5rem);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;transition:opacity 1s}
.scene.in{opacity:1}
#snd,#moon,#lock{position:fixed;z-index:60;opacity:.5;padding:.9rem}
#snd{right:calc(env(safe-area-inset-right,0px) + .6rem);top:calc(var(--st) + .4rem);font:300 .75rem var(--sans);letter-spacing:.08em}
#moon{left:calc(env(safe-area-inset-left,0px) + .6rem);bottom:calc(var(--sb) + .4rem);opacity:.28}
#lock{right:calc(env(safe-area-inset-right,0px) + .6rem);bottom:calc(var(--sb) + .4rem);opacity:.28}
#moon svg,#lock svg{width:1.1rem;height:1.1rem}
#moon:hover,#lock:hover{opacity:.6}
.tiny{font:italic 300 1.35rem var(--serif);margin-bottom:2rem}
.orb{position:relative;width:min(82vw,340px);padding:1rem;color:var(--gold)}
.orb svg{width:100%;height:auto;overflow:visible;stroke-width:1}
.orb .ln{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 5s 1s ease-out forwards;opacity:.55}
.orb .dot{fill:currentColor;stroke:none;opacity:.5}
.orb .big{fill:#F7E6BE;stroke:var(--gold);stroke-width:1.4;transform-origin:262px 52px;animation:pulse 3.2s 5s ease-in-out infinite}
.orb::before{content:"";position:absolute;right:6%;top:6%;width:34%;aspect-ratio:1;background:radial-gradient(circle,rgba(201,167,105,.5),transparent 68%);opacity:0;animation:halo 3.2s 5s ease-in-out infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pulse{50%{transform:scale(1.25)}}
@keyframes halo{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:.8;transform:scale(1.15)}}
.note{font:500 1.15rem var(--hand);margin-top:1.4rem;opacity:0;transform:rotate(-3deg);animation:fade 2s 5s forwards;color:var(--fg)}
.bloom{position:fixed;left:var(--x);top:var(--y);width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--ivory);z-index:40;transform:scale(0);transition:transform 1.3s cubic-bezier(.65,0,.35,1);will-change:transform}
.bloom.go{transform:scale(var(--k))}
.beats{cursor:pointer;user-select:none;-webkit-user-select:none}
.beat{font:italic 300 clamp(1.8rem,7.5vw,2.7rem)/1.22 var(--serif);max-width:16ch;opacity:0;transition:opacity .7s}
.beat.on{opacity:1}
.beat span{display:inline-block;opacity:0;transform:translateY(.45em);transition:opacity .9s,transform .9s}
.beat.on span{opacity:1;transform:none}
.beat.big{font-style:normal;font-size:clamp(5.5rem,34vw,15rem);line-height:.9;letter-spacing:-.03em;max-width:none;color:var(--burg)}
.hint{position:absolute;bottom:calc(var(--sb) + 2rem);font:500 1.1rem var(--hand);opacity:0;animation:hint 1s 3.5s forwards}
@keyframes hint{to{opacity:.4}}
@keyframes fade{to{opacity:1}}
.more{cursor:pointer;user-select:none}
.more .beat.big{transition:opacity .8s,transform .8s}
.more .beat.gone{opacity:0;transform:translateY(-1.5rem)}
.word{font:italic 300 clamp(1.9rem,8vw,2.8rem)/1.15 var(--serif);max-width:14ch;min-height:2.4em;opacity:0;transform:translateY(.6em);transition:opacity .7s,transform .7s}
.word.on{opacity:1;transform:none}
.mem{padding:0}
.track{display:flex;gap:7vw;overflow-x:auto;scroll-snap-type:x mandatory;width:100%;padding:2rem 14vw;align-items:center;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{display:none}
.pol{flex:none;width:min(72vw,330px);scroll-snap-align:center;background:var(--cream);padding:.8rem .8rem 0;box-shadow:0 10px 24px -14px rgba(75,37,44,.55);transform:rotate(var(--r,0deg)) scale(.94);opacity:.5;transition:transform .7s,opacity .7s;color:var(--esp);text-align:left}
.pol.on{transform:rotate(var(--r,0deg));opacity:1}
.ph{aspect-ratio:4/5;overflow:hidden;background:var(--beige);position:relative}
.ph img{width:100%;height:100%;object-fit:cover;display:block;transform:translate3d(calc(var(--p,0)*-12%),0,0) scale(1.28)}
.ph.empty{background:linear-gradient(155deg,var(--peach),var(--rose));display:grid;place-items:center}
.ph.empty span{font:500 1.2rem var(--hand);color:var(--cream)}
.pol figcaption{padding:.7rem .2rem .9rem}
.hand{font:500 1.55rem/1.1 var(--hand)}
.pol.endcap{background:none;box-shadow:none;display:grid;place-items:center;aspect-ratio:3/4;transform:none;opacity:1}
.btn{font:italic 300 1.35rem var(--serif);border-bottom:1px solid currentColor;padding:.8rem .2rem}
.swipe{position:absolute;top:calc(var(--st) + 1.6rem);font:500 1.1rem var(--hand);opacity:.45}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;width:min(100%,360px)}
.obj{position:relative;aspect-ratio:1;border:1px solid rgba(33,27,25,.2);border-radius:46% 54% 50% 50%/55% 45% 55% 45%;display:grid;place-items:center;transition:transform .5s,background-color .5s;user-select:none;-webkit-user-select:none}
.obj:nth-child(2n){border-radius:52% 48% 44% 56%/46% 54% 46% 54%;transform:translateY(1.2rem)}
.obj>svg:first-child{width:46%;height:auto;stroke-width:1.3}
.obj.holding{transform:scale(.93)}
.obj.done{background:rgba(217,168,157,.25)}
.ring{position:absolute;inset:6%;width:88%;height:88%;stroke:var(--rose);stroke-width:1.5;stroke-dasharray:302;stroke-dashoffset:302;transform:rotate(-90deg)}
.holding .ring{transition:stroke-dashoffset .7s linear;stroke-dashoffset:0}
.things .btn{margin-top:3.2rem;opacity:0;transition:opacity 1s;pointer-events:none}
.things .btn.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;inset:0;z-index:55;background:rgba(33,27,25,.6);display:grid;place-items:center;padding:1.5rem;opacity:0;transition:opacity .5s}
.sheet.in{opacity:1}
.paper{background:var(--cream);color:var(--esp);padding:2rem 1.6rem;max-width:300px;transform:rotate(-1.5deg) translateY(14px);transition:transform .6s;font:500 1.75rem/1.25 var(--hand);text-align:left}
.sheet.in .paper{transform:rotate(-1.5deg)}
.final{gap:1.3rem}
.final .ph{width:min(60vw,290px);opacity:0;animation:fade 3s 1s forwards}
.final .ph img{transform:none}
.fl{font:500 2.3rem var(--hand);color:var(--peach);opacity:0;animation:fade 2.5s 4s forwards}
.fs{font:italic 300 1.1rem var(--serif);max-width:24ch;opacity:0;animation:fade 2.5s 7s forwards}
.star{width:3.4rem;height:3.4rem;color:var(--gold);opacity:0;animation:fade 2s 10s forwards;transition:transform 1.2s,opacity 1.5s}
.star svg{width:100%;height:100%}
.star.gone{opacity:0!important;transform:scale(3);pointer-events:none}
.sig{font:500 1.2rem var(--hand);color:var(--peach);opacity:0}
.sig.show{animation:fade 3s 2s forwards}
.ph-placeholder{display:grid;place-items:center;width:100%;height:100%}
.ph-placeholder svg{width:2.4rem;height:2.4rem;fill:rgba(255,249,241,.7);filter:drop-shadow(0 2px 8px rgba(75,37,44,.25))}
.gate{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:360px;margin:0 auto}
.gate-title{font:italic 300 clamp(1.8rem,7vw,2.5rem)/1.25 var(--serif);margin-bottom:1.8rem;color:var(--fg)}
.gate-form{display:flex;flex-direction:column;align-items:center;width:100%}
.passcode-box{position:relative;width:min(100%,280px);display:flex;align-items:center}
.passcode-input{width:100%;font:300 1.15rem var(--sans);letter-spacing:.25em;text-align:center;padding:.75rem 2.8rem .75rem 1.4rem;border-radius:999px;border:1px solid rgba(201,167,105,.4);background:rgba(247,241,232,.08);color:var(--fg);outline:none;font-size:16px;transition:border-color .3s,box-shadow .3s,transform .2s}
body.light .passcode-input{background:rgba(33,27,25,.04);border-color:rgba(201,167,105,.5)}
.passcode-input:focus{border-color:var(--gold);box-shadow:0 0 16px -4px rgba(201,167,105,.4)}
.passcode-input::placeholder{font:italic 300 1rem var(--serif);letter-spacing:normal;opacity:.45;color:inherit}
.passcode-btn{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;color:var(--gold);opacity:.75;transition:opacity .2s,transform .2s}
.passcode-btn:hover{opacity:1;transform:translateY(-50%) scale(1.1)}
.passcode-btn svg{width:1.15rem;height:1.15rem}
.passcode-note{font:500 1.25rem var(--hand);color:var(--peach);margin-top:1.2rem;min-height:1.5em;transition:opacity .3s,transform .3s}
.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.lock-link{display:block;margin-top:1.6rem;font:300 .8rem var(--sans);letter-spacing:.08em;opacity:.5;border-bottom:1px dotted currentColor;padding-bottom:2px;cursor:pointer}
.lock-link:hover{opacity:.9}
.emoji-bubble{position:fixed;bottom:-50px;pointer-events:none;z-index:45;user-select:none;font-size:clamp(1.4rem,4.5vw,2.4rem);will-change:transform,opacity;animation:floatEmoji var(--dur,4.5s) cubic-bezier(.25,.46,.45,.94) forwards}
@keyframes floatEmoji{0%{transform:translate3d(var(--x,0),0,0) scale(var(--sc,1)) rotate(var(--rot,0deg));opacity:0}15%{opacity:var(--op,.9)}80%{opacity:var(--op,.9)}100%{transform:translate3d(calc(var(--x,0) + var(--drift,28px)),calc(-100vh - 80px),0) scale(calc(var(--sc,1)*1.2)) rotate(calc(var(--rot,0deg) + var(--spin,25deg)));opacity:0}}
@media(min-width:900px){.pol{width:300px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01s!important;animation-delay:0s!important;transition-duration:.01s!important}}