.birthday-card{color:#171719;padding:24px 22px;text-align:center}
.birthday-heading{position:relative;margin:0 auto 14px;font-weight:400;line-height:1.1}
.birthday-heading>span:first-child{display:block;font-size:clamp(22px,5vw,30px);font-style:italic;margin-bottom:8px}
.birthday-number{display:block;width:70%;height:180px;object-fit:contain;margin:auto}
.birthday-exclamation{position:absolute;right:9%;bottom:6%;font-size:43px;font-style:italic;color:#b18c42}
.birthday-event{font-size:13px;line-height:1.7;margin:10px 0 0;letter-spacing:.1px}
.divider{color:#a4854a;padding:0 4px}
.birthday-welcome{font-size:20px;font-style:italic;margin:14px 0 4px}
.champagne-art{display:block;width:64px;height:75px;object-fit:contain;margin:0 auto}
:is(.opened,.extracting) .birthday-card{min-height:650px;padding:36px 30px 26px}
:is(.opened,.extracting) .birthday-heading>span:first-child{font-size:34px;margin-bottom:6px}
:is(.opened,.extracting) .birthday-number{width:80%;height:260px}
:is(.opened,.extracting) .birthday-exclamation{font-size:55px;right:4%}
:is(.opened,.extracting) .birthday-event{font-size:17px;line-height:1.9;margin-top:20px}
:is(.opened,.extracting) .birthday-welcome{font-size:27px;margin-top:23px}
:is(.opened,.extracting) .champagne-art{width:95px;height:110px}
:is(.opened,.extracting) .birthday-card .replay{margin-top:18px}
@media(max-width:360px){.birthday-number{height:145px}.birthday-heading>span:first-child{font-size:21px}.birthday-event{font-size:12px}.birthday-welcome{margin-top:10px}.champagne-art{height:58px}:is(.opened,.extracting) .birthday-number{height:220px}:is(.opened,.extracting) .birthday-event{font-size:15px}:is(.opened,.extracting) .birthday-heading>span:first-child{font-size:29px}}
/* Cotton stock with a flush foil print and one centered glass. */
.birthday-card,:is(.opened,.extracting) .birthday-card{background:#f5f3ec url('off-white-paper.webp') center/600px 600px}
.birthday-card:before,.birthday-card:after{border:none}
.opened .scene{width:min(430px,94vw)}
:is(.opened,.extracting) .birthday-card{padding:36px 22px 26px;min-height:630px}
.birthday-event,:is(.opened,.extracting) .birthday-event{display:grid;grid-template-columns:1.15fr auto 1.5fr auto .75fr;align-items:center;gap:6px;font-size:clamp(12px,2.1vw,17px);line-height:1.6;margin:22px auto 0;max-width:650px;letter-spacing:0}
.birthday-event .divider{padding:0}
.birthday-number,:is(.opened,.extracting) .birthday-number{max-width:280px;filter:none}
.champagne-art{width:50px;height:78px;object-fit:contain;margin:8px auto 0}
:is(.opened,.extracting) .champagne-art{width:65px;height:120px;margin:14px auto 0}
@media(max-width:420px){:is(.opened,.extracting) .birthday-card{padding-inline:15px}.birthday-event,:is(.opened,.extracting) .birthday-event{gap:4px;font-size:12px}:is(.opened,.extracting) .birthday-number{height:250px}:is(.opened,.extracting) .birthday-card{min-height:610px}}
/* White satin paper: preserve a fine grain beneath soft reflected light. */
body{background:#fff}
main{background:radial-gradient(ellipse at 40% 25%,#fff 0%,#fdfdfd 65%,#f4f5f6 100%)}
.birthday-card,:is(.opened,.extracting) .birthday-card{background-color:#fff;background-image:linear-gradient(125deg,#ffffffed 0%,#ffffffc4 30%,#ffffffed 47%,#fffffffa 53%,#ffffffcf 67%,#ffffffdc 100%),url('off-white-paper.webp');background-size:100% 100%,600px 600px;box-shadow:inset 0 1px 0 #fff,0 2px 1px #d5d5d5,0 8px 25px #0002}
.birthday-event,:is(.opened,.extracting) .birthday-event{font-family:Arial,sans-serif;font-size:12px;letter-spacing:.25px;line-height:1.75}
.champagne-sparkles{position:relative;width:95px;height:90px;margin:12px auto 0}
.champagne-sparkles .champagne-art,:is(.opened,.extracting) .champagne-sparkles .champagne-art{width:42px;height:80px;margin:0 auto}
.sparkle{position:absolute;color:#bf9b4d;pointer-events:none;font-size:14px;opacity:.6;animation:champagne-twinkle 3.5s ease-in-out infinite}
.sparkle-one{left:13px;top:15px}
.sparkle-two{right:12px;top:31px;font-size:19px;animation-delay:1.2s}
.sparkle-three{left:20px;top:53px;font-size:9px;animation-delay:2.3s}
@keyframes champagne-twinkle{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:.9;transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){.sparkle{animation:none}}
.number-sparkles{position:relative;width:100%;margin:auto}
.number-sparkle-one{left:14%;top:13%;font-size:15px;animation-delay:.6s}
.number-sparkle-two{right:12%;top:44%;font-size:20px;animation-delay:1.7s}
.number-sparkle-three{left:17%;bottom:12%;font-size:10px;animation-delay:2.8s}
.venue-map{color:inherit;text-decoration:underline;text-decoration-color:#b89a58;text-underline-offset:4px;text-decoration-thickness:1px;border-radius:2px}
.venue-map:hover{color:#94742e}
.venue-map:focus-visible{outline:2px solid #b89a58;outline-offset:4px}
/* One extraction, with the complete invitation fitted inside the viewport. */
.invitation-stage{position:fixed;z-index:30}
.opened .invitation-stage .birthday-card{position:absolute;left:0;top:0;width:430px;min-height:630px;height:auto;transform:scale(var(--invitation-fit))!important;transform-origin:0 0;visibility:visible;overflow:visible}
.exit-pocket{pointer-events:none}
.opened main{padding:0;min-height:100svh;overflow:hidden}
.opened .scene{visibility:hidden}

.extracting .birthday-card{width:430px;height:auto;min-height:630px;overflow:visible;transform-origin:0 0}
.invitation-stage{transform-origin:0 0;will-change:transform}
/* Conceal paper below the pocket while leaving the upward exit unobstructed. */
.extracting .scene{clip-path:polygon(-100% -300%,200% -300%,200% 100%,-100% 100%)}
.birthday-event,:is(.opened,.extracting) .birthday-event{font-family:'Roboto Condensed',Arial,sans-serif;font-weight:400;font-size:14px;letter-spacing:.3px}
.sparkle{animation:champagne-twinkle 2.8s ease-in-out infinite}
.number-sparkle-four{right:18%;top:8%;font-size:13px;animation-delay:.9s}
.number-sparkle-five{right:17%;bottom:8%;font-size:10px;animation-delay:1.9s}
.number-sparkle-six{left:10%;top:52%;font-size:17px;animation-delay:2.4s}
@keyframes champagne-twinkle{0%,100%{opacity:.12;transform:scale(.7)}45%{opacity:1;transform:scale(1.12)}65%{opacity:.4;transform:scale(.95)}}
@media(prefers-reduced-motion:reduce){.sparkle{animation:none;opacity:.6}}
/* One brief shimmer per second, staggered across all nine stars. */
.sparkle{animation-name:individual-sparkle;animation-duration:9s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.number-sparkle-one{animation-delay:0s}
.sparkle-one{animation-delay:-1s}
.number-sparkle-two{animation-delay:-2s}
.number-sparkle-four{animation-delay:-3s}
.sparkle-two{animation-delay:-4s}
.number-sparkle-three{animation-delay:-5s}
.number-sparkle-five{animation-delay:-6s}
.sparkle-three{animation-delay:-7s}
.number-sparkle-six{animation-delay:-8s}
@keyframes individual-sparkle{0%,10%,100%{opacity:.72;transform:scale(1)}3%{opacity:.25;transform:scale(.9)}6%{opacity:1;transform:scale(1.15)}}
.birthday-event,:is(.opened,.extracting) .birthday-event{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);text-align:center;justify-items:center}
.birthday-event>span,.birthday-event>.venue-map{text-align:center;max-width:100%}
@media(prefers-reduced-motion:reduce){.sparkle{animation:none;opacity:.6}}
.sparkle{animation-duration:13s}
.number-sparkle-seven{left:7%;top:29%;font-size:12px;animation-delay:-9s}
.number-sparkle-eight{right:5%;top:23%;font-size:17px;animation-delay:-10s}
.number-sparkle-nine{right:9%;bottom:25%;font-size:11px;animation-delay:-11s}
.number-sparkle-ten{left:8%;bottom:22%;font-size:15px;animation-delay:-12s}
@keyframes individual-sparkle{0%,7%,100%{opacity:.72;transform:scale(1)}2%{opacity:.25;transform:scale(.9)}4%{opacity:1;transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){.sparkle{animation:none;opacity:.6}}
.birthday-heading>span:first-child,:is(.opened,.extracting) .birthday-heading>span:first-child{font-family:'Pinyon Script',cursive;font-style:normal;font-weight:400;font-size:38px;line-height:1.35;letter-spacing:0;margin-bottom:6px}

.birthday-heading>span:first-child,:is(.opened,.extracting) .birthday-heading>span:first-child{color:#111111;font-size:39px;line-height:1.45}

/* Seventeen stars: one bright pulse at a time, others remain steadily lit. */
.sparkle{animation-duration:17s}
.number-sparkle-eleven{left:25%;top:5%;font-size:11px;animation-delay:-13s}
.number-sparkle-twelve{right:29%;top:2%;font-size:15px;animation-delay:-14s}
.number-sparkle-thirteen{left:29%;bottom:3%;font-size:13px;animation-delay:-15s}
.number-sparkle-fourteen{right:28%;bottom:2%;font-size:10px;animation-delay:-16s}
@keyframes individual-sparkle{
  0%,5.7%,100%{opacity:.72;transform:scale(1);filter:drop-shadow(0 0 0 transparent)}
  1.5%{opacity:.08;transform:scale(.45);filter:drop-shadow(0 0 0 transparent)}
  3%{opacity:1;transform:scale(1.85);filter:drop-shadow(0 0 3px #e8bb55) drop-shadow(0 0 7px #f3d58499)}
}
@media(prefers-reduced-motion:reduce){.sparkle{animation:none;opacity:.72;filter:none}}

/* Overlapping, staggered gleams: typically two or three active stars. */
.sparkle{animation-duration:6s}
@keyframes individual-sparkle{
  0%,15%,100%{opacity:.72;transform:scale(1);filter:drop-shadow(0 0 0 transparent)}
  4%{opacity:.15;transform:scale(.45);filter:drop-shadow(0 0 0 transparent)}
  9%{opacity:1;transform:scale(1.85);filter:drop-shadow(0 0 3px #e8bb55) drop-shadow(0 0 7px #f3d58499)}
}
.number-sparkle-one{animation-delay:0.000s}
.sparkle-one{animation-delay:-0.353s}
.number-sparkle-two{animation-delay:-0.706s}
.number-sparkle-four{animation-delay:-1.059s}
.sparkle-two{animation-delay:-1.412s}
.number-sparkle-three{animation-delay:-1.765s}
.number-sparkle-five{animation-delay:-2.118s}
.sparkle-three{animation-delay:-2.471s}
.number-sparkle-six{animation-delay:-2.824s}
.number-sparkle-seven{animation-delay:-3.176s}
.number-sparkle-eight{animation-delay:-3.529s}
.number-sparkle-nine{animation-delay:-3.882s}
.number-sparkle-ten{animation-delay:-4.235s}
.number-sparkle-eleven{animation-delay:-4.588s}
.number-sparkle-twelve{animation-delay:-4.941s}
.number-sparkle-thirteen{animation-delay:-5.294s}
.number-sparkle-fourteen{animation-delay:-5.647s}
@media(prefers-reduced-motion:reduce){.sparkle{animation:none;opacity:.72;filter:none}}

/* Additional small gleams around the foil number. */
.number-sparkle-fifteen{left:5%;top:10%;font-size:9px;animation-delay:-0.500s}
.number-sparkle-sixteen{right:6%;top:7%;font-size:10px;animation-delay:-1.500s}
.number-sparkle-seventeen{left:4%;bottom:7%;font-size:11px;animation-delay:-2.500s}
.number-sparkle-eighteen{right:4%;bottom:8%;font-size:13px;animation-delay:-3.500s}
.number-sparkle-nineteen{left:22%;top:35%;font-size:8px;animation-delay:-4.500s}
.number-sparkle-twenty{right:22%;top:58%;font-size:9px;animation-delay:-5.500s}