/* =========================================================================
   Save the Date — styles (elegant theme)
   ========================================================================= */

:root {
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- Theme: ELEGANT ---- */
html[data-theme="elegant"] {
  --bg: #f7f1ea;
  --bg-soft: #efe6da;
  --ink: #2c2a28;
  --ink-soft: #6b655d;
  --accent: #9a6a5a;
  --accent-2: #c79a86;
  --card: #fffaf4;
  --line: #e2d6c6;
  --font-head: var(--font-serif);
  --font-body: var(--font-sans);
  --radius: 4px;
  --tracking: 0.12em;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.5s ease, color 0.5s ease;
}

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

/* ================= PAGE ================= */
.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 10px 22px 48px;
}

/* HERO */
.hero { text-align: center; margin-bottom: 2px; }
.hero__eyebrow {
  text-transform: uppercase; letter-spacing: var(--tracking);
  font-size: 13px; color: var(--ink-soft);
  margin-bottom: 10px;
}
.hero__names {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(48px, 12vw, 92px);
  line-height: 1.05;
  letter-spacing: 0.01em;
}
html[data-theme="elegant"] .hero__names { font-style: italic; font-weight: 500; }

/* ================= REVEAL ================= */
.reveal { position: relative; margin: 0 auto clamp(16px, 4vw, 28px); }

.reveal__sticky {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
}
/* In scroll mode (desktop) the image is pinned while the page scrolls
   through a tall zone, so the crossfade has real travel. */
.reveal--scroll { height: 130vh; }
.reveal--scroll .reveal__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
}

.reveal__hint {
  text-align: center;
  font-size: clamp(14px, 2.2vw, 18px);
  letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 6px; min-height: 1em;
  transition: opacity 0.3s ease;
}
.reveal__stage {
  position: relative;
  /* sized by JS to match each photo's aspect ratio (no cropping).
     This is just a sensible fallback before JS runs. */
  width: min(70vh, 540px);
  height: min(70vh, 540px);
  max-width: 92vw;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.35);
  border: 1px solid var(--line);
  transition: width 0.05s linear, height 0.05s linear;
}

.photo { position: absolute; inset: 0; margin: 0; }
.photo__img {
  width: 100%; height: 100%; object-fit: contain;   /* never crop */
  will-change: transform, opacity;
}
/* Default stack for scroll reveal: first trip on top, engagement underneath. */
.photo--over { z-index: 2; transition: opacity 0.12s linear; }
.photo--under { z-index: 1; }
/* In scratch mode the first photo is masked away by CSS gradients. */
.photo--scratch {
  -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* intersect / source-in: the transparent (scratched) regions of every
     gradient layer combine as a UNION, not an intersection. With add/
     source-over only the overlap of all holes stays transparent, so a
     second scratch point fills the first back in and nothing reveals. */
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* overlay quote on the first photo */
.quote {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
}
.quote--above {
  margin: 0 auto 4px;
  max-width: 600px;
  text-align: center;
  color: var(--ink);
  font-size: clamp(26px, 6vw, 42px);
  line-height: 1.3;
  transition: opacity 0.6s ease;
}
/* caption below the second (revealed) photo */
.quote--below {
  margin: 8px auto 0;
  max-width: 600px;
  text-align: center;
  color: var(--ink);
  font-size: clamp(26px, 6vw, 42px);
  line-height: 1.3;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* scratch canvas sits above the over image. Its left/width/top/height are
   set by JS to span the full viewport width across the image's vertical
   band, so a scratch that starts at the screen border is captured here
   (touch-action:none) instead of triggering iOS Safari's back/forward
   edge-swipe. */
.scratch {
  position: absolute;
  touch-action: none;        /* capture the gesture; also blocks the iOS edge-swipe for touches that begin here */
  cursor: grab;
  z-index: 5;                /* above both photos */
  overscroll-behavior: none; /* prevent pull-to-refresh while scratching */
}
.scratch:active { cursor: grabbing; }

/* Scratch mode: anything below the photo stays hidden until the image
   is revealed. The quote below the photo is handled inline in JS; this
   covers the Save-the-date card, calendar, and footer. Desktop (scroll
   reveal) is unaffected because it never gets the .scratch-mode class. */
.scratch-mode .details,
.scratch-mode .footer {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
.scratch-mode.revealed .details,
.scratch-mode.revealed .footer {
  opacity: 1;
  pointer-events: auto;
}

html, body {
  overscroll-behavior: none;
}

/* reduced motion: no pinning, just show the revealed photo */
@media (prefers-reduced-motion: reduce) {
  .reveal--scroll { height: auto; }
  .reveal--scroll .reveal__sticky { position: static; height: auto; }
}
}

/* ================= DETAILS ================= */
.details { text-align: center; }
.details__card {
  margin: 0 auto;                 /* center the fixed-width card */
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(28px, 6vw, 48px);
  width: min(520px, 100%);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,0.3);
}
.details__label {
  text-transform: uppercase; letter-spacing: var(--tracking);
  font-size: 12px; color: var(--accent); margin-bottom: 16px;
}
.details__date {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(26px, 6vw, 36px); line-height: 1.2;
}
.details__time { font-size: 18px; color: var(--ink-soft); margin-top: 6px; }
.details__venue {
  margin-top: 22px; font-size: 19px; font-weight: 500;
}
.details__venue:empty { display: none; }
.details__venue:empty + .details__city { margin-top: 22px; }
.details__city { color: var(--ink-soft); font-size: 16px; }
.details__extra { margin-top: 18px; font-style: italic; color: var(--ink-soft); font-size: 14px; }
.details__extra:empty { display: none; }

/* calendar */
.cal { margin-top: 28px; position: relative; }
.cal__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border: none;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font-family: var(--font-body); font-size: 16px; font-weight: 500;
  letter-spacing: 0.02em; cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 12px 26px -14px rgba(0,0,0,0.5);
}
.cal__btn:hover { opacity: 0.92; }
.cal__btn:active { transform: scale(0.97); }
.cal__icon { font-size: 18px; }

.cal__menu {
  list-style: none; margin: 12px 0 0; padding: 6px;
  position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 50px -24px rgba(0,0,0,0.4);
  min-width: 240px;
  z-index: 30;
}
.cal__menu button {
  width: 100%; text-align: left;
  border: none; background: transparent;
  padding: 12px 14px; border-radius: calc(var(--radius) - 2px);
  font-family: var(--font-body); font-size: 15px;
  color: var(--ink); cursor: pointer;
}
.cal__menu button:hover { background: var(--bg-soft); }

/* footer */
.footer { text-align: center; margin-top: 50px; color: var(--ink-soft); font-size: 13px; letter-spacing: 0.06em; }

/* ================= entrance animation ================= */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero > *, .details__card > *, .reveal__stage {
  animation: rise 0.8s cubic-bezier(.2,.7,.2,1) both;
}
.hero__names { animation-delay: 0.05s; }
.hero__date { animation-delay: 0.15s; }
.reveal__stage { animation-delay: 0.25s; }
.details__card { animation-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ================= responsive ================= */
@media (max-width: 560px) {
  .quote--above,
  .quote--below { font-size: 17px; }
}