:root {
  color-scheme: light;
  --cream: #fff7f0;
  --paper: #fffdfa;
  --ink: #5e4b4e;
  --muted: #8f7e82;
  --pink: #ed94ae;
  --pink-dark: #cc6684;
  --blue: #a8d9ef;
  --lilac: #c8b8ed;
  --yellow: #f6d985;
  --beige: #f1dfca;
  --display: "Fredoka", sans-serif;
  --body: "Nunito", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--body); }
body.intro-open { overflow: hidden; }
button, input { font: inherit; }
a { color: inherit; }
.tag { display: inline-block; padding: 9px 15px; color: var(--pink-dark); border: 1px solid rgba(204,102,132,.22); border-radius: 999px; background: rgba(255,255,255,.7); font-size: .7rem; font-weight: 900; letter-spacing: .1em; }
.intro { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; overflow: hidden; background: #fdf4ee; transition: opacity .7s ease, visibility .7s ease; }
.intro.is-leaving { opacity: 0; visibility: hidden; }
.intro__art, .intro__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__art { object-fit: cover; object-position: center 62%; }
.intro__veil { background: linear-gradient(0deg, rgba(255,247,240,.56), rgba(255,247,240,.28)), radial-gradient(ellipse at center, rgba(255,255,255,.28), transparent 64%); }
.intro__card { position: relative; z-index: 2; width: min(420px, calc(100% - 34px)); padding: clamp(27px, 7vw, 42px) 25px 30px; border: 2px solid rgba(255,255,255,.9); border-radius: 32px; background: rgba(255,253,250,.88); box-shadow: 0 20px 70px rgba(146,108,119,.2), inset 0 0 0 1px rgba(237,148,174,.13); text-align: center; backdrop-filter: blur(9px); }
.intro__cat { display: grid; width: 60px; height: 60px; place-items: center; margin: 20px auto 4px; border-radius: 50%; background: #ffe6ed; font-size: 2rem; transform: rotate(-7deg); }
.intro h1 { margin: 11px 0 6px; color: var(--ink); font: 600 clamp(3.3rem, 13vw, 4.6rem)/.91 var(--display); }
.intro h1 span { color: var(--pink-dark); }
.intro__card > p { margin: 13px 0 22px; color: var(--muted); font-size: .97rem; font-weight: 800; }
.intro small { display: block; margin-top: 17px; color: #a59296; font-size: .65rem; font-weight: 800; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 24px; padding: 0 21px; color: #fff; border: 0; border-radius: 999px; background: var(--pink); box-shadow: 0 5px 0 #d87d99, 0 10px 20px rgba(204,102,132,.2); font-size: .76rem; font-weight: 900; letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #d87d99, 0 13px 23px rgba(204,102,132,.23); }
.button b { font-size: 1.1rem; }
.button--soft { color: #695875; background: var(--lilac); box-shadow: 0 5px 0 #ad9bd5, 0 10px 20px rgba(121,93,168,.14); }
.button--send { color: #fff; background: var(--pink-dark); box-shadow: 0 5px 0 #ad536e, 0 10px 20px rgba(173,83,110,.18); }
.floaty { position: absolute; z-index: 1; display: block; user-select: none; pointer-events: none; animation: float 5s ease-in-out infinite; }
.floaty--paw { top: 18%; left: 12%; color: var(--pink); font-size: clamp(2.5rem, 6vw, 4rem); }
.floaty--heart { right: 12%; top: 23%; color: #dd91b1; font: 600 clamp(3rem, 6vw, 5rem) var(--display); animation-delay: -2s; }
.floaty--star { right: 16%; bottom: 15%; color: #e5bd58; font-size: clamp(2rem, 5vw, 3rem); animation-delay: -1s; }
.intro__note { position: absolute; right: 23px; bottom: 20px; color: #997e81; font-size: .55rem; font-weight: 900; letter-spacing: .17em; }
.music { position: fixed; z-index: 50; top: 16px; right: 16px; display: grid; width: 48px; height: 48px; place-items: center; color: var(--pink-dark); border: 1px solid rgba(255,255,255,.9); border-radius: 50%; background: rgba(255,253,250,.88); box-shadow: 0 5px 18px rgba(103,83,89,.13); cursor: pointer; }
.music span { font-size: 1.3rem; }
.music.is-playing span { animation: music-bop .6s ease-in-out infinite alternate; }
.hero { position: relative; min-height: min(870px, 100svh); display: flex; align-items: center; overflow: hidden; background: #e6f3fa; }
.hero__art, .hero__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__art { object-fit: cover; object-position: center 61%; }
.hero__veil { background: linear-gradient(90deg, rgba(255,249,242,.97) 0%, rgba(255,249,242,.90) 35%, rgba(255,249,242,.35) 73%, rgba(255,249,242,.08)); }
.hero__content { position: relative; z-index: 2; width: min(720px, 92%); padding: 100px clamp(24px, 9vw, 130px); }
.hero__date { margin: 33px 0 11px; color: #7eaabd; font-size: .69rem; font-weight: 900; letter-spacing: .18em; }
.hero h1 { margin: 0; color: var(--ink); font: 600 clamp(4.7rem, 13vw, 9rem)/.79 var(--display); letter-spacing: -.035em; }
.hero h1 span { color: var(--pink-dark); }
.hero h1 strong { display: inline-grid; width: .93em; aspect-ratio: 1; place-items: center; margin-left: .05em; color: #6d5d91; border-radius: 50%; background: #ddcff7; font-size: .85em; vertical-align: -.04em; }
.hero__copy { margin: 27px 0 24px; color: #75666b; font-size: clamp(1rem, 2.2vw, 1.2rem); font-weight: 700; line-height: 1.65; }
.hero__spark { position: absolute; z-index: 2; color: var(--pink); font-size: 3rem; animation: twinkle 3s ease-in-out infinite; }
.hero__spark--one { top: 16%; right: 13%; color: #e5bd58; }
.hero__spark--two { top: 40%; right: 8%; color: #d58caf; animation-delay: -1.1s; }
.hero__sticker { position: absolute; right: 12%; bottom: 13%; display: grid; width: 92px; height: 92px; place-content: center; color: #fff; border: 4px solid rgba(255,255,255,.75); border-radius: 50%; background: var(--lilac); box-shadow: 0 7px 18px rgba(107,86,137,.18); text-align: center; transform: rotate(12deg); }
.hero__sticker span { font: 600 1.3rem var(--display); }
.hero__sticker b { font-size: 1rem; }
.section { position: relative; padding: clamp(78px, 10vw, 132px) clamp(24px, 9vw, 130px); }
.welcome { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(30px, 9vw, 125px); align-items: center; background: var(--paper); }
.welcome__intro { max-width: 600px; }
.section h2 { margin: 20px 0; color: var(--ink); font: 600 clamp(3rem, 7vw, 5.4rem)/.98 var(--display); letter-spacing: -.02em; }
.section h2 em { color: var(--pink-dark); font-style: normal; }
.welcome__intro > p { max-width: 530px; color: #807177; font-size: 1rem; font-weight: 700; line-height: 1.9; }
.paw-divider { margin-top: 28px; color: #dda0b4; font-size: 1.2rem; }
.party-card { padding: clamp(25px, 5vw, 43px); border: 1px solid #f5e8e9; border-radius: 28px; background: #fff; box-shadow: 0 15px 50px rgba(118,91,104,.08); }
.party-card__kicker { color: var(--pink-dark); font-size: .75rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.calendar { display: grid; justify-items: center; gap: 1px; margin: 24px 0; padding: 23px; border: 1px dashed #e9c7d1; border-radius: 20px; background: #fff8fa; }
.calendar span { color: #8e789e; font-size: .72rem; font-weight: 900; letter-spacing: .18em; }
.calendar strong { color: var(--pink-dark); font: 600 6.4rem/.9 var(--display); }
.calendar small { margin-top: 7px; color: #8c7b84; font-size: .62rem; font-weight: 900; letter-spacing: .12em; }
.party-card__time, .party-card__place { display: flex; align-items: center; gap: 15px; padding: 13px 0; }
.party-card__time > span, .party-card__place > span { display: grid; width: 42px; height: 42px; place-items: center; color: #7da6bc; border-radius: 50%; background: #eaf6fb; font-size: 1.45rem; }
.party-card__place > span { color: #8b78ad; background: #f0ebfa; }
.party-card__place .venue-logo { width: 128px; height: auto; flex: 0 0 auto; filter: drop-shadow(0 2px 4px rgba(126,85,125,.13)); }
.party-card__time div, .party-card__place div { display: grid; gap: 3px; }
.party-card__time small, .party-card__place small { color: #a28f96; font-size: .58rem; font-weight: 900; letter-spacing: .14em; }
.party-card__time strong, .party-card__place strong { color: var(--ink); font-size: .9rem; font-weight: 900; }
.party-card .button { width: 100%; margin-top: 15px; }
.rsvp { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(35px, 9vw, 120px); align-items: center; background: #e9f5fb; }
.rsvp__decoration { position: relative; display: grid; min-height: 350px; place-items: center; overflow: hidden; border: 1px solid rgba(126,170,189,.27); border-radius: 40% 60% 58% 42% / 45% 43% 57% 55%; background: #d9edf5; }
.rsvp__decoration::before, .rsvp__decoration::after { position: absolute; width: 75%; aspect-ratio: 1; border: 1px solid rgba(126,170,189,.28); border-radius: 50%; content: ""; }
.rsvp__decoration::after { width: 55%; }
.rsvp__decoration > span { position: absolute; top: 12%; right: 17%; color: var(--pink); font: 500 4rem var(--display); }
.rsvp__kitten { position: relative; z-index: 1; width: min(70%, 260px); max-height: 285px; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(114,87,98,.14)); animation: kitty-bob 4s ease-in-out infinite; }
.rsvp__decoration small { position: absolute; bottom: 15%; left: 50%; color: #7397a7; font-size: .62rem; font-weight: 900; letter-spacing: .17em; transform: translateX(-50%); }
.rsvp__content { max-width: 630px; }
.rsvp__content > p { margin: 0 0 23px; color: #807177; font-weight: 700; line-height: 1.7; }
.form { display: grid; gap: 10px; padding: clamp(20px, 4vw, 33px); border: 1px solid #dceaf0; border-radius: 23px; background: rgba(255,255,255,.86); }
.form > label, .form legend { margin-top: 7px; color: #7a6b72; font-size: .65rem; font-weight: 900; letter-spacing: .08em; }
.form input[type="text"], .form input[type="number"] { width: 100%; min-height: 49px; padding: 0 14px; color: var(--ink); border: 1px solid #e7dbe0; border-radius: 13px; background: #fffafc; outline: none; }
.form input:focus { border-color: #d78da7; box-shadow: 0 0 0 3px rgba(237,148,174,.15); }
.form fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 10px 0 2px; padding: 0; border: 0; }
.form legend { grid-column: 1/-1; margin-bottom: 5px; }
.choice input { position: absolute; opacity: 0; }
.choice span { display: grid; min-height: 45px; place-items: center; padding: 8px; color: #806c74; border: 1px solid #e6d9e0; border-radius: 999px; background: #fff; font-size: .68rem; font-weight: 900; cursor: pointer; }
.choice input:checked + span { color: #9b536c; border-color: #e8a5b8; background: #fff0f4; }
.form__error { min-height: 17px; margin: 0; color: #a63d59; font-size: .75rem; font-weight: 800; }
.form .button { justify-self: start; }
footer { display: grid; justify-items: center; gap: 10px; padding: 50px 20px 38px; background: #fffaf7; text-align: center; }
.footer__paw { font-size: 1.7rem; }
footer strong { color: var(--ink); font: 600 1.8rem var(--display); }
footer strong em { color: var(--pink-dark); font-style: normal; }
footer > span:nth-last-child(2) { color: #9b8a8e; font-size: .75rem; font-weight: 800; }
.footer__hearts { margin-top: 8px; color: #d7a2bb; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-16px) rotate(8deg); } }
@keyframes twinkle { 0%, 100% { opacity: .55; transform: scale(.92) rotate(-8deg); } 50% { opacity: 1; transform: scale(1.08) rotate(8deg); } }
@keyframes music-bop { to { transform: rotate(13deg) scale(1.18); } }
@keyframes kitty-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@media (max-width: 760px) {
  .intro__art { object-position: center 60%; }
  .intro__veil { background: linear-gradient(0deg, rgba(255,247,240,.73), rgba(255,247,240,.36)); }
  .floaty--paw { left: 6%; top: 12%; }
  .floaty--heart { right: 6%; top: 14%; }
  .floaty--star { right: 9%; bottom: 10%; }
  .intro__note { right: 50%; bottom: 12px; width: max-content; transform: translateX(50%); }
  .hero { min-height: 900px; min-height: 100svh; align-items: end; }
  .hero__art { object-position: center 60%; }
  .hero__veil { background: linear-gradient(0deg, rgba(255,249,242,.97) 0%, rgba(255,249,242,.91) 42%, rgba(255,249,242,.34) 82%); }
  .hero__content { width: 100%; padding: 100px 24px 92px; }
  .hero h1 { font-size: clamp(4.8rem, 19vw, 7rem); }
  .hero__sticker { right: 8%; bottom: 5%; width: 72px; height: 72px; }
  .hero__spark--one { top: 13%; right: 12%; }
  .hero__spark--two { top: 39%; right: 7%; }
  .welcome, .rsvp { grid-template-columns: 1fr; }
  .section { padding: 76px 23px; }
  .welcome { gap: 33px; }
  .rsvp { gap: 36px; }
  .rsvp__decoration { min-height: 260px; max-width: 420px; margin: 0 auto; }
}
@media (max-width: 420px) {
  .intro__card { padding: 24px 19px; }
  .intro h1 { font-size: 3.5rem; }
  .tag { font-size: .62rem; }
  .form fieldset { grid-template-columns: 1fr; }
  .hero__date { font-size: .58rem; letter-spacing: .13em; }
  .desktop-only { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}