/* Effects. Transform/opacity only, all switched off under prefers-reduced-motion. */

/* Little hearts that burst from a tapped button (created by js/fx.js) */
.burst {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 96;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  pointer-events: none;
  background: var(--pink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.burst:nth-child(3n) { background: var(--bow); }
.burst:nth-child(3n+1) { background: var(--lilac-text); opacity: 0.7; }

/* Soft squish on press */
[data-pop].is-popping { animation: pop 380ms var(--ease-out); }
@keyframes pop {
  0% { transform: scale(1); }
  30% { transform: scale(0.92); }
  65% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Desktop heart trail (js/fx.js only creates it for fine pointers) */
.trail { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.trail__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: var(--pink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translate(-100px, -100px);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-pop].is-popping { animation: none; }
  .trail, .burst { display: none; }
}

/* Secret: hearts rain + a toast */
.rain {
  position: fixed;
  top: -40px;
  z-index: 97;
  width: 22px;
  height: 22px;
  fill: var(--pink);
  pointer-events: none;
}
.rain:nth-child(3n) { fill: var(--bow); }
.rain:nth-child(3n+1) { fill: var(--lilac-text); }
.toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom) + var(--space-6));
  z-index: 98;
  width: fit-content;
  margin-inline: auto;
  text-align: center;
  padding: var(--space-3) var(--space-5);
  background: var(--rose);
  color: var(--on-rose);
  border-radius: var(--radius);
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.5rem;
  box-shadow: 0 12px 26px -10px rgba(190, 24, 93, 0.6);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
  pointer-events: none;
}
.toast.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rain { display: none; } .toast { transition: none; } }

/* Hidden until animateHero() starts, so nothing flashes in its final spot first. */
html.hero-pending :is(.hero__kicker, .hero__line, .squiggle, .counter, .counter__tape, .counter__bow, .chip, .hero__cta, .hero .sticker) { visibility: hidden; }

/* Anniversary confetti (js/party.js) */
.confetti { position: fixed; inset: 0; z-index: 97; pointer-events: none; overflow: hidden; }
.confetti__bit, .confetti__heart { position: absolute; top: 0; left: 0; }
.confetti__bit { width: 9px; height: 14px; border-radius: 2px; background: var(--c); }
.confetti__heart {
  width: 16px;
  height: 16px;
  background: var(--c);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.counter.is-party .counter__label { color: var(--rose); font-size: 1.6rem; }