/* =========================================================
   Scroll cue dot (hero)
========================================================= */
@keyframes scrollDot {
  0%   { top: 7px; opacity: 1; }
  70%  { top: 22px; opacity: 0; }
  100% { top: 7px; opacity: 0; }
}

/* =========================================================
   Mariposas — cruce de pantalla de lado a lado.
   JS calcula por cada mariposa: --tx/--ty (vector de vuelo en px),
   --rot (ángulo hacia su destino), --dur y --delay.
========================================================= */
@keyframes crossFly {
  0%   { transform: translate(0, 0) rotate(var(--rot, 0deg)); opacity: 0; }
  6%   { opacity: var(--op, 0.9); }
  94%  { opacity: var(--op, 0.9); }
  100% { transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg)); opacity: 0; }
}

.butterfly {
  animation: crossFly var(--dur, 10s) linear forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes flutterWobble {
  0%, 100% { transform: rotate(-5deg) scale(1); }
  50%      { transform: rotate(5deg) scale(0.97); }
}

.butterfly-img {
  animation: flutterWobble 0.55s ease-in-out infinite;
}

/* =========================================================
   Lluvia de sobres
========================================================= */
@keyframes envelopeFall {
  0%   { transform: translateY(-10%) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(115%) rotate(360deg); opacity: 0; }
}

.envelope {
  animation: envelopeFall var(--fall-dur, 9s) linear infinite;
  animation-delay: var(--fall-delay, 0s);
}

/* =========================================================
   Brillos / escarcha — parpadeo aleatorio.
   JS asigna por cada brillo: --size, --dur, --delay, --op.
========================================================= */
@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  50%      { opacity: var(--op, 0.85); transform: scale(1) rotate(180deg); }
}

.sparkle {
  animation: sparkleTwinkle var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* =========================================================
   Accesibilidad — reduced motion
========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .butterfly,
  .butterfly-img,
  .envelope,
  .envelope-shape .env-flap,
  .envelope-shape .env-seal,
  .sparkle {
    animation: none !important;
    transition: none !important;
  }

  .butterfly-layer,
  .envelope-rain,
  .sparkle-layer { display: none; }
}