/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #F9F0E8;
  --text:         #000000;
  --muted:        #817E7E;
  --pink:         #F5C6CB;
  --blue:         #AECDE8;
  --pink-deep:    #F0AAB8;
  --blue-deep:    #8BBCD8;
  --btn-bg:       rgba(255,255,255,0.82);
  --radius-pill:  33px;
  --shadow-btn:   0 5px 5px 0 rgba(0,0,0,.22);
  --font-script:  'Great Vibes', cursive;
  --font-body:    'DM Sans', sans-serif;
  --font-serif:   'Playfair Display', serif;
  --hero-script:  clamp(68px, 12vw, 148px);
  --section-h2:   clamp(26px, 4.5vw, 48px);
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

/* ── Hero section (merges gate + reveal) ─────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── Cloud images ─────────────────────────────────────────── */
.sky_bl,
.sky_pink {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
  will-change: transform; /* GPU layer hint for GSAP */
}

/* Blue clouds — large, cover left half + overlap into center */
.sky_bl--1 { width: clamp(400px, 78vw, 1120px); left: -12%; top:   -5%; }
.sky_bl--2 { width: clamp(340px, 68vw,  960px); left: -18%; bottom: -8%; }
.sky_bl--3 { width: clamp(300px, 58vw,  820px); left:  -6%; top:   40%; }

/* Pink clouds — large, cover right half + overlap into center */
.sky_pink--1 { width: clamp(400px, 80vw, 1140px); right: -12%; top:  -8%; }
.sky_pink--2 { width: clamp(340px, 68vw,  960px); right: -18%; bottom: 0%; }
.sky_pink--3 { width: clamp(300px, 58vw,  820px); right:  -6%; top:  35%; }

/* Dress-code flanking clouds */
.sky_pink--dresscode {
  position: absolute;
  width: clamp(160px, 28vw, 400px);
  right: -6%;
  top: 8%;
  opacity: 0.7;
}

.sky_bl--dresscode {
  position: absolute;
  width: clamp(160px, 28vw, 400px);
  left: -6%;
  bottom: 8%;
  opacity: 0.7;
}

/* ── Hero center — button & title stacked in same grid cell ─ */
.hero__center {
  position: relative;
  z-index: 10;
  display: grid;
  place-items: center;
  width: min(90vw, 900px);
}

/* Both button and title share grid cell 1/1 → overlap */
.hero__center > * { grid-area: 1 / 1; }

/* ── Pill button ──────────────────────────────────────────── */
.btn-pill {
  background: var(--btn-bg);
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-btn);
  font-family: var(--font-body);
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 400;
  color: var(--text);
  padding: .75em 2.4em;
  cursor: pointer;
  letter-spacing: .01em;
  transition: transform .15s, box-shadow .15s;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  white-space: nowrap;
}

.btn-pill:hover  { transform: translateY(-2px); box-shadow: 0 8px 12px rgba(0,0,0,.18); }
.btn-pill:active { transform: translateY(0); }

/* ── Reveal title ─────────────────────────────────────────── */
.reveal__text {
  text-align: center;
  line-height: 1.1;
  opacity: 0;       /* GSAP animates to 1 on button click */
  pointer-events: none;
}

.script-xl {
  font-family: var(--font-script);
  font-size: var(--hero-script);
  font-weight: 400;
  color: var(--muted);
  display: block;
}

.script-xl.script-sm {
  font-size: clamp(42px, 7vw, 90px);
  opacity: .7;
}

/* ── Scroll cue ───────────────────────────────────────────── */
.scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  opacity: 0;       /* GSAP animates to 1 after reveal */
  pointer-events: none;
}

.scroll-cue__text {
  font-size: .8rem;
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: lowercase;
}

.scroll-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.scroll-dots span {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
  animation: dot-blink 1.4s ease-in-out infinite;
}
.scroll-dots span:nth-child(2) { animation-delay: .2s; }
.scroll-dots span:nth-child(3) { animation-delay: .4s; }

@keyframes dot-blink {
  0%, 100% { opacity: .25; }
  50%       { opacity: 1; }
}

/* ── Generic section ──────────────────────────────────────── */
.section {
  max-width: 820px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}

.section.visible {
  opacity: 1;
  transform: none;
}

.section h2 {
  font-family: var(--font-body);
  font-size: var(--section-h2);
  font-weight: 400;
  margin-bottom: 1.25rem;
}

/* ── Greeting ─────────────────────────────────────────────── */
.section-greeting { text-align: center; }
.section-greeting p { max-width: 600px; margin: 0 auto; color: #222; }

/* ── When (date / time) ───────────────────────────────────── */
.section-when {
  max-width: 900px;
  display: flex;
  gap: 3rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.when__cloud {
  position: relative;
  flex: 1 1 280px;
  max-width: 460px;
  display: grid;
  place-items: center;
}

.when__cloud img {
  width: 100%;
  height: auto;
  display: block;
}

.when__cloud .when__value {
  position: absolute;
  font-family: var(--font-script);
  font-size: clamp(26px, 4vw, 52px);
  color: #555;
  text-align: center;
  pointer-events: none;
  padding: 0 12%;
  line-height: 1.2;
}

@keyframes float-left {
  0%, 100% { transform: rotate(-2deg) translateY(0px); }
  50%       { transform: rotate(-1deg) translateY(-7px); }
}
@keyframes float-right {
  0%, 100% { transform: rotate(2deg) translateY(0px); }
  50%       { transform: rotate(1deg) translateY(-7px); }
}

.when__cloud--pink { animation: float-left  4s   ease-in-out infinite; }
.when__cloud--blue { animation: float-right 4.6s ease-in-out infinite; }

/* ── Location ─────────────────────────────────────────────── */
.section-location { text-align: center; }

.location__address { color: var(--muted); margin: .25rem 0 1rem; }

.location__map-link {
  display: inline-block;
  color: var(--muted);
  font-size: .9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-bottom: 2rem;
  transition: color .2s;
}
.location__map-link:hover { color: var(--text); }

.location__photo {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}

.location__photo img { width: 100%; height: 340px; object-fit: cover; }

/* ── Dress code ───────────────────────────────────────────── */
.section-dresscode {
  text-align: center;
  position: relative;    /* contains absolutely-positioned clouds */
  overflow: visible;     /* allow clouds to bleed out */
}

.dresscode__card {
  display: flex;
  gap: 1.5rem;
  margin-top: 2rem;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  position: relative;
  z-index: 1;
}

.dresscode__intro {
  max-width: 600px;
  margin: 0 auto 1.5rem;
  color: #333;
}

.dresscode__task {
  font-size: clamp(15px, 2vw, 20px);
  margin-bottom: 2rem;
  color: #444;
  line-height: 1.6;
}

.dresscode__col { flex: 1; padding: 1.75rem 2rem; }
.dresscode__col--blue { border-right: 1px solid #f0ece8; }
.dresscode__col p { font-size: .95rem; color: #444; line-height: 1.65; }

/* ── RSVP form ────────────────────────────────────────────── */
.section-rsvp { text-align: center; }

.rsvp__deadline { color: var(--muted); margin-bottom: 2.5rem; }

#rsvp-form {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  text-align: left;
}

.form-field label {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 500;
  color: var(--text);
}

.form-field input[type="text"] {
  background: transparent;
  border: none;
  border-bottom: 1px solid #C8C0B8;
  border-radius: 0;
  padding: .5rem 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text);
  outline: none;
  transition: border-color .2s;
}

.form-field input[type="text"]:focus       { border-bottom-color: var(--muted); }
.form-field input[type="text"]::placeholder { color: #C0BAB4; }

.radio-group { display: flex; flex-direction: column; gap: .6rem; }

.radio-label {
  font-family: var(--font-serif);
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: .7rem;
  cursor: pointer;
}

.radio-label input[type="radio"] { accent-color: var(--muted); width: 18px; height: 18px; cursor: pointer; }

.btn-pill--submit { align-self: center; margin-top: .5rem; }

.form-msg { min-height: 1.5rem; font-size: .95rem; text-align: center; }
.form-msg--success { color: #2e7d32; }
.form-msg--error   { color: #b71c1c; }

.signoff {
  margin-top: 3rem;
  font-family: var(--font-script);
  font-size: clamp(28px, 4vw, 48px);
  color: var(--muted);
  line-height: 1.4;
}

/* ── Footer spacer ────────────────────────────────────────── */
.footer-space { height: 4rem; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .section-when { flex-direction: column; align-items: center; }
  .when__cloud  { max-width: min(90vw, 440px); }

  .dresscode__card      { flex-direction: column; }
  .dresscode__col--blue { border-right: none; border-bottom: 1px solid #f0ece8; }

  /* Hero clouds: wider + repositioned to close portrait viewport gaps */
  .sky_bl--1   { width: clamp(280px, 100vw, 500px); top:    0%; }
  .sky_pink--1 { width: clamp(280px, 100vw, 500px); top:   -4%; }
  .sky_bl--3   { width: clamp(260px,  94vw, 460px); top:   30%; }
  .sky_pink--3 { width: clamp(260px,  94vw, 460px); top:   26%; }
  .sky_bl--2   { width: clamp(260px,  94vw, 460px); bottom: 18%; }
  .sky_pink--2 { width: clamp(260px,  94vw, 460px); bottom: 22%; }

  .section { padding: 3rem 1.25rem; }
  .section-when { gap: 1.5rem; }
  .location__photo img { height: 200px; }
  .dresscode__col { padding: 1.25rem; }
  .modal__card { padding: 2rem 1.25rem; }
}

@media (max-width: 380px) {
  .btn-pill { font-size: 16px; padding: .65em 1.6em; }
  .dresscode__col { padding: .9rem; }
}

@media (hover: none) {
  .btn-pill:hover { transform: none; box-shadow: var(--shadow-btn); }
  .location__map-link:hover { color: var(--muted); }
}

@media (max-height: 500px) and (orientation: landscape) {
  :root { --hero-script: clamp(36px, 8vh, 72px); }
  .scroll-cue { bottom: 1rem; }
}

/* ── Success modal ────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.modal__card {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border-radius: 24px;
  padding: 3rem 2.5rem;
  text-align: center;
  max-width: min(440px, 90vw);
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  animation: modal-in .35s ease;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.modal__icon  { font-size: 3rem; line-height: 1; }

.modal__title {
  font-family: var(--font-script);
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 400;
  color: var(--muted);
}

.modal__body { font-size: 1rem; color: #444; line-height: 1.6; }

/* ── Accessibility ────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}