/* ============================================================
   TIENDA DE REGALOS MONARCA · animaciones
   Los cinco patrones que la web usa de verdad. Vanilla, sin
   dependencias. Color de marca vía la variable --mk-primario.
   ============================================================ */

/* --- BARRA DE PROGRESO de scroll (motion.js la crea) --------- */
.mk-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 9998;
  background: var(--mk-primario);
  transform-origin: 0 50%; transform: scaleX(0);
}

/* --- PORTADA: entrada escalonada de los bloques -------------- */
.mk-hero > * { opacity: 0; animation: mkRise .9s cubic-bezier(.22,1,.36,1) forwards; }
.mk-hero > *:nth-child(1) { animation-delay: .1s; }
.mk-hero > *:nth-child(2) { animation-delay: .25s; }
.mk-hero > *:nth-child(3) { animation-delay: .4s; }
.mk-hero > *:nth-child(4) { animation-delay: .55s; }
@keyframes mkRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* --- SPLIT-TEXT: el titular entra palabra a palabra ----------
   motion.js trocea el texto de .mk-split en <span class="mk-w">. */
.mk-split .mk-w { display: inline-block; overflow: hidden; vertical-align: top; }
.mk-split .mk-w > span {
  display: inline-block; transform: translateY(110%);
  animation: mkWord .8s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--mk-i) * .07s + .1s);
}
@keyframes mkWord { to { transform: none; } }

/* --- REVEAL: los bloques asoman al llegar al scroll ---------- */
.mk-reveal {
  opacity: 0; transform: translateY(34px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.mk-reveal.mk-in { opacity: 1; transform: none; }
.mk-reveal:nth-child(2) { transition-delay: .1s; }
.mk-reveal:nth-child(3) { transition-delay: .2s; }
.mk-reveal:nth-child(4) { transition-delay: .3s; }

/* --- CINTA deslizante (motion.js duplica el contenido) ------- */
.mk-marquee { overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mk-marquee-track { display: inline-flex; gap: 3rem; padding-right: 3rem; animation: mkMarquee 26s linear infinite; }
.mk-marquee:hover .mk-marquee-track { animation-play-state: paused; }
@keyframes mkMarquee { to { transform: translateX(-50%); } }

/* --- BOTÓN con pulso ----------------------------------------- */
.mk-pulse { position: relative; }
.mk-pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit;
  border: 2px solid var(--mk-primario);
  animation: mkPulse 2.2s ease-out infinite; pointer-events: none;
}
@keyframes mkPulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } }

/* --- Accesibilidad: quien pide menos movimiento, lo recibe --- */
@media (prefers-reduced-motion: reduce) {
  .mk-hero > *, .mk-split .mk-w > span, .mk-reveal, .mk-marquee-track, .mk-pulse::after {
    animation: none !important; transition: none !important;
    opacity: 1 !important; transform: none !important;
  }
}