:root {
  --sky: #5db9f0;
  --sky-deep: #2f8fd6;
  --cloud: #ffffff;
  --woody-yellow: #ffcf3f;
  --woody-red: #e53946;
  --buzz-green: #61c26b;
  --buzz-purple: #7d5cc2;
  --ink: #1b2a4a;
  --ink-soft: #4a5a7a;
  --paper: #fffdf6;
  --outline: #1b2a4a;
  --radius: 22px;
  --display: 'Luckiest Guy', 'Impact', sans-serif;
  --body: 'Fredoka', 'Nunito', 'Trebuchet MS', sans-serif;
  --marker: 'Permanent Marker', 'Comic Sans MS', cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: linear-gradient(180deg, #7dcbf7 0%, var(--sky) 45%, #8dd0f5 100%);
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Andy's wallpaper ---------- */
.sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.cloud {
  position: absolute; background: var(--cloud); border-radius: 100px;
  width: 140px; height: 48px; opacity: .95;
  filter: drop-shadow(0 6px 0 rgba(47,143,214,.18));
  animation: drift linear infinite;
}
.cloud::before, .cloud::after {
  content: ""; position: absolute; background: var(--cloud); border-radius: 50%;
}
.cloud::before { width: 62px; height: 62px; left: 22px; top: -30px; }
.cloud::after  { width: 44px; height: 44px; left: 74px; top: -18px; }
.c1 { top: 8%;  left: -10%; animation-duration: 70s; transform: scale(1.1); }
.c2 { top: 22%; left: 60%;  animation-duration: 95s; transform: scale(.8); animation-delay: -30s; }
.c3 { top: 41%; left: -20%; animation-duration: 80s; transform: scale(1.3); animation-delay: -55s; }
.c4 { top: 58%; left: 70%;  animation-duration: 105s; transform: scale(.9); animation-delay: -10s; }
.c5 { top: 76%; left: 10%;  animation-duration: 88s; transform: scale(1); animation-delay: -70s; }
.c6 { top: 90%; left: 55%;  animation-duration: 120s; transform: scale(1.2); animation-delay: -40s; }
@keyframes drift {
  from { translate: -40vw 0; }
  to   { translate: 140vw 0; }
}

/* ---------- Layout ---------- */
.page {
  position: relative; z-index: 1;
  max-width: 480px; margin: 0 auto;
  padding: 28px 18px 60px;
  display: flex; flex-direction: column; gap: 22px;
}

.reveal { opacity: 0; translate: 0 18px; animation: rise .7s cubic-bezier(.2,.8,.2,1) forwards; }
.reveal:nth-child(1) { animation-delay: .05s }
.reveal:nth-child(2) { animation-delay: .15s }
.reveal:nth-child(3) { animation-delay: .3s }
.reveal:nth-child(4) { animation-delay: .45s }
.reveal:nth-child(5) { animation-delay: .6s }
.page > .reveal { animation-delay: .5s }
.page > .reveal:nth-child(3) { animation-delay: .7s }
.page > .reveal:nth-child(4) { animation-delay: .9s }
@keyframes rise { to { opacity: 1; translate: 0 0; } }

/* ---------- Hero ---------- */
.hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }

.eyebrow {
  margin: 0; font-weight: 600; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--woody-red);
  padding: 6px 14px; border-radius: 999px; border: 3px solid var(--outline);
  box-shadow: 3px 3px 0 var(--outline); rotate: -2deg;
}

.title { margin: 6px 0 0; font-family: var(--display); line-height: .9; display: grid; gap: 2px; }
.t-name {
  display: block; font-size: clamp(64px, 19vw, 92px); letter-spacing: .02em;
  color: var(--woody-yellow);
  -webkit-text-stroke: 2px var(--outline);
  text-shadow:
    3px 3px 0 var(--outline),
    6px 6px 0 var(--woody-red),
    8px 8px 0 var(--outline);
  transform: perspective(300px) rotateX(8deg);
}
.t-line { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-top: 10px; }
.t-small {
  font-size: clamp(26px, 8vw, 36px); color: #fff;
  -webkit-text-stroke: 1.5px var(--outline);
  text-shadow: 3px 3px 0 var(--outline);
}
.t-one {
  font-size: clamp(74px, 22vw, 104px); color: var(--woody-red);
  -webkit-text-stroke: 2px var(--outline);
  text-shadow: 4px 4px 0 var(--outline), 7px 7px 0 var(--woody-yellow), 9px 9px 0 var(--outline);
  rotate: -6deg; display: inline-block;
}

.portrait { margin: 14px 0 0; display: grid; justify-items: center; gap: 4px; }
.frame {
  position: relative; width: 210px; height: 210px; border-radius: 50%;
  background: var(--paper); padding: 8px;
  border: 4px solid var(--outline);
  box-shadow: 6px 6px 0 var(--outline), 0 0 0 10px var(--woody-yellow), 0 0 0 14px var(--outline);
  rotate: 3deg;
}
.frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; background: #d9eefb; }
.badge {
  position: absolute; right: -18px; bottom: -6px; width: 68px; height: 68px;
  display: grid; place-items: center; line-height: 1;
  font-family: var(--display); font-size: 30px; color: var(--woody-yellow);
  background: var(--woody-red); border: 3px solid var(--outline); border-radius: 50%;
  box-shadow: 3px 3px 0 var(--outline); rotate: 12deg;
}
.badge small { font-size: 9px; letter-spacing: .1em; color: #fff; margin-top: -4px; }
.marker { font-family: var(--marker); color: var(--ink); font-size: 30px; rotate: -4deg; margin-top: 10px; }
.marker.small { font-size: 20px; color: #fff; text-shadow: 2px 2px 0 var(--outline); }

.video-wrap {
  width: 100%; max-width: 320px; margin-top: 10px;
  border: 4px solid var(--outline); border-radius: 26px; overflow: hidden;
  background: #000; box-shadow: 6px 6px 0 var(--outline);
  aspect-ratio: 9 / 16;
}
.video-wrap video { width: 100%; height: 100%; display: block; object-fit: cover; }

.quote {
  margin: 8px 0 0; font-family: var(--marker); font-size: 22px; color: #fff;
  text-shadow: 2px 2px 0 var(--outline);
}

/* ---------- Cards ---------- */
.card {
  background: var(--paper); border: 4px solid var(--outline); border-radius: var(--radius);
  padding: 24px 20px 22px; box-shadow: 7px 7px 0 var(--outline);
  position: relative;
}
.card-title { margin: -42px 0 12px; text-align: center; }
.card-title span {
  display: inline-block; font-family: var(--display); font-size: 26px; letter-spacing: .03em;
  color: #fff; background: var(--buzz-purple); padding: 8px 18px 6px;
  border: 3px solid var(--outline); border-radius: 14px; box-shadow: 3px 3px 0 var(--outline);
  rotate: -2deg;
}
.rsvp .card-title span { background: var(--buzz-green); }

.date-block { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 2px; }
.dow { font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.day { font-family: var(--display); font-size: 72px; line-height: 1; color: var(--woody-red); -webkit-text-stroke: 1.5px var(--outline); text-shadow: 3px 3px 0 var(--outline); }
.month { font-family: var(--display); font-size: 26px; color: var(--sky-deep); -webkit-text-stroke: 1px var(--outline); }
.time { margin: 4px 0 14px; text-align: center; font-weight: 700; font-size: 20px; }
.time span { background: var(--woody-yellow); padding: 3px 12px; border-radius: 10px; border: 2px solid var(--outline); }
.venue { margin: 0; text-align: center; font-weight: 700; font-size: 20px; }
.address { margin: 4px 0 16px; text-align: center; color: var(--ink-soft); font-size: 15px; }

.actions { display: grid; gap: 10px; }
.btn {
  display: block; text-align: center; text-decoration: none; cursor: pointer;
  font-family: var(--body); font-weight: 700; font-size: 17px; color: var(--ink);
  padding: 13px 16px; border: 3px solid var(--outline); border-radius: 14px;
  box-shadow: 4px 4px 0 var(--outline); background: #fff;
  transition: translate .08s ease, box-shadow .08s ease;
}
.btn:active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--outline); }
.btn-map { background: var(--woody-yellow); }
.btn-cal { background: #fff; }
.btn-submit { background: var(--buzz-green); color: #fff; font-size: 19px; width: 100%; margin-top: 6px; text-shadow: 1px 1px 0 var(--outline); }
.btn[disabled] { opacity: .6; pointer-events: none; }

/* ---------- Form ---------- */
.deadline { margin: 0 0 14px; text-align: center; color: var(--ink-soft); }
.deadline strong { color: var(--woody-red); }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > span { font-weight: 600; font-size: 15px; }
.field em { font-style: normal; font-weight: 400; color: var(--ink-soft); }
.field input[type="text"] {
  font: inherit; font-size: 17px; padding: 12px 14px; border: 3px solid var(--outline); border-radius: 12px;
  background: #fff; color: var(--ink); width: 100%;
}
.field input:focus { outline: none; box-shadow: 0 0 0 4px rgba(93,185,240,.5); }
.field input:user-invalid { border-color: var(--woody-red); }

.toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; }
.opt span {
  display: block; text-align: center; padding: 12px 8px; font-weight: 700; font-size: 17px;
  border: 3px solid var(--outline); border-radius: 14px; background: #fff; box-shadow: 4px 4px 0 var(--outline);
  transition: all .12s ease; cursor: pointer;
}
.opt-yes input:checked + span { background: var(--sky); color: #fff; text-shadow: 1px 1px 0 var(--outline); }
.opt-no  input:checked + span { background: #ffd9dc; }
.opt input:checked + span { translate: 2px 2px; box-shadow: 2px 2px 0 var(--outline); }
.opt input:focus-visible + span { box-shadow: 0 0 0 4px rgba(93,185,240,.5), 4px 4px 0 var(--outline); }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stepper { display: grid; grid-template-columns: 44px 1fr 44px; border: 3px solid var(--outline); border-radius: 12px; overflow: hidden; background: #fff; }
.stepper button {
  font: inherit; font-size: 24px; font-weight: 700; border: 0; background: var(--woody-yellow); color: var(--ink); cursor: pointer;
}
.stepper button:active { background: #f2b800; }
.stepper input { font: inherit; font-size: 20px; font-weight: 700; text-align: center; border: 0; width: 100%; min-width: 0; color: var(--ink); -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; }
#goingFields.off { display: none; }

.form-msg { margin: 10px 0 0; text-align: center; min-height: 1.2em; font-weight: 600; color: var(--woody-red); }

/* ---------- Success ---------- */
.success { text-align: center; padding: 10px 0 4px; position: relative; }
.success-title { font-family: var(--display); font-size: 34px; color: var(--buzz-purple); -webkit-text-stroke: 1px var(--outline); text-shadow: 3px 3px 0 var(--outline); margin: 0 0 6px; animation: pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.success-text { margin: 0; font-size: 17px; }
@keyframes pop { from { scale: .4; opacity: 0 } to { scale: 1; opacity: 1 } }
.stars { position: absolute; inset: -30px 0 0; pointer-events: none; }
.stars i {
  position: absolute; left: 50%; top: 40%; width: 12px; height: 12px; background: var(--woody-yellow);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: burst 1.1s ease-out forwards;
}
.stars i:nth-child(2) { --dx: -90px; --dy: -60px; background: var(--woody-red) }
.stars i:nth-child(3) { --dx: 90px;  --dy: -70px; background: var(--sky) }
.stars i:nth-child(4) { --dx: -60px; --dy: 40px;  background: var(--buzz-green) }
.stars i:nth-child(5) { --dx: 70px;  --dy: 50px;  background: var(--buzz-purple) }
.stars i:nth-child(6) { --dx: -120px;--dy: -10px }
.stars i:nth-child(7) { --dx: 120px; --dy: -20px; background: var(--woody-red) }
.stars i:nth-child(8) { --dx: 0;     --dy: -110px; background: var(--sky) }
.stars i:nth-child(1) { --dx: 20px;  --dy: 80px; }
@keyframes burst {
  0% { translate: 0 0; scale: .3; opacity: 1; rotate: 0deg }
  100% { translate: var(--dx, 0) var(--dy, 0); scale: 1.4; opacity: 0; rotate: 240deg }
}

.foot { text-align: center; padding-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .cloud, .reveal, .stars i, .success-title { animation: none !important; }
  .reveal { opacity: 1; translate: 0 0; }
}