.landing { overflow: hidden; }

.stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(20px, 3vh, 32px);
  padding: max(var(--margin), env(safe-area-inset-top)) max(var(--margin), env(safe-area-inset-right)) max(var(--margin), env(safe-area-inset-bottom)) max(var(--margin), env(safe-area-inset-left));
  text-align: center;
}

/* ---------- heart ---------- */
.heart-wrap { position: relative; width: clamp(180px, 46vw, 300px); aspect-ratio: 100 / 90; }
.heart { position: relative; z-index: 2; display: block; width: 100%; height: 100%; border-radius: 50%; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.heart-shine { transition: opacity 180ms var(--ease-out); }
.heart:hover .heart-shine, .heart:focus-visible .heart-shine { opacity: 1; }
.heart svg { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 60%; }
.heart-body { fill: var(--thread); }
.heart-shine { fill: #e8737f; opacity: 0.85; }
.heart:focus-visible { outline-offset: 12px; border-radius: 40%; }

/* the one glow on the site (DESIGN.md overrides) */
.glow {
  position: absolute; z-index: 1; inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(200 62 77 / 0.55) 0%, rgb(200 62 77 / 0) 68%); /* taste-skill-ignore: the heart glow, DESIGN.md overrides */
  filter: blur(18px);
  transform-origin: 50% 55%;
}

.tap-me {
  position: absolute; z-index: 3;
  top: -6%; right: -34%;
  color: var(--on-ground);
  white-space: nowrap;
  transform: rotate(8deg);
  opacity: 0.08;
}

.mini {
  position: absolute; z-index: 0;
  left: 50%; top: 45%;
  width: 14px; height: 13px;
  fill: var(--thread);
  pointer-events: none;
}

/* ---------- words ---------- */
.title { font-size: clamp(52px, 8vw, 104px); color: var(--on-ground); }
.note { color: var(--on-ground); max-width: 26ch; }

.whispers { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.whispers li {
  position: absolute; left: 0; top: 0;
  font-family: var(--font-hand);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--on-ground);
  opacity: 0.08;
  will-change: transform, opacity;
}

/* ---------- the crimson wipe into /m/ ---------- */
.wipe {
  position: fixed; inset: 0; z-index: 60;
  background: var(--thread);
  clip-path: circle(0 at 50% 50%);
  pointer-events: none;
}

/* no JS: place the whispers as a quiet scatter so the page still reads */
html:not(.js) .whispers { display: none; }

@media (prefers-reduced-motion: reduce) {
  .whispers li { opacity: 0.5; }
  .tap-me { opacity: 1; }
}