:root {
  --bg: #0b0714;
  --bg-2: #140a22;
  --ink: #f4ecff;
  --muted: #b9a7d6;
  --rose: #ff6f9c;
  --violet: #8a5cff;
  --gold: #ffcf8b;
  --accent-gradient: linear-gradient(120deg, #ff9ec4 0%, #c9a1ff 45%, #8fd3ff 100%);
  --love-gradient: linear-gradient(120deg, #ff5f8f 0%, #ff9ec4 30%, #ffd0e0 50%, #c9a1ff 70%, #8fd3ff 100%);
  --heartbeat: 1.7s;
}

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

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(120% 120% at 50% 0%, var(--bg-2) 0%, var(--bg) 55%, #060308 100%);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  position: relative;
}

/* ---------- Aurora background (no CSS blur — soft baked gradients) ---------- */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  opacity: 0.82;
  contain: paint;
}

.aurora__blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.aurora__blob--1 {
  width: 62vmax;
  height: 62vmax;
  top: -20vmax;
  left: -15vmax;
  background: radial-gradient(circle at 30% 30%, rgba(255, 95, 143, 0.85), transparent 60%);
  animation: drift1 20s ease-in-out infinite alternate;
}

.aurora__blob--2 {
  width: 56vmax;
  height: 56vmax;
  top: 5vmax;
  right: -20vmax;
  background: radial-gradient(circle at 60% 40%, rgba(138, 92, 255, 0.78), transparent 60%);
  animation: drift2 24s ease-in-out infinite alternate;
}

.aurora__blob--3 {
  width: 52vmax;
  height: 52vmax;
  bottom: -25vmax;
  left: 10vmax;
  background: radial-gradient(circle at 50% 50%, rgba(143, 211, 255, 0.55), transparent 60%);
  animation: drift3 22s ease-in-out infinite alternate;
}

.aurora__blob--4 {
  width: 42vmax;
  height: 42vmax;
  bottom: -10vmax;
  right: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 130, 150, 0.55), transparent 60%);
  animation: drift1 19s ease-in-out infinite alternate-reverse;
}

@keyframes drift1 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(10vmax, 7vmax, 0) scale(1.22); }
}
@keyframes drift2 {
  0% { transform: translate3d(0, 0, 0) scale(1.08); }
  100% { transform: translate3d(-12vmax, 9vmax, 0) scale(0.88); }
}
@keyframes drift3 {
  0% { transform: translate3d(0, 0, 0) scale(0.92); }
  100% { transform: translate3d(7vmax, -9vmax, 0) scale(1.25); }
}

/* ---------- Rotating light rays ---------- */
.rays {
  position: fixed;
  inset: -40%;
  z-index: -2;
  pointer-events: none;
  contain: paint;
  will-change: transform;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 120, 160, 0.12) 12deg,
    transparent 32deg,
    transparent 60deg,
    rgba(201, 161, 255, 0.1) 78deg,
    transparent 100deg,
    transparent 150deg,
    rgba(255, 120, 160, 0.09) 170deg,
    transparent 200deg,
    transparent 240deg,
    rgba(143, 211, 255, 0.08) 262deg,
    transparent 290deg
  );
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 68%);
  mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 68%);
  animation: spin 80s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- Grain overlay (static, tiny tiled texture) ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

/* ---------- Pulsing vignette (the heartbeat you feel) ---------- */
.vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  contain: paint;
  will-change: opacity;
  background: radial-gradient(120% 100% at 50% 45%, transparent 30%, rgba(255, 60, 110, 0.16) 78%, rgba(120, 20, 60, 0.4) 100%);
  animation: vignetteBeat var(--heartbeat) ease-in-out infinite;
}

@keyframes vignetteBeat {
  0%, 100% { opacity: 0.45; }
  12% { opacity: 1; }
  28% { opacity: 0.5; }
  42% { opacity: 0.85; }
  60% { opacity: 0.5; }
}

/* ---------- Particles canvas ---------- */
#particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ---------- Layout ---------- */
.stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.2rem, 6vw, 4.2rem);
  padding: clamp(3rem, 9vh, 7rem) 1.25rem clamp(2rem, 6vh, 4rem);
  max-width: 860px;
  margin: 0 auto;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  text-align: center;
}

.hero__halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  z-index: -1;
  pointer-events: none;
}

.hero__halo-heart {
  display: block;
  font-size: clamp(16rem, 62vw, 40rem);
  line-height: 1;
  color: var(--rose);
  opacity: 0.16;
  filter: blur(22px);
  animation: haloBeat var(--heartbeat) ease-in-out infinite;
}

@keyframes haloBeat {
  0%, 100% { opacity: 0.13; }
  12% { opacity: 0.26; }
  30% { opacity: 0.13; }
  44% { opacity: 0.2; }
}

.hero__eyebrow {
  position: relative;
  font-family: "Inter", sans-serif;
  font-size: clamp(0.7rem, 2.4vw, 0.85rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #ffb3cd;
  margin-bottom: 1.4rem;
  text-shadow: 0 0 22px rgba(255, 95, 143, 0.7);
}

.hero__title {
  position: relative;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(4rem, 19vw, 11rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
}

.hero__letter {
  display: inline-block;
  background: var(--love-gradient);
  background-size: 260% 260%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 12s ease-in-out infinite, letterBeat var(--heartbeat) ease-in-out infinite;
  filter: drop-shadow(0 0 32px rgba(255, 95, 143, 0.55));
}

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes letterBeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.06); }
  30% { transform: scale(1); }
  44% { transform: scale(1.035); }
}

.hero__sub {
  position: relative;
  margin-top: 1.6rem;
  font-size: clamp(0.98rem, 3vw, 1.2rem);
  line-height: 1.85;
  font-weight: 300;
  color: var(--muted);
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

.hero__sub--strong {
  margin-top: 1.1rem;
  color: #ffc9dd;
  font-style: italic;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.15rem, 3.6vw, 1.6rem);
  text-shadow: 0 0 30px rgba(255, 95, 143, 0.55);
}

/* ---------- Player ---------- */
.player {
  position: relative;
  width: 100%;
  max-width: 640px;
}

.player__glow {
  position: absolute;
  inset: -10% -8%;
  z-index: -1;
  border-radius: 40px;
  background: linear-gradient(130deg, rgba(255, 95, 143, 0.75), rgba(255, 158, 196, 0.6), rgba(138, 92, 255, 0.55), rgba(143, 211, 255, 0.45));
  filter: blur(28px);
  animation: glowPulse var(--heartbeat) ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; }
  12% { opacity: 0.9; }
  30% { opacity: 0.55; }
  44% { opacity: 0.78; }
}

.player__frame {
  border-radius: 24px;
  overflow: hidden;
  background: rgba(20, 12, 30, 0.55);
  border: 1px solid rgba(255, 180, 205, 0.22);
  box-shadow: 0 30px 90px -30px rgba(0, 0, 0, 0.9), 0 0 60px -10px rgba(255, 95, 143, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.player__frame:hover {
  transform: translateY(-6px) scale(1.01);
}

.player__frame iframe {
  display: block;
  border: 0;
  content-visibility: auto;
}

/* ---------- Vow ---------- */
.vow {
  text-align: center;
  line-height: 1.25;
}

.vow__line {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
}

.vow__line--1 {
  font-size: clamp(1.6rem, 6vw, 2.8rem);
  color: #ffd9e6;
  text-shadow: 0 0 34px rgba(255, 95, 143, 0.6);
}

.vow__line--2 {
  font-size: clamp(2.1rem, 8.5vw, 4rem);
  background: var(--love-gradient);
  background-size: 260% 260%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 12s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(255, 95, 143, 0.5));
}

.vow__line--3 {
  font-size: clamp(1.6rem, 6vw, 2.8rem);
  color: #e7c9ff;
  text-shadow: 0 0 34px rgba(138, 92, 255, 0.6);
}

.vow__line--4 {
  font-size: clamp(1.6rem, 6vw, 2.8rem);
  color: #ffc98f;
  text-shadow: 0 0 34px rgba(255, 176, 92, 0.65);
}

/* ---------- Together / love counter ---------- */
.together {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

.together__nick {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 5.5vw, 2.4rem);
  color: #ffd9a8;
  text-shadow: 0 0 30px rgba(255, 176, 92, 0.6);
  animation: nickGlow var(--heartbeat) ease-in-out infinite;
}

@keyframes nickGlow {
  0%, 100% { text-shadow: 0 0 26px rgba(255, 176, 92, 0.45); }
  12% { text-shadow: 0 0 46px rgba(255, 176, 92, 0.9); }
  30% { text-shadow: 0 0 26px rgba(255, 176, 92, 0.45); }
}

.counter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.5rem, 1.8vw, 1rem);
}

.counter__unit {
  min-width: clamp(4.2rem, 20vw, 6.2rem);
  padding: 0.9rem 0.6rem;
  border-radius: 16px;
  background: rgba(20, 12, 30, 0.55);
  border: 1px solid rgba(255, 180, 205, 0.2);
  box-shadow: 0 14px 40px -18px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.counter__num {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: clamp(1.5rem, 6.5vw, 2.4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--love-gradient);
  background-size: 260% 260%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 12s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(255, 95, 143, 0.45));
}

.counter__label {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.together__since {
  font-size: clamp(0.85rem, 2.8vw, 1rem);
  font-weight: 300;
  font-style: italic;
  color: var(--muted);
  max-width: 34ch;
}

/* ---------- Note ---------- */
.note {
  text-align: center;
  max-width: 44ch;
}

.note__line {
  margin-top: 1rem;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 5vw, 2rem);
  line-height: 1.5;
  color: #f3d9e6;
  text-shadow: 0 0 30px rgba(255, 95, 143, 0.55);
}

.note__line--invite {
  font-size: clamp(1.5rem, 6vw, 2.4rem);
  background: var(--love-gradient);
  background-size: 260% 260%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 12s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(255, 95, 143, 0.5));
}

/* ---------- Footer ---------- */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.footer__heart {
  color: var(--rose);
  font-size: 1.4rem;
  animation: beat var(--heartbeat) ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(255, 95, 143, 1));
}

@keyframes beat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.45); }
  28% { transform: scale(1); }
  42% { transform: scale(1.25); }
  56% { transform: scale(1); }
}

/* ---------- Heart burst on click ---------- */
.burst-heart {
  position: fixed;
  z-index: 5;
  pointer-events: none;
  font-size: 1.6rem;
  color: var(--rose);
  filter: drop-shadow(0 0 12px rgba(255, 95, 143, 0.9));
  animation: burst 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes burst {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
  100% { transform: translate(-50%, -180%) scale(1.7); opacity: 0; }
}

/* ---------- Reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(14px);
}

.reveal.is-visible {
  animation: reveal 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes reveal {
  0% {
    opacity: 0;
    transform: translateY(34px) scale(0.96);
    filter: blur(14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  body, .aurora, .rays, .vignette, .player__frame, .player__glow,
  .hero__halo-heart, .hero__letter, .footer__heart {
    animation: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }
}