@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/great-vibes-latin.woff2?v=1') format('woff2');
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/quicksand-latin.woff2?v=1') format('woff2');
}

:root {
  --bg: #06040a;
  --pink: #ea80b0;
  --pink-soft: #ffc2dc;
  --pink-deep: #c94f8a;
  --ink: #f5e9f0;
  --muted: rgba(245, 233, 240, .55);
  --beat: 0;               /* 0..1, driven by JS in sync with the heart */
  --ui-top: 70vh;          /* where the name block starts; JS keeps it under the heart */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Quicksand', 'Segoe UI', system-ui, -apple-system, sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* soft plum bloom behind the heart + vignette */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(60% 45% at 50% 42%, rgba(234, 128, 176, .12), rgba(234, 128, 176, 0) 70%),
    radial-gradient(120% 90% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 100%);
  pointer-events: none;
}

#scene {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
#scene.dragging { cursor: grabbing; }

.ui {
  position: fixed;
  left: 0; right: 0;
  top: var(--ui-top);
  text-align: center;
  pointer-events: none;
  padding: 0 24px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.4s ease .2s, transform 1.4s cubic-bezier(.2, .7, .2, 1) .2s;
}
.ui.show { opacity: 1; transform: none; }

.eyebrow {
  margin: 0 0 .1em;
  font-size: clamp(12px, 1.4vw, 15px);
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--muted);
}

.name {
  margin: 0;
  font-family: 'Great Vibes', 'Brush Script MT', cursive;
  font-weight: 400;
  line-height: 1.05;
  font-size: clamp(64px, 15vw, 132px);
  padding: 0 .2em;
  background: linear-gradient(180deg, #fff6fb 0%, var(--pink-soft) 38%, var(--pink) 72%, var(--pink-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 0 calc(6px + 10px * var(--beat)) rgba(255, 255, 255, calc(.18 + .22 * var(--beat))))
    drop-shadow(0 0 calc(22px + 16px * var(--beat)) rgba(234, 128, 176, calc(.45 + .3 * var(--beat))));
}

.tagline {
  margin: .35em 0 0;
  font-size: clamp(14px, 1.7vw, 19px);
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--muted);
}

.from {
  margin: 1.1em 0 0;
  font-size: clamp(12px, 1.3vw, 14px);
  font-weight: 500;
  letter-spacing: .16em;
  color: rgba(245, 233, 240, .38);
}
.from[hidden] { display: none; }

.hint {
  position: fixed;
  left: 0; right: 0;
  bottom: max(18px, env(safe-area-inset-bottom));
  margin: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(245, 233, 240, .32);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hint.show { opacity: 1; }
.hint.gone { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .ui { transition: none; }
}