/* Self-hosted fonts (latin subset). font-display: block avoids a visible fallback-font swap. */
@font-face {
  font-family: "Great Vibes";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("fonts/great-vibes.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url("fonts/cormorant-garamond-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 400;
  font-display: block;
  src: url("fonts/jost.woff2") format("woff2");
}

:root {
  --green-50: #f6fbf3;
  --green-100: #e8f4e0;
  --green-200: #d3ebc6;
  --green-400: #a6d08f;
  --green-700: #5f8a4d;
  --pink-200: #fbd9e3;
  --pink-400: #f2a3bc;
  --pink-600: #d9728f;
  --ink: #4a5a43;
}

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

html, body { height: 100%; }

body {
  font-family: "Jost", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(ellipse 70% 55% at 15% 10%, rgba(251, 217, 227, .65), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 95%, rgba(211, 235, 198, .9), transparent 60%),
    linear-gradient(180deg, var(--green-50), var(--green-100));
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#petals {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.stage {
  position: relative;
  z-index: 2;
  margin: auto;
  text-align: center;
  padding: 2rem 1.25rem;
  max-width: 60rem;
  animation: rise 1.6s ease-out both;
}

.eyebrow {
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: 1.6rem;
}

.names {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-size: clamp(3.4rem, 13vw, 7.5rem);
  line-height: 1.05;
  color: var(--pink-600);
  text-shadow: 0 2px 22px rgba(242, 163, 188, .45);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 .3em;
}

.names .amp {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: .5em;
  color: var(--green-700);
}

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.8rem auto;
  max-width: 20rem;
}
.divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green-400), transparent);
}
.divider svg { fill: var(--pink-400); flex: none; animation: spin 18s linear infinite; }

.coming {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1.5rem, 4.5vw, 2.3rem);
  color: var(--ink);
}

.date {
  margin-top: 1rem;
  font-size: .85rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--green-700);
}

footer {
  position: relative;
  z-index: 2;
  padding: 0 1rem 1.2rem;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--green-700);
  opacity: .8;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .stage { animation: none; }
  .divider svg { animation: none; }
}