@font-face{font-family:Fredoka;src:url(fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap}
:root{color-scheme:light;--plum:#4d1946;--pink:#bb115d;--line:#ed9ac5;--paper:#fff9fc;--heading:Fredoka,"Arial Rounded MT Bold",sans-serif}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--plum);font:1rem/1.5 system-ui,sans-serif;background:radial-gradient(ellipse at 8% 6%,#ffc6e4 0,transparent 46%),radial-gradient(ellipse at 91% 2%,#a6e5ff 0,transparent 51%),linear-gradient(#fff3fa,#f8f8ff)}
a{color:#99104e;text-underline-offset:.2em}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #6020a0;outline-offset:4px}
.wrap{max-width:66rem;margin:auto;padding:clamp(1.2rem,4vw,3rem) clamp(1rem,4vw,2.25rem) 0}
.headline{text-align:center;margin:0 auto clamp(1.25rem,3vw,2rem)}
.eyebrow,.subtitle,h1,h2{font-family:var(--heading);font-weight:600}
.eyebrow{color:#91104f;font-size:clamp(1.1rem,3vw,1.5rem);margin:0 0 .25rem}
h1{color:#ad185f;font-size:clamp(2.55rem,8.2vw,6.1rem);letter-spacing:-.045em;line-height:1.02;margin:0;text-shadow:0 3px #fff8fc}
h1 em{font-style:normal;color:#9b3d13}
.subtitle{font-size:clamp(1.15rem,3.2vw,1.85rem);margin:.5rem 0 0}
h2{font-size:1.55rem;line-height:1.1;margin:0 0 .5rem}
.button{display:inline-flex;justify-content:center;align-items:center;justify-self:center;min-height:3rem;padding:.5rem 1.55rem;border:0;border-radius:999px;background:linear-gradient(#d82a79,#aa0b50);box-shadow:0 4px 0 #840d43;color:white;font:600 1.25rem/1.2 var(--heading);text-decoration:none;cursor:pointer;text-align:center}
.button:hover{background:#990a4a}
.button:disabled{opacity:.72;cursor:wait}
.deadline{font-size:.91rem;font-weight:650;margin:1rem 1rem 0;text-align:center}
footer{max-width:66rem;margin:auto;padding:1.25rem 1rem 1.75rem;text-align:center;font-size:.9rem}
.narrow{max-width:44rem}
.narrow h1{font-size:clamp(2.55rem,7.8vw,4.65rem)}
.back{display:inline-block;margin-bottom:.8rem;font-weight:650;font-size:.93rem}
.form-card{border:2px solid var(--line);background:var(--paper);border-radius:1.5rem;padding:clamp(1.1rem,4vw,2rem);box-shadow:0 12px 34px #75254c17}
.form-card h2{margin-bottom:1rem}
label{display:block;font-weight:700;margin-bottom:.35rem}
label span,.hint{font-weight:400}
input{width:100%;border:1px solid #bd799d;background:#fff;color:var(--plum);border-radius:.65rem;padding:.65rem .75rem;min-height:2.9rem;font:inherit}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.fields>div{min-width:0}
fieldset{border:0;border-top:2px dashed #e8b8d0;padding:1rem 0 0;margin:1.2rem 0 1.25rem;min-width:0}
legend{padding:0 .5rem 0 0;font-family:var(--heading);font-size:1.25rem;font-weight:650}
.hint{margin:0;font-size:.9rem}
.notice{background:#ffe4ee;border:1px solid #d888a6;padding:.6rem .75rem;border-radius:.65rem}
.boarding{text-align:center}
.boarding p{max-width:44ch;margin:1rem auto}
.boarding .back{margin:0}
@media(max-width:400px){.fields{grid-template-columns:1fr;gap:.7rem}}
.phone{white-space:nowrap}
.birthday-portrait{display:block;width:min(100%,32rem);height:auto;margin:0 auto 1.25rem;box-shadow:0 12px 34px #75254c17}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.invitation-mockup{position:relative;max-width:1389px;margin-inline:auto}
.invitation-mockup img{display:block;width:100%;height:auto}
/* Match the center and dimensions of the RSVP artwork on the cropped 1389 × 740 image. */
.mockup-rsvp{
  position:absolute;
  left:69.1%;
  top:60%;
  width:24.9%;
  height:10.8%;
  min-height:44px;
  transform:translate(-50%,-50%);
  border-radius:999px;
}

.invitation-mockup{overflow:hidden;overflow:clip}
.mockup-rsvp{z-index:1}
.invitation-sparkle{
  position:absolute;
  left:var(--x);
  top:var(--y);
  color:#fffef0;
  font-size:clamp(1.1rem,2.45vw,2.25rem);
  text-shadow:0 0 2px #7b185e,0 0 5px #da327e,0 0 13px #fff;
  line-height:1;
  opacity:.82;
  pointer-events:none;
}
.invite-revealed .invitation-sparkle{animation:twinkle 1.6s ease-in-out var(--delay) 3}
@keyframes twinkle{
  0%,100%{opacity:.45;transform:scale(.68) rotate(-9deg)}
  50%{opacity:1;transform:scale(1.36) rotate(9deg)}
}
.party-balloon{
  position:absolute;
  top:var(--y);
  display:grid;
  place-items:center;
  width:clamp(44px,9vw,114px);
  height:clamp(44px,11vw,130px);
  max-height:24%;
  padding:0 0 .65rem;
  border:0;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  animation:balloon-arrive 1.7s cubic-bezier(.19,.75,.38,1) var(--delay) both;
}
.party-balloon[hidden]{display:none}
.balloon-left{left:0}
.balloon-right{right:0}
.balloon-left.balloon-inset{left:1.5%}
.balloon-right.balloon-inset{right:1.5%}
.balloon-pink{--balloon-light:#ffd5ed;--balloon-dark:#e74c9e}
.balloon-blue{--balloon-light:#d4faff;--balloon-dark:#4eaedb}
.balloon-lavender{--balloon-light:#eee0ff;--balloon-dark:#a573da}
.balloon-gold{--balloon-light:#fff7bc;--balloon-dark:#eea93a}
.balloon-rose{--balloon-light:#ffe4ea;--balloon-dark:#ee768f}
.balloon-shape{
  position:relative;
  width:79%;
  height:79%;
  border-radius:50% 50% 46% 46% / 43% 43% 57% 57%;
  background:radial-gradient(ellipse at 29% 25%,#fff 0 8%,var(--balloon-light) 19%,var(--balloon-dark) 83%);
  box-shadow:inset 0 0 0 1px #77275935,0 .2rem .65rem #7c39723a;
  transition:transform .28s ease,filter .2s ease;
  pointer-events:none;
}
.balloon-shape::before,.balloon-shape::after{
  content:"";
  position:absolute;
  left:50%;
}
.balloon-shape::before{
  top:98%;
  width:.4rem;
  height:.3rem;
  transform:translateX(-50%);
  background:var(--balloon-dark);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.balloon-shape::after{
  top:calc(98% + .25rem);
  width:.45rem;
  height:clamp(.65rem,1.5vw,1.15rem);
  border-left:1px solid #885074;
  border-radius:50%;
  transform:rotate(12deg);
}
.party-balloon:focus-visible .balloon-shape{filter:brightness(1.14)}
@media (hover:hover){
  .party-balloon:hover .balloon-shape{transform:translateY(-.35rem) rotate(-13deg);filter:brightness(1.14)}
}
.balloon-sparks{
  position:absolute;
  top:10%;
  color:#fff5b1;
  font-size:clamp(1.05rem,2.6vw,2.15rem);
  font-weight:bold;
  white-space:nowrap;
  text-shadow:0 1px 3px #973272;
  opacity:0;
  pointer-events:none;
}
@keyframes balloon-arrive{
  from{opacity:0;transform:translateY(38vh) rotate(-14deg)}
  75%{opacity:1;transform:translateY(-.4rem) rotate(5deg)}
  to{opacity:1;transform:translateY(0) rotate(0)}
}
@media(prefers-reduced-motion:reduce){
  .invite-revealed .invitation-sparkle,.party-balloon{animation:none}
  .balloon-shape{transition:none}
  .party-balloon:hover .balloon-shape{transform:none}
}

.invite-game{margin:1rem auto;text-align:center}

.invite-intro{
  position:fixed;
  inset:0;
  width:100%;
  max-width:none;
  height:100%;
  max-height:none;
  margin:0;
  padding:0;
  overflow:hidden;
  border:0;
  color:var(--plum);
  background:transparent;
}
.invite-intro[open]{display:grid;place-items:center}
.invite-intro::backdrop{background:transparent}
.intro-cloud{
  position:absolute;
  inset-block:0;
  width:50.1%;
  overflow:hidden;
  pointer-events:none;
}
.intro-cloud::before{
  content:"";
  position:absolute;
  inset-block:0;
  width:200%;
  background:#fac8e7 url(cloud-reveal.webp) center / cover no-repeat;
}
.intro-cloud-left,.intro-cloud-left::before{left:0}
.intro-cloud-right,.intro-cloud-right::before{right:0}
.intro-copy{
  position:relative;
  z-index:1;
  width:min(92vw,44rem);
  display:grid;
  justify-items:center;
  padding:1rem .75rem 1.6rem;
  text-align:center;
}
.intro-copy h2{
  position:relative;
  display:inline-block;
  margin:0 0 1.5rem;
  color:#9d1b62;
  font-size:clamp(1.75rem,5.5vw,3.5rem);
  line-height:.94;
  letter-spacing:-.035em;
  text-shadow:0 3px 0 #ffc1df,0 7px 15px #b6487b50;
  -webkit-text-stroke:5px #fff6fc;
  paint-order:stroke fill;
  transform:rotate(-4deg);
}
.intro-copy strong{
  display:block;
  color:#cf186d;
  font-size:clamp(3.8rem,11vw,8rem);
  font-weight:700;
  -webkit-text-stroke:clamp(5px,1vw,11px) #fff6fc;
}
.intro-copy h2::before,.intro-copy h2::after{
  content:"✦";
  position:absolute;
  bottom:.2em;
  color:#e79821;
  font-size:.66em;
  text-shadow:0 2px 0 #ffb0d6;
  -webkit-text-stroke:3px #fff6fc;
}
.intro-copy h2::before{left:-.8em;transform:rotate(-13deg)}
.intro-copy h2::after{right:-.8em;bottom:.85em;transform:rotate(13deg)}
.invite-intro.opening .intro-copy{animation:intro-fade .58s ease both;pointer-events:none}
.invite-intro.opening .intro-cloud-left{animation:clouds-left 1.85s cubic-bezier(.62,0,.35,1) both}
.invite-intro.opening .intro-cloud-right{animation:clouds-right 1.85s cubic-bezier(.62,0,.35,1) both}
@keyframes intro-fade{to{opacity:0;transform:translateY(-.5rem)}}
@keyframes clouds-left{
  32%{opacity:1}
  to{transform:translateX(-102%);opacity:0}
}
@keyframes clouds-right{
  32%{opacity:1}
  to{transform:translateX(102%);opacity:0}
}
@media(max-aspect-ratio:4/5){
  .intro-cloud::before{width:100%;background-size:auto 100%}
  .intro-cloud-left::before{
    background-image:linear-gradient(to left,#fbd4ed 0%,transparent 48%),url(cloud-reveal-left.webp);
    background-position:left center;
  }
  .intro-cloud-right::before{
    background-image:linear-gradient(to right,#fbd4ed 0%,transparent 48%),url(cloud-reveal-right.webp);
    background-position:right center;
  }
}