:root {
  --pink: #f7b7c8;
  --pink-deep: #e892a8;
  --blue: #9fd4f0;
  --blue-deep: #7abfe6;
  --gold: #efd36a;
  --gold-bright: #ffe9a0;
  --ink: #0b0714;
}

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

html,
body {
  width: 100%;
  height: 100%;
  background: #050309;
  overflow: hidden;
  font-synthesis: none;
}

body {
  display: grid;
  place-items: center;
}

.stage {
  position: relative;
  width: min(100vw, calc(100vh * 9 / 16));
  height: min(100vh, calc(100vw * 16 / 9));
  background: radial-gradient(ellipse at 50% 42%, #1a1028 0%, #0b0714 55%, #050309 100%);
  overflow: hidden;
  isolation: isolate;
}

#fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

.vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(5, 3, 9, 0.35) 78%, rgba(5, 3, 9, 0.72) 100%);
}

.grain {
  position: absolute;
  inset: -20%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  animation: grainShift 1.4s steps(2) infinite;
}

@keyframes grainShift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-1.5%, 1%); }
  100% { transform: translate(1%, -1.2%); }
}

.heartbeat {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 50% 48%, rgba(247, 183, 200, 0.28), transparent 42%),
    radial-gradient(circle at 50% 52%, rgba(159, 212, 240, 0.22), transparent 50%);
  transition: opacity 0.4s linear;
}

.heartbeat.pink {
  background: radial-gradient(circle at 50% 48%, rgba(255, 170, 196, 0.34), transparent 46%);
}

.heartbeat.blue {
  background: radial-gradient(circle at 50% 48%, rgba(140, 210, 245, 0.32), transparent 46%);
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12% 8% 14%;
  pointer-events: none;
}

.line {
  opacity: 0;
  pointer-events: none;
}

.mystery.show,
.mystery.dissolve {
  opacity: 1;
}

.mystery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-family: "Tangerine", "Great Vibes", cursive;
  font-size: clamp(38px, 9.4vw, 72px);
  line-height: 0.95;
  color: #fff7ea;
  letter-spacing: 0.02em;
  text-shadow:
    0 0 12px rgba(255, 225, 160, 0.55),
    0 0 28px rgba(247, 183, 200, 0.35);
}

.mystery span {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px) rotate(-6deg);
  filter: blur(4px);
}

.mystery.show span {
  animation: writeInk 0.38s ease forwards;
}

.mystery span:nth-child(1) { animation-delay: 0.00s; }
.mystery span:nth-child(2) { animation-delay: 0.07s; }
.mystery span:nth-child(3) { animation-delay: 0.14s; }
.mystery span:nth-child(4) { animation-delay: 0.21s; }
.mystery span:nth-child(5) { animation-delay: 0.28s; }
.mystery span:nth-child(6) { animation-delay: 0.35s; }
.mystery span:nth-child(7) { animation-delay: 0.40s; }
.mystery span:nth-child(8) { animation-delay: 0.48s; }
.mystery span:nth-child(9) { animation-delay: 0.55s; }
.mystery span:nth-child(10) { animation-delay: 0.60s; }
.mystery span:nth-child(11) { animation-delay: 0.70s; }
.mystery span:nth-child(12) { animation-delay: 0.77s; }
.mystery span:nth-child(13) { animation-delay: 0.84s; }
.mystery span:nth-child(14) { animation-delay: 0.91s; }
.mystery span:nth-child(15) { animation-delay: 0.98s; }
.mystery span:nth-child(16) { animation-delay: 1.05s; }
.mystery span:nth-child(17) { animation-delay: 1.14s; }

.mystery .gap {
  width: 0.28em;
  animation: none !important;
  opacity: 0;
}

.mystery.show .gap {
  opacity: 1;
  filter: none;
  transform: none;
}

@keyframes writeInk {
  0% {
    opacity: 0;
    transform: translateY(12px) rotate(-8deg) scale(0.86);
    filter: blur(5px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(-2px) rotate(1deg) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0) scale(1);
    filter: blur(0);
  }
}

.mystery.dissolve span {
  animation: glitterOut 0.7s ease forwards !important;
}

@keyframes glitterOut {
  0% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
  100% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(-18px) scale(1.18);
    text-shadow: 0 0 24px #ffe9a0;
  }
}

.invite {
  position: absolute;
  top: 38%;
  left: 8%;
  right: 8%;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 5.6vw, 40px);
  color: #fff8ee;
  letter-spacing: 0.04em;
  text-shadow:
    0 0 18px rgba(255, 231, 160, 0.7),
    0 0 40px rgba(159, 212, 240, 0.35);
  transform: scale(0.86);
  filter: blur(6px);
}

.invite.show {
  animation: inviteIn 1.1s ease forwards;
}

.invite.pulse {
  animation: inviteIn 1.1s ease forwards, invitePulse 1.65s ease-in-out 1.1s infinite;
}

@keyframes inviteIn {
  0% { opacity: 0; transform: scale(0.84); filter: blur(8px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes invitePulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    text-shadow:
      0 0 18px rgba(255, 231, 160, 0.65),
      0 0 36px rgba(247, 183, 200, 0.28);
  }
  50% {
    opacity: 1;
    transform: scale(1.045);
    text-shadow:
      0 0 28px rgba(255, 236, 180, 0.95),
      0 0 52px rgba(159, 212, 240, 0.45);
  }
}

.invite.hide {
  animation: fadeSoft 0.7s ease forwards;
}

.names-wrap {
  position: absolute;
  top: 47%;
  left: 0;
  right: 0;
  height: 18%;
  opacity: 0;
  overflow: visible;
}

.names-wrap.show {
  opacity: 1;
}

.names-svg {
  width: 92%;
  height: 100%;
  overflow: visible;
}

.names-stroke,
.names-fill {
  font-family: "Great Vibes", "Italianno", cursive;
  font-size: 92px;
  fill: none;
}

.names-stroke {
  stroke: url(#goldInk);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 920;
  stroke-dashoffset: 920;
  filter: drop-shadow(0 0 6px rgba(255, 215, 110, 0.65));
}

.names-wrap.draw .names-stroke {
  animation: drawName 2.4s ease forwards;
}

.names-fill {
  fill: url(#goldInk);
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(255, 220, 120, 0.45));
}

.names-wrap.draw .names-fill {
  animation: fillName 0.9s ease 1.6s forwards;
}

@keyframes drawName {
  to { stroke-dashoffset: 0; }
}

@keyframes fillName {
  to { opacity: 1; }
}

.shine {
  position: absolute;
  inset: 18% -10% 22%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    105deg,
    transparent 36%,
    rgba(255, 255, 255, 0.0) 42%,
    rgba(255, 248, 220, 0.85) 50%,
    rgba(255, 255, 255, 0.0) 58%,
    transparent 64%
  );
  mix-blend-mode: screen;
  transform: translateX(-70%);
}

.names-wrap.shine-run .shine {
  opacity: 1;
  animation: sweep 1.15s ease 2.15s forwards;
}

@keyframes sweep {
  0% { transform: translateX(-70%); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateX(70%); opacity: 0; }
}

.meta {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 11%;
  opacity: 0;
  transform: translateY(36px);
}

.meta.show {
  animation: riseIn 1.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes riseIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.diamond {
  width: 9px;
  height: 9px;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, #fff4c4, #d4a017);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(239, 211, 106, 0.9);
}

.place {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(13px, 3.35vw, 20px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3e6c4;
  line-height: 1.45;
  text-shadow: 0 0 16px rgba(239, 211, 106, 0.35);
}

.when {
  margin-top: 14px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(18px, 4.6vw, 28px);
  color: #ffe9b0;
  letter-spacing: 0.12em;
  text-shadow: 0 0 18px rgba(255, 220, 130, 0.55);
}

.meta.pulse .when {
  animation: whenPulse 1.6s ease-in-out infinite;
}

@keyframes whenPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.86;
    text-shadow: 0 0 12px rgba(255, 220, 130, 0.4);
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
    text-shadow: 0 0 26px rgba(255, 236, 180, 0.95);
  }
}

.meta.hide,
.names-wrap.hide,
.invite.hide,
.mystery.hide {
  animation: fadeSoft 0.8s ease forwards;
}

@keyframes fadeSoft {
  to {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.94);
  }
}