/* ============================================
   Wedding Coming Soon — Botanical Watercolor
   Palette: muted greens on warm ivory
   ============================================ */

:root {
  --ivory: #faf7f0;
  --ivory-soft: #f4efe2;
  --sage-deep: #4f6b48;
  --sage: #6b8a5d;
  --sage-light: #8aa97a;
  --sage-mist: #cfdcbf;
  --ink: #2f3a2a;
  --muted: #6f7a66;

  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-script: "Parisienne", "Snell Roundhand", cursive;
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
}

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

html,
body {
  height: 100%;
  width: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(ellipse at top left, rgba(207, 220, 191, 0.35), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(207, 220, 191, 0.3), transparent 55%),
    linear-gradient(135deg, var(--ivory) 0%, var(--ivory-soft) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* subtle paper texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.93 0 0 0 0 0.85 0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  mix-blend-mode: multiply;
}

.page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  z-index: 1;
}

/* ---------- Botanical decorations ---------- */
.botanical {
  position: fixed;
  width: clamp(180px, 26vw, 360px);
  height: clamp(180px, 26vw, 360px);
  pointer-events: none;
  z-index: 1;
}

.botanical--top-left {
  top: -20px;
  left: -20px;
}
.botanical--top-right {
  top: 10px;
  right: -10px;
  width: clamp(140px, 18vw, 240px);
  height: clamp(140px, 18vw, 240px);
}
.botanical--bottom-right {
  bottom: -20px;
  right: -20px;
}
.botanical--bottom-left {
  bottom: 10px;
  left: -10px;
  width: clamp(140px, 18vw, 240px);
  height: clamp(140px, 18vw, 240px);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  padding: 2rem 1rem;
  animation: fadeUp 1.4s ease-out both;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 1.3vw, 0.9rem);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 400;
  margin-bottom: 2rem;
}

.names {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.05;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.name-first,
.name-second {
  font-size: clamp(3rem, 9vw, 6rem);
  font-style: italic;
  letter-spacing: 0.01em;
}

.ampersand {
  font-family: var(--font-script);
  font-size: clamp(2.5rem, 6vw, 4rem);
  color: var(--sage);
  font-weight: 400;
  line-height: 1;
  margin: 0.1em 0;
}

.divider {
  display: flex;
  justify-content: center;
  margin: 1.5rem auto;
  width: clamp(140px, 25vw, 220px);
  opacity: 0.85;
}

.divider svg {
  width: 100%;
  height: auto;
}

.tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--muted);
  font-weight: 300;
  margin-bottom: 2.5rem;
  letter-spacing: 0.02em;
}

.coming-soon {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  color: var(--sage-deep);
  margin-bottom: 1.5rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.subtext {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--muted);
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* ---------- Footer ---------- */
.footer {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sage);
  opacity: 0.7;
  z-index: 2;
}

/* ---------- Animations ---------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* gentle drift on the botanicals */
.botanical {
  animation: drift 14s ease-in-out infinite alternate;
}
.botanical--top-right {
  animation-delay: -3s;
  animation-duration: 16s;
}
.botanical--bottom-right {
  animation-delay: -6s;
  animation-duration: 18s;
}
.botanical--bottom-left {
  animation-delay: -9s;
  animation-duration: 15s;
}

@keyframes drift {
  from {
    transform: translate(0, 0) rotate(0deg);
  }
  to {
    transform: translate(4px, -6px) rotate(1.5deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .botanical,
  .hero {
    animation: none;
  }
}

/* ---------- Mobile tuning ---------- */
@media (max-width: 600px) {
  .botanical--top-right,
  .botanical--bottom-left {
    opacity: 0.5;
  }
  .eyebrow {
    margin-bottom: 1.25rem;
  }
  .footer {
    font-size: 0.65rem;
  }
}