@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Manrope:wght@400;600;800&family=Playfair+Display:ital,wght@0,600;0,800;1,600&display=swap');

:root { color-scheme: dark; --ink:#fff8fd; --muted:#eadcf5; --gold:#ffe45c; --pink:#ff9dca; --mint:#6df3d3; --violet:#351790; }
*{box-sizing:border-box} body{margin:0;background:#180947;color:var(--ink);font-family:Manrope,Arial,sans-serif} button{font:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.age{margin:28px 0 34px;font-family:Bungee,Manrope,sans-serif!important;background:linear-gradient(110deg,#ffe45c,#ff9dca,#6df3d3,#ffe45c);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:age-pop .9s cubic-bezier(.2,1.4,.4,1) both,age-shine 4s linear infinite}.slide-inner:has(.age) .eyebrow{margin-bottom:28px}.slide-inner:has(.age) .copy{margin-top:30px}.age-orbit{position:relative;height:0;width:360px;margin:auto}.star{position:absolute;left:50%;top:50%;color:#fff6bd;font-style:normal;animation:orbit 4s ease-in-out infinite}.s1{transform:translate(-150px,-55px)}.s2{transform:translate(-115px,-130px)}.s3{transform:translate(-35px,-160px)}.s4{transform:translate(65px,-145px)}.s5{transform:translate(130px,-75px)}.s6{transform:translate(150px,10px)}.s7{transform:translate(100px,90px)}.s8{transform:translate(15px,125px)}.s9{transform:translate(-85px,105px)}.s10{transform:translate(-150px,35px)}@keyframes age-pop{from{transform:scale(.35) rotate(-8deg);opacity:0}to{transform:scale(1);opacity:1}}@keyframes age-shine{to{background-position:300% 0}}@keyframes orbit{50%{filter:brightness(1.5);opacity:.55}}@media (prefers-reduced-motion:reduce){.star{animation:none}}
.scene{min-height:100svh;display:grid;place-items:center;overflow:hidden;position:relative;padding:24px;background:radial-gradient(circle at 12% 16%,#7f42d7 0,transparent 25%),radial-gradient(circle at 88% 83%,#ff84be 0,transparent 27%),linear-gradient(140deg,#20106e,#b43dc4 55%,#ff8dba)}.scene:before,.scene:after{content:"";position:absolute;border-radius:50%;border:1px solid #ffffff26}.scene:before{width:55vmax;height:55vmax;right:-33vmax;top:-28vmax}.scene:after{width:42vmax;height:42vmax;left:-28vmax;bottom:-25vmax}.story{width:min(100%,760px);position:relative;z-index:1;text-align:center}.progress{display:flex;gap:7px;margin:0 auto 34px;max-width:390px}.progress span{height:3px;flex:1;border-radius:10px;background:#fff5}.progress .active{background:#fff}.eyebrow{margin:0 0 15px;text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:800;color:var(--muted)}.slide{min-height:390px;display:grid;place-items:center;animation:enter .45s ease both}.slide-inner{max-width:650px}.age{font:800 clamp(130px,32vw,270px)/.72 Manrope,sans-serif;letter-spacing:0;color:var(--gold);text-shadow:0 10px 30px #35127766}.title{margin:0;font:600 clamp(44px,9vw,82px)/.93 "Playfair Display",Georgia,serif}.subtitle{margin:18px 0 0;font-size:clamp(18px,3vw,25px)}.copy{max-width:590px;margin:24px auto 0;font-size:clamp(17px,2.5vw,21px);line-height:1.55;color:#fff9}.gold .title{color:var(--gold)}.mint .title{color:var(--mint)}.pink .title{color:#ffd0e5}.controls{display:flex;justify-content:center;gap:12px;margin-top:20px}.control,.cake-button,.envelope{border:1px solid #fff4;background:#ffffff20;color:#fff;border-radius:999px;padding:12px 18px;cursor:pointer}.control:disabled{opacity:.35;cursor:not-allowed}.control:focus-visible,.cake-button:focus-visible,.envelope:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.cake-button{margin-top:32px;padding:18px 28px;background:#ffffff1c}.cake{position:relative;width:178px;height:105px;margin:0 auto 12px;border-radius:14px 14px 25px 25px;background:linear-gradient(#ffcee2 0 28%,#ef77ae 29% 62%,#ffb3d4 63%);box-shadow:inset 0 -12px #d95d99,0 14px 28px #260f6b55}.cake:before{content:"";position:absolute;width:195px;height:17px;left:-9px;top:29px;border-radius:50%;background:#fff3b6}.candles{display:flex;justify-content:center;gap:23px;position:absolute;left:0;right:0;top:-44px}.candle{width:10px;height:45px;border-radius:4px;background:repeating-linear-gradient(135deg,#fff 0 5px,#76eed6 5px 10px)}.flame{display:block;width:14px;height:22px;margin:-20px -2px 0;border-radius:50% 50% 50% 50%;background:var(--gold);box-shadow:0 0 18px var(--gold);animation:flicker .9s infinite alternate}.is-blown .flame{opacity:0;transform:translateY(7px)}.confirmation{font:600 clamp(25px,5vw,42px)/1.1 "Playfair Display",Georgia,serif;color:var(--gold);animation:enter .4s ease}.confetti{font-size:30px;letter-spacing:12px;margin:18px 0;color:var(--gold)}.letter-wrap{min-height:100svh;display:grid;place-items:center;padding:24px}.letter-stage{width:min(100%,680px);text-align:center}.envelope{width:min(100%,360px);height:220px;border-radius:18px;background:linear-gradient(145deg,#ffb4d8,#e55f9c);font:600 22px "Playfair Display",Georgia,serif;box-shadow:0 20px 40px #250d6b55}.envelope span{display:block;margin-top:12px;font:400 14px Manrope,Arial,sans-serif}.letter{background:#fff9f2;color:#3a2942;border-radius:18px;padding:clamp(28px,7vw,60px);text-align:left;box-shadow:0 20px 45px #1d0a5555;animation:enter .5s ease}.letter h2{margin:0 0 20px;font:600 37px "Playfair Display",Georgia,serif}.letter p{line-height:1.7;font-size:17px}.signature{margin-top:28px;font:600 25px "Playfair Display",Georgia,serif;color:#a42b72}@keyframes enter{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}@keyframes flicker{to{transform:scale(.82) translateY(2px)}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.age-wrap{position:relative;display:inline-block}
.age-wrap .age{position:relative;z-index:2;color:transparent}
.age-wrap .age-orbit{position:absolute;z-index:1;inset:50% auto auto 50%;width:360px;height:360px;margin:0;transform:translate(-50%,-50%);pointer-events:none;animation:orbit-ring 18s linear infinite}
.age-wrap .star{font-size:clamp(17px,3vw,25px);text-shadow:0 0 14px currentColor}
@keyframes orbit-ring{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(max-width:480px){
  .age-wrap .age-orbit{width:280px;height:280px}
  .age-wrap .s1{transform:translate(-120px,-44px)}.age-wrap .s2{transform:translate(-92px,-104px)}.age-wrap .s3{transform:translate(-28px,-128px)}.age-wrap .s4{transform:translate(52px,-116px)}.age-wrap .s5{transform:translate(104px,-60px)}.age-wrap .s6{transform:translate(120px,8px)}.age-wrap .s7{transform:translate(80px,72px)}.age-wrap .s8{transform:translate(12px,100px)}.age-wrap .s9{transform:translate(-68px,84px)}.age-wrap .s10{transform:translate(-120px,28px)}
}
@media(prefers-reduced-motion:reduce){.age-wrap .age-orbit{animation:none}}

/* Contextual slide decorations */
.slide{position:relative;isolation:isolate}
.slide-inner{position:relative;z-index:2;width:100%}
.slide-decorations{position:absolute;z-index:0;inset:-54px -7vw;pointer-events:none}
.decor-item{position:absolute;display:grid;place-items:center;width:58px;height:58px;border:1px solid #ffffff1f;border-radius:50%;font-style:normal;font-size:clamp(22px,4vw,34px);color:#fff;opacity:.72;text-shadow:0 0 18px currentColor;box-shadow:inset 0 0 24px #ffffff0d;animation:decor-float 5.8s ease-in-out infinite}
.decor-item span{display:block;animation:decor-turn 8s ease-in-out infinite}
.decor-item-1{left:1%;top:8%;animation-delay:-1.4s}.decor-item-2{right:2%;top:5%;animation-delay:-3.2s}.decor-item-3{left:7%;bottom:7%;animation-delay:-4.6s}.decor-item-4{right:5%;bottom:9%;animation-delay:-.8s}.decor-item-5{left:-2%;top:48%;animation-delay:-2.1s}.decor-item-6{right:-1%;top:44%;animation-delay:-5s}
.slide-decorations:before,.slide-decorations:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.decor-health{color:var(--mint)}.decor-health .decor-item{color:#9affdf;background:#43e6c213}.decor-health:before{width:210px;height:210px;left:0;top:24%;border:1px solid #85ffe55c;box-shadow:0 0 50px #62f4d828;animation:energy-ring 4s ease-out infinite}.decor-health:after{width:105px;height:105px;right:8%;bottom:7%;background:radial-gradient(circle,#baffec35,transparent 67%);animation:soft-pulse 3s ease-in-out infinite}
.decor-love .decor-item{color:#ffc3de;background:#ff76b518;border-color:#ffc2dd38}.decor-love:before{width:180px;height:180px;right:1%;top:16%;background:radial-gradient(circle,#ff9eca2b,transparent 68%);animation:soft-pulse 2.8s ease-in-out infinite}.decor-love .decor-item span{animation:heart-beat 2.4s ease-in-out infinite}
.decor-dreams .decor-item{color:#fff4a7;background:#6954d322}.decor-dreams:before{width:150px;height:150px;left:4%;top:11%;border:1px solid #fff5a42e;box-shadow:0 0 60px #d5c8ff20}.decor-dreams:after{width:140px;height:1px;right:4%;top:28%;background:linear-gradient(90deg,transparent,#fff8bdc7,transparent);transform:rotate(-18deg);animation:shooting-trail 4.8s ease-in-out infinite}.decor-dreams .decor-item-2{animation:dream-shoot 5.5s ease-in-out infinite}
.decor-success .decor-item{color:#9cffe7;background:#3bd8bc17}.decor-success:before{width:54%;height:42%;left:23%;bottom:1%;border-top:2px dashed #c4fff05c;border-radius:50%;transform:rotate(-7deg)}.decor-success .decor-item-1{animation:plane-route 6.5s ease-in-out infinite}.decor-success .decor-item-4 span{animation:coin-flip 3s linear infinite}
.decor-joy .decor-item{color:#ffe3f0;background:#ff84bd1c;border-radius:35% 65% 45% 55%}.decor-joy:before{width:230px;height:230px;right:0;top:4%;background:radial-gradient(circle,#ffcf6e1e,transparent 70%);animation:soft-pulse 2.5s ease-in-out infinite}.decor-joy .decor-item{animation:joy-dance 4.5s ease-in-out infinite}
.decor-radiance .decor-item{color:#fff19b;background:#fff0a413}.decor-radiance:before{width:250px;height:250px;left:50%;top:50%;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,#fff4a512 0 5deg,transparent 5deg 20deg);animation:radiance-spin 22s linear infinite}.decor-radiance:after{width:155px;height:155px;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #fff3ac32;box-shadow:0 0 80px #fff0a31e}.decor-radiance .decor-item span{animation:radiance-twinkle 2.4s ease-in-out infinite}
.decor-wish .decor-item{color:#fff2a5;background:#ffcf6b12}.decor-wish:before{width:230px;height:230px;left:50%;top:48%;transform:translate(-50%,-50%);background:radial-gradient(circle,#ffde7b20,transparent 67%);animation:soft-pulse 2.2s ease-in-out infinite}.decor-wish .decor-item span{animation:radiance-twinkle 2s ease-in-out infinite}

@keyframes decor-float{0%,100%{transform:translate3d(0,0,0) rotate(-4deg)}50%{transform:translate3d(0,-17px,0) rotate(6deg)}}
@keyframes decor-turn{50%{transform:rotate(12deg) scale(1.13)}}
@keyframes energy-ring{0%{transform:scale(.55);opacity:.8}100%{transform:scale(1.25);opacity:0}}
@keyframes soft-pulse{50%{transform:scale(1.14);opacity:.55}}
@keyframes heart-beat{0%,100%{transform:scale(1)}14%{transform:scale(1.24)}28%{transform:scale(1)}}
@keyframes shooting-trail{0%,55%,100%{opacity:0;transform:translate(45px,-18px) rotate(-18deg)}65%{opacity:1}88%{opacity:0;transform:translate(-70px,34px) rotate(-18deg)}}
@keyframes dream-shoot{0%,45%,100%{transform:translate(0,0);opacity:.25}70%{transform:translate(-85px,58px);opacity:1}}
@keyframes plane-route{0%,100%{transform:translate(-8px,14px) rotate(-8deg)}50%{transform:translate(56px,-30px) rotate(7deg)}}
@keyframes coin-flip{50%{transform:rotateY(180deg) scale(.82)}}
@keyframes joy-dance{0%,100%{transform:translateY(0) rotate(-8deg)}35%{transform:translateY(-16px) rotate(10deg)}70%{transform:translateY(-4px) rotate(-2deg)}}
@keyframes radiance-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes radiance-twinkle{50%{transform:scale(1.35) rotate(14deg);filter:brightness(1.5)}}

/* Cake ritual */
.slide-wish{min-height:570px}
.slide-wish .slide-inner{display:flex;flex-direction:column;align-items:center;max-width:700px}
.slide-wish .eyebrow{margin-bottom:14px}
.slide-wish .title{font-size:clamp(46px,8.5vw,72px)}
.slide-wish .copy{margin-top:18px;line-height:1.45}
.wish-ritual{position:relative;width:min(100%,470px);margin:25px auto 0}
.wish-ritual .cake-button{display:flex;flex-direction:column;align-items:center;width:100%;margin:0;padding:48px 16px 4px;border:0;background:transparent;border-radius:30px;color:#fff;cursor:pointer}
.wish-ritual .cake-button:focus-visible{outline:3px solid var(--gold);outline-offset:6px}
.cake-stage{position:relative;display:block;flex:none;width:230px;height:148px;margin:0 auto;transition:transform .25s ease}
.cake-button:hover .cake-stage{transform:translateY(-5px) scale(1.02)}
.wish-ritual .cake{position:absolute;display:block;width:190px;height:110px;left:50%;bottom:20px;margin:0;transform:translateX(-50%);border-radius:17px 17px 28px 28px;background:linear-gradient(#ffd5e7 0 28%,#ef77ae 29% 61%,#ffb3d4 62%);box-shadow:inset 0 -13px #d95d99,0 17px 30px #260f6b5c}
.wish-ritual .cake:before{content:"";position:absolute;z-index:2;width:207px;height:19px;left:-9px;top:30px;border-radius:50%;background:#fff2ad;box-shadow:0 4px 0 #f5c76b}
.cake-icing{position:absolute;z-index:3;left:15px;right:15px;top:8px;height:31px;border-radius:50%;background:linear-gradient(90deg,#fff8e5,#ffe6f1,#fff4c5)}
.cake-icing:before,.cake-icing:after{content:"";position:absolute;top:18px;width:17px;height:23px;border-radius:0 0 12px 12px;background:#ffe9f2}.cake-icing:before{left:30px}.cake-icing:after{right:42px;height:16px}
.cake-plate{position:absolute;left:50%;bottom:7px;width:224px;height:17px;transform:translateX(-50%);border-radius:50%;background:linear-gradient(90deg,#f6b9dc,#fff7dc,#aef4e4);box-shadow:0 9px 18px #26106448}
.wish-ritual .candles{z-index:4;display:flex;justify-content:center;gap:25px;position:absolute;left:0;right:0;top:-43px;height:45px}
.wish-ritual .candle{position:relative;display:block;flex:none;width:11px;height:46px;border-radius:5px;background:repeating-linear-gradient(135deg,#fff 0 5px,#76eed6 5px 10px);box-shadow:0 2px 5px #45256c38}
.wish-ritual .flame{position:absolute;display:block;width:15px;height:23px;left:50%;top:-22px;margin:0;transform:translateX(-50%);border-radius:60% 40% 60% 40%;background:linear-gradient(#fff8b3,#ffe45c 48%,#ff8b3d);box-shadow:0 0 18px var(--gold);animation:flicker .85s ease-in-out infinite alternate;transform-origin:50% 100%}
.smoke{display:none}
.cake-instruction{display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin-top:15px;padding:11px 22px;border:1px solid #ffffff40;border-radius:999px;background:#ffffff17;box-shadow:0 12px 28px #28105a2b;font-weight:600;transition:background .2s ease,transform .2s ease}
.cake-button:hover .cake-instruction{background:#ffffff28;transform:translateY(-2px)}
.wish-ritual.is-blown{display:flex;flex-direction:column;align-items:center;min-height:313px;padding-top:48px}
.is-blown .cake-stage{margin:0 auto}
.is-blown .flame{opacity:0;animation:candle-out .32s ease-out forwards}
.is-blown .smoke{position:absolute;display:block;width:12px;height:28px;left:50%;top:-34px;margin-left:-6px;border-radius:50%;background:radial-gradient(ellipse at center,#fff9 0,#eadcf56b 45%,transparent 72%);filter:blur(1px);opacity:0;animation:smoke-rise 1.7s ease-out .12s forwards}
.is-blown .confirmation{position:relative;margin:19px auto 0;max-width:460px;font:600 clamp(26px,5vw,40px)/1.08 "Playfair Display",Georgia,serif;color:var(--gold);animation:confirmation-pop .52s cubic-bezier(.2,1.35,.35,1) both}
.transition-hint{margin:13px auto 0;color:#fffbd;font-size:14px;animation:enter .55s .22s ease both}
.wish-burst{position:absolute;z-index:-1;width:12px;height:12px;left:50%;top:115px;pointer-events:none}
.burst{--burst-x:0px;--burst-y:-120px;position:absolute;width:9px;height:9px;left:0;top:0;border-radius:50%;background:var(--gold);box-shadow:0 0 12px currentColor;animation:wish-burst 1.35s cubic-bezier(.18,.75,.35,1) both}
.burst:nth-child(3n+2){border-radius:2px;background:var(--mint)}.burst:nth-child(3n){background:var(--pink)}
.burst-1{--burst-x:-132px;--burst-y:-70px}.burst-2{--burst-x:-82px;--burst-y:-126px}.burst-3{--burst-x:-18px;--burst-y:-145px}.burst-4{--burst-x:61px;--burst-y:-132px}.burst-5{--burst-x:128px;--burst-y:-78px}.burst-6{--burst-x:145px;--burst-y:-8px}.burst-7{--burst-x:119px;--burst-y:65px}.burst-8{--burst-x:63px;--burst-y:108px}.burst-9{--burst-x:-12px;--burst-y:122px}.burst-10{--burst-x:-82px;--burst-y:97px}.burst-11{--burst-x:-137px;--burst-y:48px}.burst-12{--burst-x:-150px;--burst-y:-16px}
@keyframes candle-out{0%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(8px) scale(.35)}}
@keyframes smoke-rise{0%{opacity:0;transform:translateY(8px) scale(.55)}25%{opacity:.75}100%{opacity:0;transform:translateY(-42px) translateX(9px) scale(1.65)}}
@keyframes confirmation-pop{from{opacity:0;transform:translateY(15px) scale(.85)}to{opacity:1;transform:none}}
@keyframes wish-burst{0%{opacity:0;transform:translate(0,0) scale(.35) rotate(0)}18%{opacity:1}100%{opacity:0;transform:translate(var(--burst-x),var(--burst-y)) scale(1.2) rotate(230deg)}}

@media(max-width:600px){
  .scene:has(.slide:not(.slide-wish)){padding:clamp(32px,5svh,46px) 22px}
  .scene:has(.slide:not(.slide-wish)) .progress{margin-bottom:clamp(40px,5svh,46px)}
  .slide:not(.slide-wish){min-height:clamp(410px,55svh,475px)}
  .slide:not(.slide-wish):not(.slide-intro) .eyebrow{margin-bottom:20px}
  .slide:not(.slide-wish):not(.slide-intro) .copy{margin-top:30px}
  .slide:not(.slide-wish)+.controls{margin-top:30px}
  .slide-decorations{inset:-32px -14px}.decor-item{width:44px;height:44px;font-size:22px;opacity:.58}
  .slide-wish{min-height:540px}.slide-wish .title{font-size:clamp(42px,13vw,58px)}.slide-wish .copy{max-width:320px;margin-top:15px;font-size:16px}.wish-ritual{margin-top:18px}.wish-ritual .cake-button{padding-top:45px}.cake-stage{width:210px;height:137px}.wish-ritual .cake{width:174px;height:101px}.wish-ritual .cake:before{width:189px}.cake-plate{width:207px}.cake-instruction{max-width:290px;font-size:14px}.wish-ritual.is-blown{min-height:295px;padding-top:44px}.is-blown .confirmation{max-width:325px}.transition-hint{max-width:300px}
}
@media(max-width:420px){.decor-item-5,.decor-item-6{display:none}}

/* Wish-to-letter transition */
.letter-transition{position:fixed;z-index:20;inset:0;display:grid;place-items:center;visibility:hidden;opacity:0;pointer-events:none;overflow:hidden}
.transition-glow{position:absolute;left:50%;top:50%;width:22vmin;height:22vmin;border-radius:50%;transform:translate(-50%,-50%) scale(.2);background:radial-gradient(circle,#fffbd9 0 10%,#ffe96fbd 28%,#ff9ec67d 50%,transparent 72%);filter:blur(2px);opacity:0}
.transition-envelope{position:relative;z-index:3;display:grid;place-items:center;width:174px;height:108px;border:1px solid #fff9e8bd;border-radius:13px;background:linear-gradient(145deg,#ffd5e8,#f47eb5);box-shadow:0 0 0 1px #ffffff21,0 0 70px #fff3a661,0 18px 45px #240c605c;opacity:0;transform:translateY(42px) scale(.25) rotate(-7deg)}
.transition-envelope:before,.transition-envelope:after{content:"";position:absolute;inset:0;border-radius:12px}.transition-envelope:before{background:linear-gradient(32deg,transparent 49.3%,#fff4c866 50% 50.8%,transparent 51.4%),linear-gradient(-32deg,transparent 49.3%,#fff4c866 50% 50.8%,transparent 51.4%)}.transition-envelope:after{clip-path:polygon(0 0,50% 54%,100% 0);background:linear-gradient(145deg,#ffeaf3,#f8a6cb)}
.transition-envelope i{position:relative;z-index:2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#b72e74;color:#fff6d2;font-style:normal;box-shadow:0 0 18px #fff1a770}
.transition-spark{--spark-x:0px;--spark-y:0px;position:absolute;z-index:2;left:50%;top:50%;width:9px;height:9px;border-radius:50%;background:#fff3a1;box-shadow:0 0 14px #fff1a8;opacity:0;transform:translate(var(--spark-x),var(--spark-y)) scale(1.2)}
.transition-spark:nth-of-type(3n){border-radius:2px;background:var(--mint)}.transition-spark:nth-of-type(3n+1){background:var(--pink)}
.transition-spark-1{--spark-x:-42vw;--spark-y:-32vh}.transition-spark-2{--spark-x:-21vw;--spark-y:-41vh}.transition-spark-3{--spark-x:5vw;--spark-y:-45vh}.transition-spark-4{--spark-x:33vw;--spark-y:-31vh}.transition-spark-5{--spark-x:44vw;--spark-y:-4vh}.transition-spark-6{--spark-x:36vw;--spark-y:34vh}.transition-spark-7{--spark-x:10vw;--spark-y:44vh}.transition-spark-8{--spark-x:-18vw;--spark-y:40vh}.transition-spark-9{--spark-x:-40vw;--spark-y:23vh}.transition-spark-10{--spark-x:-47vw;--spark-y:-7vh}
.scene.is-transitioning .letter-transition{visibility:visible;animation:transition-layer-in 2s ease both}
.scene.is-transitioning .transition-glow{animation:transition-glow-in 2s cubic-bezier(.2,.8,.35,1) both}
.scene.is-transitioning .transition-envelope{animation:transition-envelope-form 1.25s .62s cubic-bezier(.18,1.35,.35,1) both}
.scene.is-transitioning .transition-spark{animation:transition-spark-gather 1.42s cubic-bezier(.35,.02,.62,1) both}
.scene.is-transitioning .transition-spark:nth-of-type(even){animation-delay:.12s}
.scene.is-transitioning .progress,.scene.is-transitioning .slide-decorations,.scene.is-transitioning .slide-inner>.eyebrow,.scene.is-transitioning .slide-inner>.title,.scene.is-transitioning .slide-inner>.copy,.scene.is-transitioning .wish-ritual>.cake-stage,.scene.is-transitioning .wish-ritual>.wish-burst,.scene.is-transitioning .wish-ritual>.confirmation,.scene.is-transitioning .wish-ritual>.transition-hint{animation:wish-scene-exit 1.58s ease-in both}
.letter-scene{animation:letter-background-in .65s ease both}
.letter-scene .envelope{animation:envelope-arrive .72s cubic-bezier(.18,1.25,.32,1) both}
@keyframes wish-scene-exit{0%{opacity:1;filter:blur(0);transform:scale(1)}70%{opacity:.18}100%{opacity:0;filter:blur(8px);transform:scale(.88)}}
@keyframes transition-layer-in{0%{opacity:0}22%,100%{opacity:1}}
@keyframes transition-spark-gather{0%{opacity:0;transform:translate(var(--spark-x),var(--spark-y)) scale(.4)}18%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translate(0,0) scale(1.6)}}
@keyframes transition-glow-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.12)}65%{opacity:1;transform:translate(-50%,-50%) scale(3.2)}100%{opacity:.65;transform:translate(-50%,-50%) scale(4.2)}}
@keyframes transition-envelope-form{0%{opacity:0;transform:translateY(42px) scale(.25) rotate(-7deg)}70%{opacity:1;transform:translateY(-5px) scale(1.04) rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes letter-background-in{from{opacity:.4}to{opacity:1}}
@keyframes envelope-arrive{0%{opacity:0;transform:translateY(45px) scale(.78) rotate(-3deg)}70%{opacity:1;transform:translateY(-7px) scale(1.025) rotate(.6deg)}100%{opacity:1;transform:none}}

@media(max-width:480px){
  .transition-envelope{width:150px;height:94px}.transition-envelope i{width:31px;height:31px}.transition-spark{width:7px;height:7px}
}

/* Letter scene decorations */
.letter-stage{position:relative;z-index:1}
.letter-scene .envelope,.letter-scene .letter{position:relative;z-index:2}
.letter-scene .envelope{box-shadow:0 0 0 1px #ffffff1c,0 20px 40px #250d6b55,0 0 70px #ffdba331}
.letter-decorations{position:absolute;z-index:0;inset:-26vh -14vw;pointer-events:none}
.letter-decorations:before{content:"";position:absolute;left:50%;top:50%;width:370px;height:370px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#ffd9e729,transparent 68%);animation:letter-aura 4.8s ease-in-out infinite}
.letter-decor-item{position:absolute;display:grid;place-items:center;width:52px;height:52px;border:1px solid #ffffff24;border-radius:50%;background:#ffffff0d;color:#fff1ba;font-style:normal;font-size:clamp(21px,4vw,31px);opacity:.74;text-shadow:0 0 16px currentColor;box-shadow:inset 0 0 20px #ffffff0b;animation:letter-float 6s ease-in-out infinite}
.letter-decor-item span{display:block;animation:letter-twinkle 3s ease-in-out infinite}
.letter-decor-item-1{left:4%;top:8%;animation-delay:-1s}.letter-decor-item-2{right:7%;top:5%;animation-delay:-3.4s}.letter-decor-item-3{left:11%;bottom:5%;animation-delay:-4.8s}.letter-decor-item-4{right:3%;bottom:11%;animation-delay:-2.2s}.letter-decor-item-5{left:-1%;top:48%;animation-delay:-5.1s}.letter-decor-item-6{right:-2%;top:43%;animation-delay:-.7s}.letter-decor-item-7{left:28%;top:0;animation-delay:-2.7s}.letter-decor-item-8{right:27%;bottom:-2%;animation-delay:-4.1s}
.letter-decorations-closed .letter-decor-item:nth-child(odd){color:#ffd0e6}.letter-decorations-closed .letter-decor-item:nth-child(even){color:#fff1a8}
.letter-decorations-open{inset:-12vh -10vw}.letter-decorations-open .letter-decor-item{opacity:.56;transform:scale(.88)}
.paper-ornament{position:absolute;z-index:0;display:flex;gap:8px;align-items:center;color:#bd4f86;font-style:normal;opacity:.48;pointer-events:none}.paper-ornament span{display:block;text-shadow:0 0 12px #ef98bd70;animation:paper-sparkle 3.4s ease-in-out infinite}.paper-ornament span:nth-child(2){font-size:14px;animation-delay:-1.1s}.paper-ornament span:nth-child(3){font-size:11px;animation-delay:-2.2s}
.paper-ornament-top-left{left:18px;top:17px;padding:8px 18px 18px 8px;border-left:1px solid #bd4f8652;border-top:1px solid #bd4f8652;border-radius:14px 0 0 0}
.paper-ornament-bottom-right{right:18px;bottom:17px;padding:18px 8px 8px 18px;border-right:1px solid #bd4f8652;border-bottom:1px solid #bd4f8652;border-radius:0 0 14px 0}
.letter>h2,.letter>p{position:relative;z-index:1}
.letter h2{font-size:clamp(30px,5vw,42px);line-height:1.16;color:#7f285e;text-wrap:balance}
.letter strong{font-weight:800;color:#a42b72}
.letter-lines{display:block;margin:4px 0;padding:18px 22px;border-left:3px solid #d86aa1;border-radius:0 15px 15px 0;background:linear-gradient(90deg,#f8d9e771,transparent);font-family:"Playfair Display",Georgia,serif;font-size:19px;line-height:1.75;color:#6d3154}
.letter .signature{margin-top:36px;font-size:clamp(24px,4vw,30px);line-height:1.25;text-align:right}
@keyframes letter-aura{50%{opacity:.55;transform:translate(-50%,-50%) scale(1.12)}}
@keyframes letter-float{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-19px) rotate(7deg)}}
@keyframes letter-twinkle{50%{transform:scale(1.28) rotate(10deg);filter:brightness(1.4)}}
@keyframes paper-sparkle{50%{opacity:.45;transform:translateY(-3px) scale(1.15)}}

@media(max-width:600px){
  .letter-decorations{inset:-18vh -18px}.letter-decor-item{width:43px;height:43px;font-size:21px;opacity:.6}.letter-decorations-open{inset:-8vh -12px}.paper-ornament{opacity:.34}.paper-ornament-top-left{left:10px;top:10px}.paper-ornament-bottom-right{right:10px;bottom:10px}.letter h2{font-size:30px;padding-top:14px}.letter p{font-size:16px;line-height:1.65}.letter-lines{margin-inline:-5px;padding:15px 17px;font-size:18px}.letter .signature{text-align:left}
}
@media(max-width:420px){.letter-decor-item-6,.letter-decor-item-7,.letter-decor-item-8{display:none}}