@font-face{font-family:'Birthday Script';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/hero/great-vibes.ttf') format('truetype')}

/* All selectors are scoped to the opening screen. Chapter styles stay intact. */
#invitation.birthday-hero{display:block;max-width:none;min-height:0;padding:0;margin:0;overflow:clip}
#invitation.birthday-hero>.invitation-note{width:min(650px,85.6%);margin-left:auto;margin-right:auto}
.birthday-stage{--pointer-x:0px;--pointer-y:0px;position:relative;isolation:isolate;height:clamp(930px,66vw,1060px);min-height:930px;overflow:hidden;background:radial-gradient(ellipse at 50% 25%,#fff4f1 0,#fff0efb8 27%,#f5c8d766 57%,transparent 75%),radial-gradient(ellipse at 51% 90%,#fff2ce 0,#f4bbcaaa 22%,transparent 55%),linear-gradient(120deg,#dca0b9,#f6ccda 40%,#e5a0b9)}
.birthday-stage:before{content:'';position:absolute;z-index:0;inset:65% 0 0;background:radial-gradient(ellipse at 50% 0,#fff8dd80,transparent 64%),repeating-linear-gradient(165deg,transparent 0 80px,#fff2f121 81px 82px,transparent 83px 160px),linear-gradient(0deg,#e3a0b8b3,#f7cad8a6 70%,transparent)}
.birthday-stage:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 33%,#fff1eb66,transparent 55%);box-shadow:inset 0 0 140px #9e3c6721}
.birthday-definitions{position:absolute;overflow:hidden}
.birthday-copy{position:relative;z-index:8;text-align:center;max-width:980px;padding:20px 24px 0;margin:0 auto}
.birthday-date{position:relative;display:table;margin:0 auto 2px;color:#9b2853;font:italic 500 clamp(32px,2.7vw,40px)/1.35 Georgia,serif;letter-spacing:1px}
.birthday-date:before,.birthday-date:after{content:'';position:absolute;top:55%;width:68px;height:1px;background:linear-gradient(90deg,transparent,#bc5774)}
.birthday-date:before{right:calc(100% + 15px)}.birthday-date:after{left:calc(100% + 15px);transform:rotate(180deg)}
#invitation .birthday-title{position:relative;font-family:'Birthday Script',Georgia,serif;font-size:clamp(70px,6.5vw,96px);font-style:normal;font-weight:400;line-height:1.03;letter-spacing:0;margin:10px 0 19px;min-height:2.06em;color:#a42958;text-shadow:0 2px 0 #fff4ed,0 5px 22px #fdf4ed99;white-space:normal}
.birthday-title>span{display:block;white-space:nowrap}.birthday-title>span+span{font-size:.82em;margin-top:5px}
.birthday-crown{position:absolute;width:90px;height:75px;color:#bb4d77;top:75px;right:calc(50% - 385px);transform:rotate(16deg)}
.birthday-name-ribbon{position:relative;display:table;margin:0 auto;min-width:410px;padding:0 50px;background:linear-gradient(180deg,#f8c3d6,#ee9fbc 50%,#f5bed0);border-top:1px solid #ffe8eb;border-bottom:1px solid #d789a3;border-radius:50% 50% 8% 8% / 10% 10% 7% 7%;box-shadow:0 7px 13px #b64d7321,inset 0 4px 8px #ffecedaa;transform:rotate(-1deg)}
.birthday-name-ribbon:before,.birthday-name-ribbon:after{content:'';position:absolute;z-index:-1;width:61px;height:85%;top:20%;background:linear-gradient(135deg,#dd86a6,#f5bad0 60%,#b95e82);clip-path:polygon(0 0,100% 6%,87% 51%,100% 100%,0 95%)}
.birthday-name-ribbon:before{left:-40px;transform:rotate(5deg)}.birthday-name-ribbon:after{right:-40px;transform:scaleX(-1) rotate(5deg)}
.birthday-name{font:italic 500 clamp(52px,4.7vw,72px)/1.2 Georgia,serif;letter-spacing:-1.5px;color:#822145;text-shadow:0 1px #ffe7ec;padding:4px 0 9px}
.birthday-description{max-width:790px;margin:32px auto 0;color:#7b2848;font-family:var(--sans);font-size:clamp(22px,1.65vw,26px);font-weight:500;line-height:1.9;text-wrap:pretty}
.birthday-description>span{display:block}.birthday-description>span+span{margin-top:1px}
#invitation .birthday-cta{position:relative;font-family:var(--sans);font-size:clamp(20px,1.6vw,24px);font-weight:700;line-height:1.6;min-height:66px;min-width:370px;max-width:100%;border:1.5px solid #e9ba86;border-radius:999px;padding:13px 35px;margin-top:22px;color:#fff9f4;background:linear-gradient(175deg,#ed73a0 0,#d34377 25%,#ae2558 88%);box-shadow:0 0 0 3px #fff2db2b,0 10px 30px #ad395a33,inset 0 2px 4px #ffdeed8c;transition:transform .25s,box-shadow .25s;white-space:normal}
#invitation .birthday-cta:before{content:'';position:absolute;inset:4px 12px auto;height:40%;border-radius:100%;background:linear-gradient(#ffe5ed45,transparent);pointer-events:none}
#invitation .birthday-cta:hover{transform:translateY(-3px);box-shadow:0 0 0 4px #fff1d861,0 14px 35px #ad395a45,inset 0 2px 4px #ffdeed8c}
#invitation .birthday-cta:disabled{cursor:wait;transform:none}
#invitation .birthday-cta:focus-visible,.birthday-present:focus-visible{outline:3px solid #7f2545;outline-offset:7px}
.birthday-atmosphere,.birthday-ribbons,.birthday-balloons,.birthday-petals,.birthday-sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.birthday-atmosphere{z-index:0}.birthday-halo{position:absolute;border-radius:50%;animation:birthday-ambient 10s ease-in-out infinite alternate}
.halo-rose{inset:-25% 20% 30% -30%;background:radial-gradient(ellipse,#f8dbf380,transparent 67%)}.halo-gold{inset:35% -20% -30% 10%;background:radial-gradient(ellipse,#fff1cf80,transparent 65%);animation-delay:-5s}
.birthday-ribbons{z-index:2}.birthday-ribbon{position:absolute;width:300px;height:350px;animation:birthday-satin-sway 9s ease-in-out infinite alternate;transform-origin:50% 0;filter:drop-shadow(5px 10px 8px #913a6021)}
.ribbon-left{left:-90px;top:-100px;rotate:22deg}.ribbon-right{right:-78px;top:-155px;rotate:-40deg;animation-delay:-4s}
.birthday-balloons{z-index:2}.birthday-balloon{position:absolute;width:120px;height:195px;animation:birthday-balloon-float 7s ease-in-out infinite alternate;filter:drop-shadow(4px 9px 8px #ad537a21)}
.balloon-one{left:12%;top:16%;rotate:-12deg}.balloon-two{right:9%;top:13%;width:95px;rotate:13deg;animation-delay:-3s;opacity:.85}.balloon-three{left:23%;top:-65px;width:70px;rotate:16deg;opacity:.6;animation-delay:-5s}
.birthday-petals{z-index:3}.birthday-petal{position:absolute;top:0;left:var(--left);width:var(--size);height:calc(var(--size) * 1.5);border-radius:80% 20% 70% 22%;background:radial-gradient(ellipse at 30% 24%,#ffe5ed,#ec93b6 60%,#bf4e7b);box-shadow:inset 1px 1px 2px #fff0f499,0 3px 5px #b1496d14;opacity:.6;animation:birthday-petal-drift var(--duration) linear infinite;animation-delay:var(--delay)}
.birthday-sparkles{z-index:4}.birthday-spark{position:absolute;left:var(--left);top:var(--top);width:var(--size);height:var(--size);background:radial-gradient(circle,#fff9e3,#fff0c1 45%,transparent 70%);opacity:.8;animation:birthday-twinkle var(--duration) ease-in-out infinite alternate;animation-delay:var(--delay)}
.birthday-spark:before,.birthday-spark:after{content:'';position:absolute;background:#fff4d6;left:48%;top:-25%;width:1px;height:150%;box-shadow:0 0 6px #fffce6}.birthday-spark:after{rotate:90deg}
.birthday-parallax{transform:translate3d(calc(var(--pointer-x) * var(--depth,.5)),calc(var(--pointer-y) * var(--depth,.5)),0)}
.birthday-roses{--depth:.6;position:absolute;z-index:5;bottom:-44px;left:-155px;width:clamp(470px,38vw,620px);pointer-events:none}
.birthday-roses img{display:block;width:100%;height:auto;filter:drop-shadow(4px 12px 15px #9c3c6929)}
.birthday-cake{--depth:-.4;position:absolute;z-index:5;bottom:68px;right:-80px;width:clamp(350px,30vw,470px);pointer-events:none;direction:ltr}
.birthday-cake>img{display:block;width:100%;height:auto;filter:drop-shadow(0 13px 13px #a24b6a29)}
.birthday-candles{position:absolute;inset:0}.birthday-candle{position:absolute;left:var(--x);top:var(--y);width:8px;height:clamp(42px,4vw,61px);transform:translate(-50%,-100%);border-radius:3px;background:repeating-linear-gradient(150deg,#fff5e9 0 6px,#e799b1 7px 10px);box-shadow:1px 0 2px #c16b9055}
.birthday-candle:before{content:'';position:absolute;left:3px;top:-5px;width:1px;height:5px;background:#986571}
.birthday-candle:after{content:'';position:absolute;left:-2px;top:-26px;width:12px;height:23px;background:radial-gradient(ellipse at 50% 80%,#fffde3,#ffedbc 45%,#eda973 80%);border-radius:70% 40% 60% 50%;box-shadow:0 0 19px 5px #fff0b870;animation:birthday-flame 1.8s ease-in-out infinite alternate;transform-origin:50% 100%;animation-delay:var(--delay)}
.birthday-light-trail{position:absolute;z-index:4;bottom:0;left:50%;transform:translateX(-50%);width:min(1150px,100%);height:385px;pointer-events:none;filter:drop-shadow(0 0 5px #fff3ce);opacity:.9}
.birthday-light-trail path:first-child{stroke-dasharray:80 3;animation:birthday-light-flow 18s linear infinite}
.birthday-present-wrap{position:absolute;z-index:7;width:clamp(490px,37vw,610px);aspect-ratio:800/533;left:50%;bottom:9px;transform:translateX(-50%);direction:ltr}
.birthday-gift-glow{position:absolute;inset:38% -10% -10%;background:radial-gradient(ellipse,#fff5d975,#fff4e350 27%,transparent 67%);animation:birthday-ambient 6s ease-in-out infinite alternate}
.birthday-present{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:20px;background:transparent;cursor:pointer;isolation:isolate;animation:birthday-present-float 6s ease-in-out infinite;filter:drop-shadow(0 12px 12px #a44d7224);-webkit-tap-highlight-color:transparent}
.birthday-present>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.birthday-present-base{clip-path:polygon(0 57%,80% 59%,94% 44%,100% 42%,100% 100%,0 100%);z-index:2}
.birthday-present-lid{clip-path:polygon(0 0,100% 0,100% 42%,94% 44%,80% 59%,0 57%);z-index:4;transform-origin:50% 55%;transition:transform 1.1s cubic-bezier(.2,.75,.2,1),opacity 1.1s}
.birthday-present-inside{position:absolute;z-index:1;left:8%;right:8%;top:52%;height:15%;background:radial-gradient(ellipse,#a84b6c,#d37c98 60%,#f1adbf);border:2px solid #f7c7d5;border-radius:15%;transform:skewY(1deg);opacity:0;transition:opacity .4s}
.birthday-present-letter{position:absolute;z-index:3;left:42%;top:47%;width:17%;height:32%;background:linear-gradient(120deg,#fff9ef,#fce4e8);border:1px solid #e9b5c3;border-radius:5px;color:#bd547c;font:46px/1.7 Georgia,serif;box-shadow:0 4px 18px #9d335929;opacity:0;transform:rotate(-7deg);transition:transform 1s .2s,opacity .6s .15s}
.birthday-opening-sparkles{position:absolute;inset:0;z-index:6;pointer-events:none}.birthday-opening-sparkles>i{position:absolute;left:50%;top:52%;width:5px;height:5px;border-radius:50%;background:#fff2cf;box-shadow:0 0 7px 2px #fff4d3;opacity:0}
.birthday-hero.hero-opening .birthday-present,.universe-open .birthday-hero .birthday-present{animation:none}
.birthday-hero.hero-opening .birthday-present-lid,.universe-open .birthday-hero .birthday-present-lid{transform:translate(-12%,-34%) rotate(-14deg);opacity:.88}
.birthday-hero.hero-opening .birthday-present-inside,.universe-open .birthday-hero .birthday-present-inside{opacity:1}
.birthday-hero.hero-opening .birthday-present-letter,.universe-open .birthday-hero .birthday-present-letter{opacity:1;transform:translateY(-78%) rotate(5deg)}
.birthday-hero.hero-opening .birthday-opening-sparkles>i{animation:birthday-opening-burst 1.15s ease-out both;animation-delay:var(--delay)}
.birthday-envelope{position:absolute;z-index:6;bottom:24px;right:9%;width:190px;height:100px;background:linear-gradient(145deg,#fff0e9,#efb5c9);border:1px solid #dca1b7;box-shadow:3px 9px 16px #aa547821;transform:rotate(-9deg);pointer-events:none}
.birthday-envelope:before{content:'';position:absolute;inset:0;background:linear-gradient(145deg,#ffdce5,#f2bfce);clip-path:polygon(0 0,100% 0,50% 60%);border-top:1px solid #fff9ef}
.birthday-envelope>span{position:absolute;left:41%;top:33%;width:39px;height:30px;line-height:29px;text-align:center;background:linear-gradient(#d77694,#ad315a);border:2px solid #e797ac;border-radius:50%;font-family:Georgia,serif;color:#ffe2e8;font-size:26px;box-shadow:0 3px 4px #a0406044}
.birthday-hero.hero-paused .birthday-stage *,.birthday-hero.hero-paused .birthday-stage *:before,.birthday-hero.hero-paused .birthday-stage *:after{animation-play-state:paused!important}

@keyframes birthday-ambient{from{opacity:.55;transform:scale(.96)}to{opacity:1;transform:scale(1.04)}}
@keyframes birthday-balloon-float{from{transform:translate3d(0,0,0) rotate(-3deg)}to{transform:translate3d(9px,-17px,0) rotate(4deg)}}
@keyframes birthday-satin-sway{from{transform:rotate(-3deg) translateY(0)}to{transform:rotate(4deg) translateY(10px)}}
@keyframes birthday-petal-drift{0%{transform:translate3d(0,-70px,0) rotate(0);opacity:0}8%{opacity:.65}90%{opacity:.55}100%{transform:translate3d(var(--drift),1090px,0) rotate(430deg);opacity:0}}
@keyframes birthday-twinkle{from{opacity:.18;transform:scale(.6)}to{opacity:.85;transform:scale(1.1)}}
@keyframes birthday-present-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(0)}}
@keyframes birthday-flame{from{transform:rotate(-5deg) scale(.93)}to{transform:rotate(5deg) scale(1.04)}}
@keyframes birthday-light-flow{to{stroke-dashoffset:-498}}
@keyframes birthday-opening-burst{0%{opacity:0;transform:translate(0,0) scale(.3)}15%{opacity:1}100%{opacity:0;transform:translate(var(--burst-x),var(--burst-y)) scale(.4)}}

@media(min-width:1700px){.birthday-copy{padding-top:30px}.birthday-description{margin-top:40px}.birthday-present-wrap{bottom:18px}.birthday-roses{left:-45px}.birthday-cake{right:-20px}}
@media(min-width:701px) and (max-width:1150px){.birthday-stage{height:1010px;min-height:1010px}.birthday-copy{padding-top:24px}.birthday-crown{right:calc(50% - 310px);width:70px;top:75px}#invitation .birthday-title{font-size:76px}.birthday-description{max-width:calc(100% - 110px);font-size:22px;line-height:1.8}.birthday-name-ribbon{min-width:360px}.birthday-name{font-size:58px}.birthday-roses{width:320px;left:-120px;bottom:-20px}.birthday-cake{width:290px;right:-110px;bottom:125px}.birthday-present-wrap{width:500px}.birthday-envelope{right:3%;width:150px;height:85px;bottom:20px}.birthday-balloon{width:95px}.balloon-one{left:3%;top:17%}.balloon-two{right:1%;top:18%;width:75px}}
@media(max-width:700px){
  .birthday-stage{height:auto;min-height:900px;padding-bottom:330px}
  .birthday-copy{padding:22px 18px 0;max-width:520px}
  .birthday-date{font-size:31px;margin-bottom:5px}.birthday-date:before,.birthday-date:after{width:42px}
  #invitation .birthday-title{font-size:clamp(43px,12.6vw,65px);line-height:1.08;min-height:2.16em;margin:12px 0 20px;letter-spacing:0}
  .birthday-crown{width:40px;height:30px;right:10%;top:28px;rotate:4deg}
  .birthday-name-ribbon{min-width:0;width:75%;padding:0 14px}.birthday-name-ribbon:before,.birthday-name-ribbon:after{width:40px}.birthday-name-ribbon:before{left:-25px}.birthday-name-ribbon:after{right:-25px}
  .birthday-name{font-size:clamp(43px,12vw,58px);line-height:1.25;padding:4px 0 7px}
  .birthday-description{font-size:19px;line-height:1.85;max-width:440px;margin-top:29px}.birthday-description>span+span{margin-top:8px}
  #invitation .birthday-cta{font-size:20px;min-width:0;width:auto;min-height:60px;padding:13px 25px;margin-top:23px}
  .birthday-ribbon{width:165px;height:195px}.ribbon-left{left:-85px;top:-50px}.ribbon-right{right:-78px;top:-78px}
  .birthday-balloon{width:65px;height:120px}.balloon-one{left:-15px;top:52%;opacity:.72}.balloon-two{right:-15px;top:56%;width:57px;opacity:.65}.balloon-three{left:22%;top:-50px;width:45px}
  .birthday-roses{width:230px;left:-105px;bottom:-32px}
  .birthday-cake{width:210px;right:-75px;bottom:82px}
  .birthday-candle{width:5px;height:36px}.birthday-candle:after{width:8px;height:16px;top:-19px;left:-1px;box-shadow:0 0 10px 3px #fff0b870}.birthday-candle:before{left:2px}
  .birthday-present-wrap{width:min(350px,93%);bottom:13px}
  .birthday-present-letter{font-size:29px}.birthday-envelope{width:115px;height:62px;bottom:16px;right:-16px;rotate:5deg;z-index:5}.birthday-envelope>span{width:26px;height:23px;line-height:20px;font-size:21px;border-width:1px}
  .birthday-light-trail{width:185%;height:290px;bottom:0}.birthday-petal{opacity:.4}.birthday-stage:after{box-shadow:inset 0 0 70px #9e3c6719}
}
@media(max-width:1100px){#invitation.birthday-hero>.invitation-note{width:min(650px,88%)}}
@media(max-width:760px){#invitation.birthday-hero>.invitation-note{width:min(650px,86%)}}
@media(max-width:360px){.birthday-stage{min-height:900px;padding-bottom:330px}.birthday-copy{padding-left:16px;padding-right:16px}.birthday-description{font-size:18px}.birthday-crown{right:5%;width:34px}.birthday-roses{width:200px;left:-100px}.birthday-cake{width:180px;right:-65px;bottom:60px}#invitation .birthday-cta{font-size:19px;padding-left:22px;padding-right:22px}.birthday-present-wrap{bottom:14px}#invitation.birthday-hero>.invitation-note{width:90%}}
@media(prefers-reduced-motion:reduce){.birthday-stage *,.birthday-stage *:before,.birthday-stage *:after{animation:none!important;transition:none!important}.birthday-parallax{transform:none}.birthday-petals{display:none}}