/* Rosa-Gold – the original kids' birthday card: pink, gold lettering, a singing heart. */
@font-face { font-family: "Great Vibes"; src: url("/assets/fonts/great-vibes-latin-400-286e6ff9.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("/assets/fonts/fredoka-latin-wght-aabc92f2.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/assets/fonts/playfair-display-latin-wght-759b7dc1.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/assets/fonts/playfair-display-latin-wght-italic-37c58aab.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }

:root {
  --inv-bg:
    radial-gradient(circle at 15% 10%, #ffe3f0 0%, transparent 40%),
    radial-gradient(circle at 85% 30%, #ffd1e6 0%, transparent 45%),
    radial-gradient(circle at 50% 100%, #ffc2dc 0%, transparent 55%),
    linear-gradient(180deg, #fff5fa 0%, #ffe0ee 50%, #ffcfe3 100%);
  --inv-text: #7a2e52;
  --inv-accent: #e8508f;
  --inv-accent-soft: #ff9cc4;
  --inv-accent-gradient: linear-gradient(135deg, #ff85b3, #e8508f);
  --inv-shadow: rgba(232, 80, 143, .18);
  --inv-font-body: "Fredoka", system-ui, sans-serif;
  --inv-font-display: "Great Vibes", cursive;
  --inv-font-script: "Great Vibes", cursive;
  --inv-font-heading: "Playfair Display", serif;
}

.inv-detail h3, .inv-gift h3 { font-weight: 700; }

/* The singing heart replaces the default round song button. */
.heart-btn {
  position: relative; background: none; border: none; cursor: pointer;
  width: 108px; height: 100px;
  -webkit-tap-highlight-color: transparent;
  animation: inv-heartbeat 1.3s ease-in-out infinite;
  filter: drop-shadow(0 8px 16px rgba(232, 80, 143, .45));
  transition: filter .3s;
}
.heart-btn:hover { filter: drop-shadow(0 10px 22px rgba(232, 80, 143, .6)) drop-shadow(0 0 16px rgba(255, 216, 107, .6)); }
.heart-btn.playing { animation-duration: .55s; }
.heart-btn:focus-visible { outline: 3px dashed #d4a017; outline-offset: 6px; border-radius: 16px; }
.heart-btn svg { width: 100%; height: 100%; overflow: visible; }
.heart-btn .inv-ring { top: 45%; }
.heart-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  padding-bottom: 14px;
  color: #fff; font: 700 .85rem/1.1 "Fredoka", sans-serif;
  text-shadow: 0 2px 4px rgba(150, 20, 80, .45);
  pointer-events: none;
}
.heart-label .emoji { font-size: 1.3rem; }

@media (max-width: 520px) {
  .heart-btn { width: 92px; height: 85px; }
  .heart-label { font-size: .72rem; }
}