/* ============================================================
   heart-mark.css — layout shell for the decorative heart "mark".
   The tile visuals stay in the shared heart.css; this only sizes/positions
   the stage + tiles layer and styles the spotlight overlay.
   ============================================================ */

.heart-mark {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}

.heart-mark .hh__stage {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(94vw, 620px);
  will-change: transform;
}

.heart-mark .hh__tiles {
  position: absolute;
  inset: 0;
}

/* spotlight overlay — sits above the tiles, never intercepts pointer events */
.heart-mark__spot {
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  height: 260px;
  margin: -130px 0 0 -130px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(11, 11, 11, 0.18),
    rgba(130, 130, 130, 0.10) 45%,
    transparent 70%);
  mix-blend-mode: multiply;
  z-index: 2;
}

/* compact "logo" sizing helper */
.heart-mark--logo { max-width: 300px; }

@media (prefers-reduced-motion: reduce) {
  .heart-mark .hh__stage { transform: none !important; }
  .heart-mark .hh__tiles { transform: none !important; }
  .heart-mark__spot { left: 50%; top: 50%; }
}