:root {
  --ink: #fff1ec;
  --muted: rgba(255, 211, 205, 0.7);
  --bg: #020000;
  --ruby: #ff1836;
  --deep: #100005;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
}

body {
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

.scene {
  position: relative;
  display: grid;
  width: 100vw;
  height: 100vh;
  min-height: 620px;
  place-items: center;
  isolation: isolate;
  contain: layout paint style;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 25, 55, 0.16), transparent 31%),
    radial-gradient(circle at 50% 44%, rgba(86, 0, 14, 0.46), transparent 50%),
    linear-gradient(180deg, #060001 0%, #020000 66%, #000 100%);
}

.scene::before,
.scene::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}

.scene::before {
  z-index: -3;
  background:
    repeating-radial-gradient(
      circle at 50% 42%,
      rgba(255, 42, 64, 0.055) 0,
      rgba(255, 42, 64, 0.055) 1px,
      transparent 2px,
      transparent 26px
    ),
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.018) 50%, transparent 100%);
  opacity: 0.42;
  transform: scale(1.12);
}

.scene::after {
  z-index: 4;
  background:
    radial-gradient(circle at center, transparent 0%, transparent 45%, rgba(0, 0, 0, 0.68) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 20%, rgba(0, 0, 0, 0.46));
}

.silk {
  position: absolute;
  inset: -16%;
  z-index: -2;
  background:
    linear-gradient(96deg, transparent 8%, rgba(255, 30, 52, 0.08) 47%, transparent 62%),
    linear-gradient(34deg, transparent 18%, rgba(255, 255, 255, 0.035) 45%, transparent 66%),
    repeating-linear-gradient(
      115deg,
      transparent 0,
      transparent 18px,
      rgba(255, 50, 70, 0.028) 19px,
      transparent 20px
    );
  opacity: 0.48;
  animation: silkDrift 16s ease-in-out infinite alternate;
}

.aurora {
  position: absolute;
  top: 42%;
  left: 50%;
  z-index: -1;
  width: min(86vw, 920px);
  height: min(78vh, 760px);
  background:
    radial-gradient(circle, rgba(255, 24, 54, 0.18), transparent 52%),
    conic-gradient(from 180deg, transparent, rgba(255, 88, 108, 0.12), transparent, rgba(122, 0, 24, 0.18), transparent);
  border-radius: 50%;
  opacity: 0.54;
  transform: translate(-50%, -50%);
  animation: auraPulse 5.8s ease-in-out infinite;
}

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

.message {
  position: absolute;
  left: 50%;
  bottom: clamp(42px, 7vh, 72px);
  z-index: 5;
  width: min(92vw, 620px);
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.message h1 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 6.2vw, 76px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: 0;
  color: rgba(255, 242, 238, 0.96);
  text-shadow:
    0 0 18px rgba(255, 38, 64, 0.42),
    0 12px 34px rgba(0, 0, 0, 0.78);
}

.message p {
  margin: 14px auto 0;
  color: var(--muted);
  font-size: clamp(13px, 1.7vw, 17px);
  font-weight: 420;
  line-height: 1.55;
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.78);
}

@keyframes silkDrift {
  from {
    transform: translate3d(-1.4%, -0.8%, 0) rotate(-0.8deg);
  }
  to {
    transform: translate3d(1.6%, 1%, 0) rotate(0.8deg);
  }
}

@keyframes auraPulse {
  0%,
  100% {
    opacity: 0.45;
    transform: translate(-50%, -50%) scale(0.96);
  }
  50% {
    opacity: 0.68;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

@media (max-width: 720px) {
  .scene {
    min-height: 100svh;
  }

  .scene::before {
    opacity: 0.32;
  }

  .aurora {
    top: 36%;
    width: 104vw;
    height: 58vh;
  }

  .message {
    bottom: max(36px, 6svh);
  }
}

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