:root{--green:#5aa897;--blue:#7bc4f7;--mint:#d9f5e6;--sky:#eaf7ff;--ink:#24313a;--gold:#e8c76a;--glass:rgba(255,255,255,.48);--border:rgba(255,255,255,.72)}*{box-sizing:border-box}html,body,main{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:Poppins,sans-serif;color:var(--ink);background:#f5fcfa}button{font:inherit;color:inherit;border:0;cursor:pointer}.sky,.sky:after{position:fixed;inset:-15%;z-index:-3;background:radial-gradient(circle at 15% 18%,#bce8d6 0 9%,transparent 31%),radial-gradient(circle at 85% 26%,#b9e2fa 0 10%,transparent 33%),radial-gradient(circle at 44% 85%,#fbf1ca 0 6%,transparent 31%);filter:blur(22px);animation:sky 15s ease-in-out infinite alternate}.sky:after{content:"";opacity:.55;transform:rotate(180deg)}#sparkles,#petals,#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-1}#sparkles i,#petals i{position:absolute;top:105%;font-style:normal;color:#fff;opacity:.66;animation:rise linear infinite;text-shadow:0 0 12px #fff}#petals i{color:#75b7a6;text-shadow:none;opacity:.4}.page{position:fixed;inset:0;padding:clamp(18px,4vw,42px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:scale(.96) translateY(18px);filter:blur(10px);transition:.65s cubic-bezier(.22,1,.36,1)}.page.active{opacity:1;pointer-events:auto;transform:none;filter:none}.opening-present{margin-top:-76px}.intro-copy{text-align:center;position:absolute;bottom:12vh}.intro-copy p,.scene-label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#478576;margin:0 0 8px}.intro-copy h1{font:600 clamp(1.85rem,7vw,2.65rem)/1.15 'Playfair Display',serif;margin:0}.intro-copy small,.hint{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;display:block;margin-top:18px;color:#558a9f}.present{width:190px;height:166px;position:relative;background:transparent}.present .box,.present .lid{position:absolute;left:10px;width:170px;background:linear-gradient(145deg,#81bdaf,#6dadd9);box-shadow:0 24px 36px #35565a2b}.present .box{height:110px;bottom:0;border-radius:10px 10px 24px 24px}.present .lid{height:50px;top:10px;border-radius:18px;transition:.8s cubic-bezier(.2,.9,.3,1);z-index:3}.present .ribbon-v,.present .ribbon-h{position:absolute;background:#fcfbf1;z-index:4;opacity:.88}.present .ribbon-v{width:17px;height:160px;left:86px;top:4px}.present .ribbon-h{height:14px;width:170px;left:10px;top:28px}.present .bow{position:absolute;z-index:5;top:-12px;left:76px;color:#fff;font-size:35px}.present.opened .lid{transform:translateY(-34px) rotate(-8deg);opacity:.35}.present.opened{animation:openGift 1s ease}.menu-head{text-align:center;position:absolute;top:13vh}.menu-head p{color:#4d9281;letter-spacing:.16em;font-size:.68rem;text-transform:uppercase;margin:0 0 6px}.menu-head h2,.track h2,.final-note h2{font:600 clamp(1.7rem,6vw,2.25rem) 'Playfair Display',serif;margin:0}.menu-orbit{width:min(92vw,420px);display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:45px}.menu-orbit button{height:112px;border-radius:28px;background:var(--glass);border:1px solid var(--border);box-shadow:0 16px 35px #577c7e1b;backdrop-filter:blur(18px);display:grid;place-content:center;gap:7px;transition:.3s;animation:float 4s ease-in-out infinite}.menu-orbit button:nth-child(2n){animation-delay:-1.4s}.menu-orbit button:nth-child(3n){animation-delay:-2.5s}.menu-orbit button:active{transform:scale(.93)}.menu-orbit b{font-size:1.55rem;font-weight:400}.menu-orbit span{font-size:.78rem;font-weight:600}.back{position:absolute;top:max(22px,env(safe-area-inset-top));left:22px;width:42px;height:42px;border-radius:50%;background:#ffffff88;backdrop-filter:blur(12px);font-size:1.3rem}.scene,.player{width:min(100%,390px);text-align:center;display:flex;align-items:center;flex-direction:column}.scene-label{margin-bottom:22px}.envelope{width:258px;height:176px;background:linear-gradient(155deg,#f5fff9,#d7f1e7);position:relative;border-radius:10px;box-shadow:0 25px 45px #41646b29;transition:.6s;margin:10px}.envelope:after{content:"";position:absolute;inset:0;background:linear-gradient(35deg,transparent 49%,#c7e9dd 50%,transparent 51%),linear-gradient(-35deg,transparent 49%,#c7e9dd 50%,transparent 51%);border-radius:10px}.flap{position:absolute;inset:0 0 auto;height:105px;background:#bfe5dc;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:.7s;z-index:4}.seal{position:absolute;z-index:5;top:68px;left:calc(50% - 13px);width:26px;height:26px;border-radius:50%;background:#e8c76a;color:#fff;display:grid;place-items:center;font-size:.75rem;transition:.5s}.paper{position:absolute;z-index:2;left:20px;right:20px;bottom:13px;min-height:145px;padding:22px 18px;text-align:left;background:#fffdf7;box-shadow:0 7px 18px #4e70691e;transform:translateY(20px);opacity:0;transition:.8s;border-radius:4px}.paper:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#8bbbab25 .7px,transparent .7px);background-size:8px 8px}.paper p{position:relative;white-space:pre-line;font:400 .7rem/1.65 Poppins;margin:0}.paper-tulip{float:right;font-size:1.1rem}.paper em{opacity:0;color:#478576;font:600 .8rem 'Playfair Display',serif;display:block;margin-top:10px;transition:.5s}.paper em.show{opacity:1}.envelope.open .flap{transform:rotateX(180deg)}.envelope.open .seal{opacity:0}.envelope.open .paper{transform:translateY(-78px);opacity:1}.polaroid{height:300px;width:236px;perspective:900px;background:transparent;position:relative;margin:4px}.polaroid>span{position:absolute;inset:0;background:#fffefa;padding:11px 11px 18px;box-shadow:12px 18px 30px #42676c26;backface-visibility:hidden;transition:.65s;transform:rotate(-4deg);border-radius:3px}.memory-image{display:block;height:216px;border-radius:2px;margin-bottom:12px}.front strong{display:block;font:600 1.05rem 'Playfair Display',serif}.front small{font-size:.65rem;color:#6c8991}.memory-back{display:grid;place-content:center;padding:30px!important;background:#f8fff9!important;font:600 1.3rem/1.45 'Playfair Display',serif;transform:rotateY(180deg)!important}.polaroid.flipped .front{transform:rotateY(180deg)}.polaroid.flipped .memory-back{transform:rotateY(360deg)!important}.polaroid.enter{animation:flipIn .45s}.memory-actions button{background:#ffffff91;border:1px solid var(--border);border-radius:99px;padding:11px 17px;font-size:.72rem;margin-top:17px}.memory-actions i{font-style:normal;margin-left:8px}.jar{height:278px;width:188px;background:transparent;position:relative}.jar-glass{position:absolute;bottom:0;left:15px;width:158px;height:210px;border:2px solid #fff9;border-top:0;border-radius:28px 28px 48px 48px;background:linear-gradient(100deg,#ffffff80,#b9e3ed55 40%,#fff9);box-shadow:inset 17px 0 24px #fff8,0 18px 30px #42676b1e;overflow:hidden}.jar-glass i{position:absolute;color:#e8c76a;text-shadow:0 0 10px #fff;font-style:normal}.jar-glass i:nth-child(1){top:65px;left:40px}.jar-glass i:nth-child(2){top:120px;left:90px}.jar-glass i:nth-child(3){top:45px;right:30px}.jar-lid{position:absolute;z-index:2;width:147px;height:30px;left:21px;top:42px;border-radius:20px;background:linear-gradient(#7fb9ae,#5a968a);box-shadow:0 6px 10px #42676b2e;transition:.65s}.jar.opening{animation:shake .5s}.jar.opening .jar-lid{transform:translate(32px,-52px) rotate(20deg)}.jar.opening .jar-glass i{animation:fireflyScatter 1.4s ease}.memory-jar-text,.celebration-text{height:56px;max-width:295px;margin:18px 0 0;font:600 1rem/1.45 'Playfair Display',serif}.cake{width:260px;height:262px;background:transparent;position:relative}.cake span:not(.candle-row){position:absolute;left:50%;transform:translateX(-50%);background:linear-gradient(145deg,#fdf8ec,#c7eadb);box-shadow:inset 0 -11px #8fc6b544,0 8px 12px #3d6b6b16;border-radius:50px}.cake-bottom{bottom:25px;width:220px;height:74px}.cake-mid{bottom:91px;width:176px;height:61px}.cake-top{bottom:145px;width:130px;height:52px}.candle-row{position:absolute;bottom:180px;left:64px;width:132px;display:flex;justify-content:space-between}.candle-row i{height:40px;width:8px;border-radius:5px;background:#f9e2ac;position:relative}.candle-row i:before{content:"";position:absolute;width:13px;height:18px;left:-2px;top:-17px;background:#e8c76a;opacity:0;clip-path:polygon(50% 0,85% 65%,50% 100%,15% 65%);filter:drop-shadow(0 0 7px #e8c76a)}.cake.lit .candle-row i:before{opacity:1;animation:flicker .7s infinite}.player{gap:10px}.album{width:250px;height:250px;position:relative;margin:6px 0}.album-art{position:absolute;width:185px;height:185px;left:0;top:32px;border-radius:18px;background:linear-gradient(135deg,#b5e1d5,#91c9e7);box-shadow:0 17px 30px #456a6c26;display:grid;place-content:center;font:italic 5rem 'Playfair Display',serif;color:#fff9}.album-art span{font:1rem Poppins;position:absolute;right:23px;top:22px}.vinyl{position:absolute;right:2px;top:12px;width:220px;height:220px;border-radius:50%;background:repeating-radial-gradient(circle,#2e3e43 0 2px,#243239 3px 5px);box-shadow:0 15px 28px #273a3d42;display:grid;place-content:center}.vinyl span{width:58px;height:58px;border-radius:50%;background:#83c5d9;border:13px solid #dff3e9}.vinyl.spinning{animation:spin 4s linear infinite}.track p,.player small{font-size:.72rem;color:#63828a;margin:0}.wave{height:30px;display:flex;align-items:center;gap:4px}.wave i{height:4px;width:4px;border-radius:5px;background:#5aa897}.wave.playing i{animation:wave .7s infinite}.wave i:nth-child(2){animation-delay:.2s}.wave i:nth-child(3){animation-delay:.4s}.play{width:52px;height:52px;border-radius:50%;background:#5aa897;color:white;box-shadow:0 10px 20px #5aa89755}.small-present{transform:scale(.72);margin-bottom:-35px}.final-note{max-width:310px;opacity:0;transform:translateY(12px);transition:.8s;pointer-events:none}.final-note.revealed{opacity:1;transform:none}.final-note h2{margin:4px 0 10px}.final-note p{font-size:.76rem;line-height:1.65;margin:5px}.final-note h3{font:600 1.25rem 'Playfair Display',serif;margin:13px 0 4px}.final-note em{font-size:.8rem;color:#478576}.big-tulip{font-size:2rem;display:block;margin-top:12px;animation:sway 3s ease-in-out infinite}@keyframes sky{to{transform:translate(4%,3%) scale(1.08)}}@keyframes rise{to{transform:translateY(-125vh) rotate(250deg);opacity:0}}@keyframes float{50%{transform:translateY(-7px)}}@keyframes openGift{50%{transform:scale(1.07)}}@keyframes shake{20%,60%{transform:rotate(-5deg)}40%,80%{transform:rotate(5deg)}}@keyframes fireflyScatter{50%{transform:translateY(-65px) scale(1.3);opacity:0}}@keyframes flicker{50%{transform:scale(.8,1.15) rotate(3deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes wave{50%{height:23px;background:#7bc4f7}}@keyframes sway{50%{transform:rotate(8deg)}}@keyframes flipIn{50%{transform:scale(.9) rotate(4deg)}}#confetti i{position:absolute;top:40%;width:8px;height:13px;animation:conf 2.2s ease-in forwards}@keyframes conf{to{transform:translate(var(--x),70vh) rotate(600deg);opacity:0}}@media(min-width:700px){.menu-orbit{grid-template-columns:repeat(3,1fr);max-width:580px}.menu-orbit button{height:130px}.menu-head{top:16vh}}
/* Letter interaction polish */
 .letter-modal article{overflow:hidden!important}
body{font-family:Inter,Poppins,sans-serif!important}
body{font-family:Inter,Poppins,sans-serif}.letter-scene{justify-content:center!important;min-height:100%;padding-top:20px}.letter-scene .scene-label{margin-bottom:26px}.envelope{width:clamp(260px,78vw,370px)!important;height:clamp(180px,54vw,235px)!important;margin:0!important;background:transparent!important;border-radius:16px!important;box-shadow:none!important;overflow:visible!important;perspective:1000px;isolation:isolate}.envelope::before{content:"";position:absolute;inset:0;border-radius:16px;background:linear-gradient(145deg,#effbf5,#c9ebde);box-shadow:0 24px 48px rgba(54,98,94,.19);z-index:1}.envelope::after{display:none!important}.envelope-front{position:absolute;z-index:4;inset:auto 0 0;height:78%;border-radius:0 0 16px 16px;background:linear-gradient(145deg,#e4f6ee,#b8dfd2);clip-path:polygon(0 0,50% 62%,100% 0,100% 100%,0 100%);box-shadow:inset 0 -1px rgba(255,255,255,.5)}.flap{height:62%!important;background:linear-gradient(150deg,#c8eade,#aad9ca)!important;clip-path:polygon(0 0,100% 0,50% 100%)!important;z-index:6!important;transition:transform 600ms cubic-bezier(.22,1,.36,1)!important}.seal{z-index:7!important;top:calc(58% - 14px)!important;left:calc(50% - 14px)!important;width:28px!important;height:28px!important;transition:opacity 300ms ease,transform 600ms cubic-bezier(.22,1,.36,1)!important}.paper{z-index:3!important;left:7%!important;right:7%!important;bottom:13%!important;min-height:0!important;height:150px!important;padding:20px 18px!important;overflow:hidden!important;border:1px solid #e7ddc7!important;border-radius:13px!important;background:#fffdf7!important;box-shadow:0 12px 26px rgba(61,78,67,.14)!important;transform:translateY(48px) scale(.94) rotate(1.2deg)!important;opacity:0;transition:transform 600ms cubic-bezier(.22,1,.36,1),opacity 400ms ease!important;pointer-events:none}.paper::before{background-image:radial-gradient(rgba(131,156,126,.14) .7px,transparent .8px)!important;background-size:9px 9px!important}.paper h2,.letter-modal h2{position:relative;margin:0 0 8px;font:600 clamp(1.05rem,4.5vw,1.45rem)/1.25 'Playfair Display',serif;color:#29483f}.paper p{font:400 .78rem/1.65 Inter,sans-serif!important;overflow-wrap:anywhere;margin:0}.paper em{position:relative;font:500 .7rem Inter,sans-serif!important;opacity:1!important;margin-top:10px!important;color:#4e8e7d}.paper-tulip{position:relative}.envelope.open .flap{transform:rotateX(180deg)!important}.envelope.open .seal{opacity:0!important;transform:translateY(-18px) scale(.75)!important}.envelope.open .paper{opacity:1!important;pointer-events:auto;transform:translateY(-112px) scale(1) rotate(-.6deg)!important}.letter-scene .hint{min-height:18px;margin-top:30px}.letter-modal{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(36,49,58,.19);backdrop-filter:blur(9px);opacity:0;pointer-events:none;transition:opacity 300ms ease}.letter-modal.visible{opacity:1;pointer-events:auto}.letter-modal article{width:min(100%,600px);max-height:calc(100dvh - 38px);overflow:auto;padding:clamp(24px,6vw,40px);border:1px solid #e7ddc7;border-radius:22px;background:#fffdf7;box-shadow:0 28px 70px rgba(36,49,58,.25);transform:translateY(18px) scale(.96) rotate(.6deg);transition:transform 600ms cubic-bezier(.22,1,.36,1);text-align:left}.letter-modal.visible article{transform:none}.letter-modal .paper-tulip{float:right;font-size:1.5rem}.letter-modal p{clear:both;white-space:pre-line;overflow-wrap:anywhere;font:400 clamp(.9rem,3.6vw,1rem)/1.8 Inter,sans-serif;color:#35434a;margin:14px 0}.letter-modal em{font:600 .9rem 'Playfair Display',serif;color:#4e8e7d}.close-letter{float:right;width:44px;height:44px;margin:-13px -13px 0 12px;border-radius:50%;background:#eaf7ff;color:#335a64;font-size:1.5rem;line-height:1}.close-letter:focus-visible,.envelope:focus-visible{outline:3px solid #5aa897;outline-offset:4px}@media(max-width:359px){.letter-scene .scene-label{margin-bottom:14px}.envelope.open .paper{transform:translateY(-96px) scale(.96) rotate(-.6deg)!important}.letter-scene .hint{margin-top:20px}.paper{height:136px!important;padding:16px!important}.paper h2{font-size:1rem}}
/* A hidden full-screen modal must be absent from both hit-testing and paint. */
.letter-modal{visibility:hidden!important;pointer-events:none!important;transition:opacity 300ms ease,visibility 0s linear 300ms!important}
.letter-modal.visible{visibility:visible!important;pointer-events:auto!important;transition:opacity 300ms ease,visibility 0s!important}
.letter-modal:not(.visible) article{transform:translateY(18px) scale(.96) rotate(.6deg)}
.envelope.open .paper{z-index:8!important;cursor:pointer;pointer-events:auto!important}
.envelope.open .paper::before{pointer-events:none}
.envelope.modal-open,.envelope.modal-open .paper{pointer-events:none!important}
.letter-modal{z-index:100!important}
.letter-modal article{position:relative;z-index:1}
.letter-modal article{padding-top:max(72px,clamp(24px,6vw,40px))}
.close-letter{float:none!important;position:absolute!important;top:16px;right:16px;z-index:2;margin:0!important;width:48px!important;height:48px!important;min-width:48px;min-height:48px;cursor:pointer;transition:transform 160ms ease,background-color 160ms ease,box-shadow 160ms ease}
.close-letter:hover{transform:scale(1.08);background:#dff3f7;box-shadow:0 5px 14px rgba(51,90,100,.18)}
#confetti{z-index:200!important;overflow:hidden}
#confetti i{position:absolute!important;width:var(--piece-size,8px);height:var(--piece-size,11px);animation:confettiBurst var(--duration,2.4s) cubic-bezier(.16,.72,.34,1) var(--delay,0s) forwards!important;will-change:transform,opacity}
@keyframes confettiBurst{0%{transform:translate(-50%,-50%) rotate(0deg);opacity:0}8%{opacity:1}100%{transform:translate(var(--drift-x),var(--fall-y)) rotate(var(--spin));opacity:0}}

button:not(:disabled),[data-go],.paper{cursor:pointer;transition:all .25s ease}
@media (hover:hover){
  button:not(:disabled):hover{transform:scale(1.05);filter:brightness(1.04)}
  button:not(:disabled):active{transform:scale(.97)}
  .menu-orbit button:hover{animation-play-state:paused;transform:translateY(-6px) scale(1.03)!important;box-shadow:0 22px 42px #577c7e2c}
  .back:hover,.memory-actions button:hover,.play:hover{background:#f7fffc;box-shadow:0 10px 22px rgba(54,98,94,.16)}
  .envelope:not(.modal-open):hover{transform:translateY(-6px);filter:drop-shadow(0 14px 19px rgba(77,146,129,.22))}
  .envelope.open .paper:hover{transform:translateY(-120px) scale(1.015) rotate(-.6deg)!important;box-shadow:0 18px 32px rgba(61,78,67,.2)!important}
  .polaroid:hover,.jar:hover,.cake:hover{transform:translateY(-5px) scale(1.03);filter:drop-shadow(0 14px 20px rgba(54,98,94,.16))}
  .present:not(.opened):hover{transform:translateY(-6px) scale(1.04);filter:drop-shadow(0 15px 20px rgba(54,98,94,.18))}
  .present:not(.opened):hover .lid{animation:giftLidWiggle .55s ease-in-out infinite}
  .close-letter:hover{transform:rotate(90deg) scale(1.08)!important}
}
@keyframes giftLidWiggle{0%,100%{transform:rotate(0)}35%{transform:rotate(-3deg) translateY(-2px)}70%{transform:rotate(3deg) translateY(-2px)}}
#fireflyMemory{transition:background 2.5s ease}
#fireflyMemory.ending{background:radial-gradient(circle at 50% 48%,rgba(77,121,135,.22),rgba(19,35,52,.58) 78%)}
#fireflyMemory.ending .scene{position:relative;z-index:2}
.jar.ending .jar-glass i:nth-child(3){opacity:0}
.jar.ending .jar-glass i:nth-child(-n+2){animation:none!important;opacity:.72}
.memory-fireflies{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}
.memory-fireflies i{position:absolute;left:50%;top:56%;width:var(--size);height:var(--size);border-radius:50%;background:#fff4ae;box-shadow:0 0 7px 3px rgba(255,232,120,.72),0 0 18px 5px rgba(130,218,190,.26);opacity:0;animation:fireflyEscape var(--duration) ease-in-out var(--delay) forwards}
@keyframes fireflyEscape{0%{transform:translate(0,0) scale(.3);opacity:0}10%{opacity:1}35%{transform:translate(var(--mid-x),var(--mid-y)) scale(1)}68%{opacity:.9}100%{transform:translate(var(--x),var(--y)) scale(.5);opacity:0}}
.memory-ending{position:absolute;inset:0;z-index:5;display:grid;place-content:center;gap:13px;padding:28px;text-align:center;pointer-events:none}
.memory-ending p{max-width:min(86vw,590px);margin:0;opacity:0;transform:translateY(12px);color:#f8fff5;text-shadow:0 2px 18px rgba(10,31,42,.7);font:600 clamp(1.05rem,4.5vw,1.65rem)/1.55 'Playfair Display',serif;transition:opacity 1.4s ease,transform 1.4s ease}
.memory-ending p.shown{opacity:1;transform:none}
.memory-ending strong{display:block;margin-top:8px;color:#fff1ad;font-size:1.16em}
.memory-ending #endingLine3 strong{opacity:0;transform:translateY(8px);transition:opacity 1.2s ease 2s,transform 1.2s ease 2s}
.memory-ending #endingLine3.shown strong{opacity:1;transform:none}
.jar-glass .jar-firefly{width:6px!important;height:6px!important;border-radius:50%;background:#fff3a6;box-shadow:0 0 5px 2px rgba(255,239,145,.9),0 0 13px 4px rgba(117,215,180,.35);opacity:.88;animation:fireflyWander 4.6s ease-in-out infinite!important}
.jar-glass .jar-firefly::before,.jar-glass .jar-firefly::after{content:"";position:absolute;top:1px;width:5px;height:3px;border:1px solid rgba(221,255,245,.8);border-radius:100% 20% 100% 20%;background:rgba(208,255,239,.28);animation:fireflyWings .34s ease-in-out infinite alternate}
.jar-glass .jar-firefly::before{right:4px;transform-origin:right center}.jar-glass .jar-firefly::after{left:4px;transform-origin:left center;transform:scaleX(-1)}
.jar-glass .jar-firefly:nth-child(1){top:49px;left:39px;animation-delay:-1.1s!important}.jar-glass .jar-firefly:nth-child(2){top:116px;left:96px;animation-delay:-2.7s!important}.jar-glass .jar-firefly:nth-child(3){top:72px;left:112px;animation-delay:-.4s!important}.jar-glass .jar-firefly:nth-child(4){top:148px;left:52px;animation-delay:-3.4s!important}
@keyframes fireflyWander{0%,100%{transform:translate(0,0) scale(.8);opacity:.55}25%{transform:translate(13px,-10px) scale(1.12);opacity:1}52%{transform:translate(-5px,8px) scale(.88);opacity:.72}78%{transform:translate(9px,3px) scale(1.04);opacity:.95}}
@keyframes fireflyWings{to{transform:rotate(24deg) scaleX(.72)}}
.memory-jar.ending .jar-firefly:nth-child(-n+2){opacity:.9!important;animation:fireflyWander 4.6s ease-in-out infinite!important}
.memory-jar.ending .jar-firefly:nth-child(n+3){opacity:0!important}

/* The jar is a release, not a disappearance: lights travel from inside the
   glass, across its rim, and only soften once they are at the edge of the sky. */
#fireflyMemory.ending{background:radial-gradient(circle at 50% 45%,rgba(205,244,225,.42),rgba(47,81,94,.46) 78%)}
#fireflyMemory.ending .scene{animation:releaseZoom 7.2s cubic-bezier(.22,1,.36,1) forwards}
#fireflyMemory.ending:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 48%,rgba(255,242,160,.16),transparent 42%);animation:releaseBloom 6.8s ease-out forwards}
.jar.opening{animation:none}
.jar.opening .jar-lid{transition:transform 1.05s cubic-bezier(.22,1,.36,1),filter 1s ease;transform:translate(35px,-54px) rotate(24deg);filter:drop-shadow(0 9px 8px rgba(33,70,67,.2))}
.memory-jar.empty .jar-firefly{opacity:0!important;transition:opacity .7s ease!important}
.memory-jar.ending:not(.empty) .jar-firefly{opacity:.88!important;animation:fireflyWander 4.6s ease-in-out infinite!important}
.release-atmosphere #sparkles i{opacity:.92;filter:brightness(1.35);text-shadow:0 0 18px rgba(255,250,203,.95)}
.release-atmosphere .sky{filter:blur(22px) brightness(1.09)}
.memory-fireflies{z-index:12;overflow:visible}
.released-firefly{position:fixed;width:var(--firefly-size);height:var(--firefly-size);border-radius:50%;background:#fff5b6;pointer-events:none;will-change:left,top,transform,opacity;box-shadow:0 0 5px 2px rgba(255,246,178,.98),0 0 15px 5px rgba(239,204,104,.58),0 0 31px 10px rgba(152,231,194,.2);animation:flightPulse 1.15s ease-in-out infinite alternate}
.released-firefly:before,.released-firefly:after{content:"";position:absolute;top:0;width:calc(var(--firefly-size) * 1.45);height:calc(var(--firefly-size) * .62);border:1px solid rgba(225,255,244,.7);background:rgba(221,255,239,.22);border-radius:100% 20% 100% 20%;animation:releasedWings .24s ease-in-out infinite alternate}
.released-firefly:before{right:70%;transform-origin:right center}.released-firefly:after{left:70%;transform:scaleX(-1);transform-origin:left center}
.firefly-trail{position:absolute;left:50%;top:50%;width:2px;height:2px;border-radius:50%;background:rgba(255,241,167,.85);box-shadow:-8px 4px 4px 1px rgba(255,232,132,.55),-16px 8px 7px 2px rgba(255,232,132,.26),-26px 12px 9px 2px rgba(174,238,208,.12);transform:translate(-50%,-50%)}
.memory-ending{z-index:15}.memory-ending p{transition:opacity 1.8s ease,transform 1.8s ease}
@keyframes flightPulse{to{filter:brightness(1.22);box-shadow:0 0 7px 3px rgba(255,247,183,.98),0 0 22px 7px rgba(239,204,104,.6),0 0 38px 13px rgba(152,231,194,.27)}}
@keyframes releasedWings{to{transform:rotate(28deg) scaleX(.68)}}
@keyframes releaseZoom{to{transform:scale(.982)}}
@keyframes releaseBloom{0%{opacity:0}25%{opacity:1}100%{opacity:.62}}
@media (prefers-reduced-motion:reduce){.released-firefly,#fireflyMemory.ending .scene{animation:none}}

/* The final journal page sits below the untouched jar, so the object remains
   the visual anchor while its meaning is revealed a little at a time. */
.memory-jar-text{transition:opacity .42s ease,transform .42s ease}
.memory-jar-text.fading{opacity:0;transform:translateY(-8px)}
.memory-explanation{position:absolute;z-index:16;top:calc(50% + 156px);bottom:18px;left:50%;width:min(700px,calc(100vw - 36px));overflow:auto;padding:clamp(22px,4vw,38px);border:1px solid rgba(255,255,255,.15);border-radius:24px;background:rgba(255,255,255,.08);box-shadow:0 20px 54px rgba(11,31,43,.24),inset 0 1px rgba(255,255,255,.14);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#f8f8f6;opacity:0;pointer-events:none;transform:translate(-50%,20px);filter:blur(7px);transition:opacity 1s ease,transform 1s cubic-bezier(.22,1,.36,1),filter 1s ease;scrollbar-color:rgba(255,255,255,.35) transparent;scrollbar-width:thin}
.memory-explanation.shown{opacity:1;pointer-events:auto;transform:translate(-50%,0);filter:blur(0)}
.memory-explanation section{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.memory-explanation section+section{margin-top:25px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
.memory-explanation section.shown{opacity:1;transform:none}
.memory-explanation h2{margin:0 0 9px;color:#fffdf2;font:600 clamp(1.2rem,3.8vw,1.48rem)/1.2 'Playfair Display',serif;letter-spacing:.01em}
.memory-explanation h2 span{margin-left:5px}.memory-explanation p{margin:0;color:#f8f8f6;font:400 clamp(.82rem,2.8vw,.97rem)/1.8 Inter,sans-serif}
.memory-explanation::-webkit-scrollbar{width:5px}.memory-explanation::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:99px}
.distant-firefly{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff3ad;opacity:.42;box-shadow:0 0 7px 3px rgba(255,236,140,.7),0 0 18px 5px rgba(132,228,192,.25);animation:distantFloat var(--float-duration) ease-in-out var(--float-delay) infinite alternate}
@keyframes distantFloat{to{transform:translate(var(--drift-x),var(--drift-y)) scale(.72);opacity:.78}}
@media(max-height:720px){.memory-explanation{top:calc(50% + 142px);bottom:12px;padding:20px 22px}.memory-explanation section+section{margin-top:18px;padding-top:18px}}
@media(max-width:420px){.memory-explanation{width:calc(100vw - 28px);top:calc(50% + 145px)}.memory-explanation h2{font-size:1.13rem}.memory-explanation p{line-height:1.7}}

/* One quiet story card at a time. The previous long-form card stays absent
   from the visual flow; each supplied message is revealed by this dialog. */
.memory-explanation{display:none!important}
.memory-modal{position:absolute;z-index:30;inset:0;display:grid;place-items:center;padding:24px;background:rgba(13,28,38,.28);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease,visibility 0s linear .5s}
.memory-modal.visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .5s ease,visibility 0s}
.memory-modal-card{width:min(600px,calc(100vw - 42px));padding:clamp(28px,6vw,48px);border:1px solid rgba(255,255,255,.2);border-radius:24px;background:rgba(255,255,255,.12);box-shadow:0 20px 65px rgba(4,18,27,.36),0 0 34px rgba(222,246,225,.15),inset 0 1px rgba(255,255,255,.18);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#f8f8f6;opacity:0;transform:scale(.95);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.memory-modal.visible .memory-modal-card{opacity:1;transform:scale(1)}
.memory-modal h2{margin:0 0 16px;color:#fffdf4;font:600 clamp(1.55rem,6vw,2.1rem)/1.1 'Playfair Display',serif}.memory-modal p{margin:0;color:#f8f8f6;font:400 clamp(.9rem,3.4vw,1.04rem)/1.8 Inter,sans-serif;white-space:pre-wrap}
.memory-modal button{display:block;margin:28px 0 0 auto;padding:11px 23px;border:1px solid rgba(255,255,255,.32);border-radius:999px;background:rgba(255,255,255,.17);color:#fffdf4;box-shadow:0 7px 18px rgba(12,39,45,.2);font:600 .84rem Inter,sans-serif;transition:transform .2s ease,background .2s ease}.memory-modal button:hover{background:rgba(255,255,255,.28);transform:translateY(-2px)}

/* Reserve clear vertical room for the raised lid without changing the jar's
   styling or motion. This rule is isolated to the Fireflies Jar page. */
#fireflyMemory .scene-label{margin-bottom:72px}
.intro-copy p:empty{min-height:1.2em}

/* Landing copy only: preserve the established palette and typeface while
   giving the gift's three-line hierarchy a closer, more deliberate rhythm. */
.intro-copy{bottom:calc(12vh + 52px)}
.intro-copy p{font-size:.875rem;margin-bottom:5px}
.intro-copy small{font-size:.82rem;margin-top:13px}

/* Letter-only icon color update. */
[data-go="letter"] b,#letter .paper-tulip,#letterModal .paper-tulip{filter:hue-rotate(95deg) saturate(1.45)}

.final-note .final-message{max-width:360px;margin:10px auto 0;font:500 clamp(.72rem,2.6vw,.9rem)/1.65 'Playfair Display',serif}

/* The letter becomes a sequence of full paper pages, never a scrollable wall
   of text. The gift and its existing artwork remain the entry point. */
#final{display:block;overflow:hidden;padding:clamp(20px,4vw,40px)}
#final:not(.active) .final-note,#final:not(.active) .letter-page{pointer-events:none!important}
#final .final-scene{width:min(100%,760px);height:100%;margin:auto;padding:18px;justify-content:center}
#final .small-present{margin:0;flex:none;transform:scale(.72);transform-origin:center bottom;cursor:pointer;transition:transform .25s ease,filter .25s ease}
#final .small-present:not(:disabled):hover{transform:scale(.756);filter:drop-shadow(0 0 18px rgba(255,242,173,.78)) drop-shadow(0 14px 20px rgba(54,98,94,.18))}
#final .small-present:not(:disabled){animation:final-gift-float 4.2s ease-in-out infinite}
#final .small-present.opening{animation:final-gift-center .4s ease-in-out both;cursor:default}
#final .small-present.opened{animation:final-gift-lower .8s 1.1s ease-in-out both}
#final .small-present.opened .lid{z-index:1;transform:translateY(-58px) rotate(-8deg);opacity:.42;transition:transform .5s ease-in-out,opacity .5s ease-in-out}
#final .final-note{position:relative;z-index:6;width:min(100%,650px);height:0;margin:0 auto;overflow:visible;opacity:0;transform:translateY(48px) scale(.94);transform-origin:top center;pointer-events:none;transition:height .01s linear .8s,margin .6s ease-in-out .2s,opacity .8s ease-in-out,transform .8s ease-in-out}
#final .final-note.revealed{height:min(80dvh,680px);margin-top:28px;opacity:1;transform:none;pointer-events:auto}
#final .letter-page{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(34px,6vw,58px) clamp(24px,6vw,56px);border:1px solid rgba(255,255,255,.62);border-radius:18px;background:rgba(255,255,255,.46);box-shadow:0 20px 48px rgba(54,98,94,.13),inset 0 1px rgba(255,255,255,.78);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transform:translateX(46px) rotateY(-5deg) scale(.98);transform-origin:left center;transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
#final .letter-page.active{opacity:1;pointer-events:auto;transform:none}
#final .letter-page.leaving{opacity:0;pointer-events:none;transform:translateX(-46px) rotateY(5deg) scale(.98)}
#final .final-note .scene-label{margin:0 0 30px}
#final .final-note .final-message{max-width:600px;margin:0;color:var(--ink);font:500 clamp(1rem,2.2vw,1.18rem)/1.9 'Playfair Display',serif;text-align:center}
#final .final-note .final-message+.final-message{margin-top:clamp(26px,4vw,38px)}
#final .letter-next{position:absolute;right:clamp(20px,4vw,34px);bottom:clamp(18px,3vw,28px);padding:8px 4px;background:transparent;color:#478576;font:500 .76rem Inter,Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase;transition:transform .25s ease,color .25s ease}
#final .letter-next:hover{color:#276d5e;transform:translateX(4px)}
#final .letter-next span{font-size:1.15em;margin-left:4px}
#final .final-note.complete .letter-page.active{box-shadow:0 20px 48px rgba(54,98,94,.13),0 0 36px rgba(255,236,166,.36),inset 0 1px rgba(255,255,255,.78)}
@keyframes final-gift-float{50%{transform:translateY(-7px) scale(.72)}}
@keyframes final-gift-center{to{transform:translateY(-13px) scale(.72)}}
@keyframes final-gift-lower{to{transform:translateY(8px) scale(.72)}}
@media(max-width:700px){#final .final-scene{width:85%;padding:10px}#final .final-note.revealed{height:76dvh}#final .final-note .final-message{font-size:clamp(.92rem,3.7vw,1.05rem);line-height:1.82}}
@media(max-width:480px){
  #final{padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
  #final .final-scene{width:100%;padding:52px 0 8px;justify-content:flex-start}
  #final .small-present{margin-bottom:-22px;transform:scale(.56)}
  #final .small-present:not(:disabled):hover{transform:scale(.588)}
  #final .small-present.opening{animation:final-gift-center-phone .4s ease-in-out both}
  #final .small-present.opened{animation:final-gift-lower-phone .8s 1.1s ease-in-out both}
  #final .final-note.revealed{height:min(70svh,600px);height:min(70dvh,600px);margin-top:0}
  #final .letter-page{padding:28px 18px 46px}
  #final .final-note .scene-label{margin-bottom:20px}
  #final .final-note .final-message{font-size:clamp(.9rem,3.8vw,1rem);line-height:1.75}
  #final .final-note .final-message+.final-message{margin-top:18px}
  #final .letter-next{right:20px;bottom:16px}
}
@media(max-height:700px) and (max-width:480px){#final .final-scene{padding-top:38px}#final .final-note.revealed{height:66dvh}#final .letter-page{padding-top:22px;padding-bottom:40px}}
@keyframes final-gift-center-phone{to{transform:translateY(-10px) scale(.56)}}
@keyframes final-gift-lower-phone{to{transform:translateY(4px) scale(.56)}}
@media(prefers-reduced-motion:reduce){#final .small-present,#final .small-present.opening,#final .small-present.opened{animation:none}#final .final-note,#final .letter-page{transition:none}}

/* Birthday letter: a fixed paper header with a single, iOS-friendly reading
   area. The modal itself never scrolls, so its controls stay reachable. */
body.letter-reading{overflow:hidden;overscroll-behavior:none}
.letter-modal{padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))!important}
.letter-modal article{
  width:min(600px,92vw)!important;
  height:min(88dvh,760px)!important;
  max-height:88dvh!important;
  margin:0;
  padding:28px!important;
  display:flex;
  flex-direction:column;
  overflow:hidden!important;
  border-radius:22px;
  transform:scale(.96)!important;
  transition:transform 420ms cubic-bezier(.22,1,.36,1)!important;
}
.letter-modal.visible article{transform:scale(1)!important}
.letter-modal:not(.visible) article{transform:scale(.96)!important}
.letter-modal .paper-tulip{position:absolute;top:30px;right:88px;float:none;font-size:1.5rem}
.letter-modal h2{flex:none;margin:0 64px 20px 0!important;font-size:34px!important;line-height:1.16!important}
.letter-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 8px 44px 0;scrollbar-width:none}
.letter-body::-webkit-scrollbar{display:none}
.letter-modal .letter-body p{margin:0;white-space:pre-line;overflow-wrap:anywhere;font:400 18px/1.8 Inter,sans-serif!important;text-align:left}
.letter-modal .letter-body em{display:block;margin-top:32px;color:#4e8e7d;font:600 .9rem 'Playfair Display',serif}
@media(max-width:600px){
  .letter-modal article{height:88dvh!important;max-height:88dvh!important;padding:22px!important;border-radius:20px}
  .letter-modal .paper-tulip{top:24px;right:78px}
  .letter-modal h2{margin:0 56px 18px 0!important;font-size:30px!important}
  .close-letter{top:18px!important;right:18px!important;min-width:44px!important;min-height:44px!important}
  .letter-body{padding:0 4px calc(44px + env(safe-area-inset-bottom)) 0}
  .letter-modal .letter-body p{font-size:19px!important;line-height:1.8!important}
}