@font-face {
  font-family: 'Copperplate Gothic';
  src: url('assets/fonts/CopperplateGothicBold.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Copperplate Gothic';
  src: url('assets/fonts/CopperplateGothicLight.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'YoureInvited';
  src: url('assets/fonts/YoureInvited.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'YoureInvited';
  src: url('assets/fonts/YoureInvitedHeavy.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  --cream: #ece6d9;
  --cream-deep: #e3dcca;
  --ink: #4a4238;
  --ink-soft: #6b6255;
  --ribbon-blue: #3f93c2;
  --heart-red: #9c1f34;
  --sun-pink: #c2325c;
  --gold: #a3925f;
  --vh: 100vh;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--cream);
  background-image:
    radial-gradient(rgba(0,0,0,0.025) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1.5px 1.5px;
}

.script {
  font-family: 'YoureInvited', cursive;
  font-weight: 400;
}

.copperplate {
  font-family: 'Copperplate Gothic', 'Copperplate', 'Copperplate Bold', 'Trajan Pro', serif;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
}
.copperplate-light {
  font-family: 'Copperplate Gothic', 'Copperplate', 'Trajan Pro', serif;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Continuous page framework ---------- */
#scroller {
  /* natural document flow — the page itself scrolls, no nested scroll container */
}

.section {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8vh 6vw;
  opacity: 0;
  transition: opacity 1.1s ease;
  overflow: visible;
  will-change: opacity;
  contain: layout paint style;
  isolation: isolate;
}

.section.in-view {
  opacity: 1;
}

.section-inner {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* fade-up children when section becomes visible */
.fade-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s ease, transform 1s ease;
}
.in-view .fade-up { opacity: 1; transform: translateY(0); }
.in-view .fade-up.d1 { transition-delay: .15s; }
.in-view .fade-up.d2 { transition-delay: .3s; }
.in-view .fade-up.d3 { transition-delay: .45s; }
.in-view .fade-up.d4 { transition-delay: .6s; }

/* scroll progress dots */
#dots {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 50;
}
#dots button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--ink-soft);
  background: transparent;
  padding: 0;
  cursor: pointer;
  opacity: .55;
  transition: all .3s ease;
}
#dots button.active {
  background: var(--ink-soft);
  opacity: 1;
  transform: scale(1.3);
}

.scroll-hint {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .6;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob {
  0%,100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

/* ================= PAGE 1 — TITLE ================= */
#page-title {
  padding-top: 6vh;
}
.title-hero {
  width: 84vw;
  max-width: 380px;
  display: block;
}

/* ================= PAGE 2 — SWAN ================= */
.swan-stage {
  position: relative;
  width: 78vw;
  max-width: 360px;
}
.swan-stage img.swan-illustration { width: 100%; display: block; }
.swan-stage .swan-sun, .swan-stage .swan-moon {
  position: absolute;
  display: block;
  transform-origin: 50% 60%;
}
.swan-stage .swan-sun {
  left: 40.68%;
  top: 26.16%;
  width: 30.16%;
  animation: tilt30-a 5.5s ease-in-out infinite;
}
.swan-stage .swan-moon {
  left: 60.65%;
  top: 24.85%;
  width: 25.74%;
  animation: tilt30-b 6.5s ease-in-out infinite;
}
@keyframes tilt30-a {
  0%,100% { transform: rotate(-30deg); }
  50% { transform: rotate(30deg); }
}
@keyframes tilt30-b {
  0%,100% { transform: rotate(30deg); }
  50% { transform: rotate(-30deg); }
}
.caption-script {
  font-size: clamp(1.3rem, 6.5vw, 2.1rem);
  margin-top: 4vh;
  color: var(--ink);
  white-space: nowrap;
}

/* ================= PAGE 3 — BOAT / VOYAGE ================= */
.ribbon-img { width: 62vw; max-width: 280px; }
.ribbon-img.ribbon-flip { transform: scaleY(-1); }
.voyage-copy { font-size: 1.5rem; line-height: 1.45; margin: 2.2vh 0; color: var(--ink); font-family: 'YoureInvited', cursive; font-weight: 400; }
.boat-wrap {
  position: relative;
  width: 84vw;
  max-width: 380px;
  margin: 1vh 0 2vh;
}
.boat-wrap img.boat { width: 100%; display: block; position: relative; z-index: 2; }
.ripple {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 8%;
  height: 20%;
  z-index: 1;
  overflow: visible;
  opacity: .85;
}
.ripple svg { width: 100%; height: 100%; display: block; }
.ripple-path {
  animation: ripple-move 3.2s linear infinite;
}
.ripple-path.p2 { animation-duration: 4.1s; animation-direction: reverse; opacity: .6; }
.ripple-path.p3 { animation-duration: 5.4s; opacity: .4; }
@keyframes ripple-move {
  0% { transform: translateX(0); }
  100% { transform: translateX(-60px); }
}

/* ================= PAGE 4 — INVITED TICKET ================= */
.ticket-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
}
.ticket-img {
  width: 100%;
  display: block;
}
.map-hit {
  position: absolute;
  display: block;
  border-radius: 6px;
  background: rgba(95, 159, 187, 0);
  border: 1px dashed rgba(95, 159, 187, 0);
  transition: background .2s ease, border-color .2s ease;
}
.map-hit:hover, .map-hit:active {
  background: rgba(95, 159, 187, 0.14);
  border-color: rgba(95, 159, 187, 0.5);
}
.board-hit { left: 10%; top: 43%; width: 80%; height: 10%; }
.parking-hit { left: 8%; top: 54.3%; width: 84%; height: 6%; }

/* ================= PAGE 5 — SWAN ATTIRE ================= */
.swans-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4vw;
  width: 100%;
  margin-bottom: 3vh;
  height: 26vh;
}
.swans-row img { width: 40vw; max-width: 190px; display: block; }
.swan-white-anim { animation: bob-water 4.6s ease-in-out infinite; }
.swan-black-anim { animation: bob-water 4.6s ease-in-out infinite; animation-delay: 2.3s; }
@keyframes bob-water {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(-1.5deg); }
}
.attire-copy { font-size: 1.55rem; line-height: 1.4; margin: 0 0 2.2vh; }
.inspiration-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  margin-top: .5vh;
}
.inspiration-link .inspiration-arrow { width: 26px; height: auto; display: block; }
.inspiration-link a {
  font-size: 1.55rem;
  color: var(--ink);
  text-decoration: underline;
}
.attire-note {
  font-size: .58rem;
  line-height: 1.9;
  color: var(--ink-soft);
  margin-top: 5vh;
}

/* lightbox (used by the engagement photos gallery) */
#lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(30,24,16,0.9);
  display: none;
  align-items: center; justify-content: center;
  padding: 3vw;
  backdrop-filter: blur(2px);
  overflow: hidden;
}
#lightbox.open { display: flex; animation: fade-in .25s ease; }
#lightbox img {
  max-width: 96vw;
  max-height: 92vh;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  touch-action: pinch-zoom;
  cursor: zoom-in;
  transition: transform .3s ease;
  transform: scale(1);
}
#lightbox img.zoomed {
  transform: scale(1.9);
  cursor: zoom-out;
}
#lightbox-close { position: absolute; top: 20px; right: 20px; color: #eee; font-size: 2rem; background: none; border: none; cursor: pointer; line-height: 1; z-index: 2; }
#lightbox-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.6);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@keyframes fade-in { from{opacity:0} to{opacity:1} }

/* ================= PAGE 6 — CASH REGISTRY ================= */
#page-registry { position: relative; }
.registry-title { font-size: 2.6rem; margin: 2vh 0 3vh; }
.registry-copy { font-size: .85rem; line-height: 1.7; margin-bottom: 3vh; color: var(--ink); }
.registry-heart-link { display: block; }
.registry-heart { width: 30vw; max-width: 130px; display: block; margin: 0 auto 1.6vh; transition: transform .2s ease; }
.registry-heart-link:hover .registry-heart { transform: scale(1.05); }
.send-gift-link { font-size: .85rem; color: var(--ink); text-decoration: underline; }
.cherry-deco { position: absolute; width: 60px; }
.cherry-top { top: 6vh; right: 12vw; transform: rotate(6deg); }
.cherry-bottom { bottom: 6vh; left: 12vw; transform: rotate(-10deg) scaleX(-1); }

/* ================= PAGE 7 — ENGAGEMENT PHOTOS ================= */
.eng-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
.eng-slot {
  aspect-ratio: 4/5;
  border-radius: 3px;
  display: block;
  overflow: hidden;
}
.eng-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ================= PAGE 8 — RSVP ================= */
#page-rsvp {
  padding-top: 5vh;
  justify-content: flex-start;
}
.rsvp-inner { max-width: 420px; }
.rsvp-title { font-family: 'YoureInvited', cursive; font-weight: 700; font-size: 2.6rem; margin-bottom: 1.4vh; color: var(--ink); }

.rsvp-ribbon-wrap {
  position: relative;
  width: 84vw;
  max-width: 360px;
  margin: 0 auto 1.6vh;
}
.rsvp-ribbon-wrap .rsvp-ribbon-top { width: 100%; display: block; }
.rsvp-ribbon-wrap .rsvp-heart {
  width: 17%;
  margin: -8% auto 0;
  display: block;
  position: relative;
}
.rsvp-ribbon-bottom {
  width: 84vw;
  max-width: 360px;
  display: block;
  margin: 2.4vh auto 0;
}
.rsvp-heart { animation: heartbeat 3.4s ease-in-out infinite; }
@keyframes heartbeat {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.045) rotate(-1deg); }
}
.rsvp-note {
  font-size: .58rem;
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0 auto 3vh;
  max-width: 74%;
}

form#rsvp-form { width: 100%; max-width: 300px; margin: 0 auto; text-align: center; }
.field { margin-bottom: 2.2vh; }
.field label.q { display: block; font-size: .58rem; margin-bottom: .8em; color: var(--ink); }
.field input[type=text] {
  width: 60%;
  max-width: 180px;
  display: block;
  margin: 0 auto;
  border: none;
  border-bottom: 1.5px solid var(--ink-soft);
  background: transparent;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  padding: .3em .1em;
  color: var(--ink);
  outline: none;
  text-align: center;
}
.field input[type=text]:focus { border-bottom-color: var(--ink); }

.opt-row { display: flex; justify-content: center; gap: 2.2em; }
.opt {
  display: flex;
  align-items: center;
  gap: .55em;
  cursor: pointer;
  font-size: .58rem;
  user-select: none;
}
.opt .box {
  width: 16px; height: 16px;
  border: 1.5px solid var(--ink-soft);
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s ease, border-color .2s ease;
}
.opt .box::after {
  content: '';
  width: 8px; height: 8px;
  background: var(--heart-red);
  border-radius: 1px;
  transform: scale(0);
  transition: transform .15s ease;
}
.opt input { display: none; }
.opt input:checked + .box::after { transform: scale(1); }
.opt input:checked ~ span.opt-text { color: var(--ink); font-weight: 700; }

#send-btn {
  display: block;
  margin: 1vh auto 0;
  background: none;
  border: none;
  font-family: 'Copperplate Gothic', 'Copperplate', 'Trajan Pro', serif;
  font-weight: 400;
  font-size: .85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  color: var(--ink);
  cursor: pointer;
  padding: .5em 1em;
}
#send-btn:disabled { opacity: .5; cursor: default; }

#rsvp-status {
  margin-top: 1vh;
  font-family: 'Copperplate Gothic', 'Copperplate', 'Trajan Pro', serif;
  font-weight: 400;
  font-size: .58rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  min-height: 1.4em;
  color: var(--ink-soft);
}

/* ================= PAGE 9 — THANK YOU ================= */
.thankyou-block { }
.thankyou-block .script { font-size: 2.2rem; }
.sunmoon-icon { width: 26vw; max-width: 110px; margin: 1.6vh 0; animation: gentle-spin 10s ease-in-out infinite; }
@keyframes gentle-spin {
  0%,100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
.names-final { font-size: 1.9rem; }
.artwork-credit { font-size: .58rem; line-height: 1.7; color: var(--ink-soft); opacity: .7; margin-top: 5vh; letter-spacing: 0.04em; }

@media (min-width: 720px) {
  .section-inner { max-width: 520px; }
}