:root {
  --wine-deep: #1a0a10;
  --wine-mid: #2d101c;
  --wine-lift: #3d1524;
  --gold: #e8c98a;
  --gold-soft: #d4af6a;
  --gold-dim: rgba(232, 201, 138, 0.72);
  --candle: rgba(255, 186, 110, 0.28);
  --candle-core: rgba(255, 220, 160, 0.18);
  --font-quote: "Cormorant Garamond", "Palatino Linotype", Palatino, serif;
  --font-signature: "Great Vibes", "Segoe Script", cursive;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--gold);
  background: var(--wine-deep);
  font-family: var(--font-quote);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* —— Atmosphere —— */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 40%, var(--wine-lift) 0%, transparent 55%),
    radial-gradient(ellipse 120% 100% at 50% 100%, #12060b 0%, var(--wine-deep) 45%),
    linear-gradient(165deg, var(--wine-mid) 0%, var(--wine-deep) 50%, #0e0508 100%);
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  will-change: opacity, transform;
}

.glow--primary {
  width: min(70vw, 520px);
  height: min(70vw, 520px);
  top: 42%;
  left: 50%;
  translate: -50% -50%;
  background: radial-gradient(
    circle,
    var(--candle-core) 0%,
    var(--candle) 35%,
    transparent 70%
  );
  animation: candle-breathe 5.5s ease-in-out infinite;
}

.glow--secondary {
  width: min(40vw, 280px);
  height: min(40vw, 280px);
  top: 58%;
  left: 50%;
  translate: -50% -40%;
  background: radial-gradient(
    circle,
    rgba(255, 160, 90, 0.14) 0%,
    transparent 70%
  );
  animation: candle-breathe 7s ease-in-out infinite reverse;
  animation-delay: -1.5s;
}

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 75% 65% at 50% 45%,
    transparent 35%,
    rgba(8, 2, 5, 0.55) 100%
  );
}

.velvet {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 200, 140, 0.03) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(180, 80, 100, 0.04) 0%, transparent 45%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 3px
    );
  mix-blend-mode: soft-light;
}

/* —— Dedication —— */
.dedication {
  position: relative;
  z-index: 1;
  width: min(36rem, calc(100% - 3rem));
  padding: 2rem 1rem;
  text-align: center;
}

.quote {
  margin: 0;
  padding: 0;
  border: 0;
}

.quote p {
  margin: 0;
  font-family: var(--font-quote);
  font-size: clamp(1.55rem, 4.2vw + 0.6rem, 2.55rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--gold);
  text-shadow:
    0 0 40px rgba(255, 200, 120, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.45);
  animation: rise-in 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.signature {
  margin: 1.75rem 0 0;
  font-family: var(--font-signature);
  font-size: clamp(1.75rem, 3vw + 0.8rem, 2.6rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--gold-soft);
  letter-spacing: 0.04em;
  text-shadow: 0 0 28px rgba(255, 190, 110, 0.15);
  animation: rise-in 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}

/* —— Motion —— */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(0.85rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes candle-breathe {
  0%,
  100% {
    opacity: 0.75;
    scale: 1;
  }
  50% {
    opacity: 1;
    scale: 1.06;
  }
}

@media (max-width: 480px) {
  .dedication {
    width: min(100%, calc(100% - 2rem));
    padding: 1.5rem 0.5rem;
  }

  .quote p {
    line-height: 1.5;
  }

  .signature {
    margin-top: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glow--primary,
  .glow--secondary,
  .quote p,
  .signature {
    animation: none;
  }

  .quote p,
  .signature {
    opacity: 1;
    transform: none;
  }

  .glow--primary,
  .glow--secondary {
    opacity: 0.9;
  }
}