/* ============================================================
   HELO MOTION KIT — animaciones para conversión
   5 patrones · sin librerías · Shopify + HTML/Next
   Versión 1.0
   ------------------------------------------------------------
   CÓMO USAR (resumen):
   1. Incluye este CSS y animaciones.js en la página.
   2. Pon la clase del patrón en el elemento que quieras animar.
   3. Para los que reaccionan al scroll, agrega data-reveal.
   Detalle completo y ejemplos en GUIA.md
   ============================================================ */

/* ---- Variables de control (cámbialas por proyecto) -------- */
:root{
  --mk-dur: .7s;                 /* duración base de entradas   */
  --mk-ease: cubic-bezier(.16,1,.3,1); /* curva premium          */
  --mk-rise: 20px;               /* cuánto sube un bloque        */
  --mk-stagger: .1s;             /* retraso entre hermanos       */
  --mk-accent: currentColor;     /* color de pulsos/barras       */
}

/* ============================================================
   01 · SCROLL REVEAL — aparición al entrar en pantalla
   Uso: <div class="mk-reveal" data-reveal> ... </div>
   ============================================================ */
.mk-reveal{
  opacity:0;
  transform:translateY(var(--mk-rise));
  transition:opacity var(--mk-dur) var(--mk-ease),
             transform var(--mk-dur) var(--mk-ease);
  will-change:opacity,transform;
}
.mk-reveal.mk-in{opacity:1;transform:none;}

/* Variantes de dirección (opcionales) */
.mk-reveal.mk-from-left{transform:translateX(calc(-1 * var(--mk-rise)));}
.mk-reveal.mk-from-right{transform:translateX(var(--mk-rise));}
.mk-reveal.mk-from-left.mk-in,
.mk-reveal.mk-from-right.mk-in{transform:none;}
.mk-reveal.mk-zoom{transform:scale(.94);}
.mk-reveal.mk-zoom.mk-in{transform:none;}

/* ============================================================
   02 · STAGGER — entrada en cascada de los hijos
   Uso: <ul class="mk-stagger" data-reveal> <li>..</li> ... </ul>
   Anima los hijos directos, uno tras otro.
   ============================================================ */
.mk-stagger > *{
  opacity:0;
  transform:translateY(calc(var(--mk-rise) * .7));
  transition:opacity calc(var(--mk-dur) * .85) var(--mk-ease),
             transform calc(var(--mk-dur) * .85) var(--mk-ease);
  will-change:opacity,transform;
}
.mk-stagger.mk-in > *{opacity:1;transform:none;}
/* el JS asigna --i a cada hijo; aquí lo convertimos en delay */
.mk-stagger.mk-in > *{transition-delay:calc(var(--i, 0) * var(--mk-stagger));}

/* ============================================================
   03 · HOVER LIFT — la tarjeta se eleva al apuntarla
   Uso: <a class="mk-lift"> ... </a>
   Señala "soy clicable". Funciona en cualquier contenedor.
   ============================================================ */
.mk-lift{
  transition:transform .35s var(--mk-ease), box-shadow .35s var(--mk-ease);
  will-change:transform;
}
.mk-lift:hover{transform:translateY(-6px) scale(1.015);}
.mk-lift:active{transform:translateY(-2px) scale(1.005);}

/* ============================================================
   04 · CTA VIVO — botón con anillo que late
   Uso: <button class="mk-cta"><span class="mk-cta-ring"></span> Texto </button>
   Atrae el ojo al punto de acción. Úsalo en UN solo botón por vista.
   ============================================================ */
.mk-cta{position:relative;overflow:visible;transition:transform .2s ease;}
.mk-cta:hover{transform:scale(1.04);}
.mk-cta:active{transform:scale(.97);}
.mk-cta-ring{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:2px solid var(--mk-accent);opacity:0;
  animation:mk-ring 2.4s ease-out infinite;
}
@keyframes mk-ring{
  0%{transform:scale(1);opacity:.5}
  100%{transform:scale(1.35);opacity:0}
}

/* ============================================================
   05 · NÚMEROS Y BARRAS — cuentan/llenan al verse
   Número:  <span class="mk-count" data-count="48" data-reveal>0</span>
   Barra:   <div class="mk-bar" data-reveal><i style="--w:72%"></i></div>
   El conteo lo hace el JS; la barra se llena por CSS.
   ============================================================ */
.mk-count{font-variant-numeric:tabular-nums;}
.mk-bar{
  height:8px;background:rgba(127,127,127,.18);
  border-radius:99px;overflow:hidden;
}
.mk-bar > i{
  display:block;height:100%;width:0;border-radius:99px;
  background:var(--mk-accent);
  transition:width 1.4s var(--mk-ease);
}
.mk-bar.mk-in > i{width:var(--w, 0%);}

/* ============================================================
   ACCESIBILIDAD — respeta "reducir movimiento"
   Si el usuario lo activó en su SO, todo aparece quieto.
   Protege la conversión en móvil y es buena práctica.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .mk-reveal,
  .mk-stagger > *,
  .mk-lift,
  .mk-cta,
  .mk-bar > i{
    transition:none !important;
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .mk-bar > i{width:var(--w, 0%) !important;}
  .mk-cta-ring{display:none !important;}
}