/* ZOESYSTEM MLM · animaciones.css (M06)
   Todo movimiento vive aquí y solo con «prefers-reduced-motion: no-preference». Solo se animan transform y opacity.
   Con «reducir movimiento»: sin revelados, sin subida ni escala, sin giro; los colores sí cambian (la información se mantiene).
   Contenido visible por defecto: el JavaScript marca como pendientes solo los elementos que aún no están en pantalla. */

@layer animaciones {

  @media (prefers-reduced-motion: no-preference) {

    /* Revelado al entrar en pantalla: sube 16 px y aparece en 450 ms, escalonado de 60 ms (máximo 6 en cadena).
       Nunca en el H1. El retraso lo pone revelar.js en --retardo. */
    .js [data-revelar] {
      transition: opacity var(--dur-3) var(--curva-salida) var(--retardo, 0ms),
        transform var(--dur-3) var(--curva-salida) var(--retardo, 0ms);
    }
    .js .revelar--pendiente { opacity: 0; transform: translateY(16px); }

    /* Barra de progreso: sigue al dedo, no se mueve sola */
    .encabezado__progreso { will-change: transform; }

    /* Subrayado de la sección activa */
    .encabezado__nav a::after { transition: transform var(--dur-2) var(--curva-estandar); }

    /* Botones: sube 2 px al pasar el puntero y se hunde al presionar */
    .btn { transition-property: color, background-color, border-color, box-shadow, transform; }
    .btn__flecha { transition: transform var(--dur-2) var(--curva-estandar); }
    @media (hover: hover) {
      .btn--menta:hover:not(:disabled):not([aria-disabled="true"]),
      .btn--verde:hover:not(:disabled):not([aria-disabled="true"]) { transform: translateY(-2px); }
      .btn--menta:hover:not(:disabled):not([aria-disabled="true"]) .btn__flecha { transform: translateX(4px); }
    }
    .btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.98); }

    /* Indicador giratorio del botón «Enviando…» */
    .btn[aria-busy="true"] .btn__indicador { animation: zs-giro .8s linear infinite; }
    @keyframes zs-giro { to { transform: rotate(360deg); } }

    /* Botón flotante de WhatsApp: entra con escala de 0,8 a 1 y opacidad (250 ms) */
    .wa-flotante {
      transform: scale(.8);
      transition: opacity var(--dur-2) var(--curva-salida), transform var(--dur-2) var(--curva-salida),
        visibility 0s linear var(--dur-2);
    }
    .wa-flotante--visible { transform: scale(1); transition-delay: 0s; }
    .wa-flotante__etiqueta { transition: opacity var(--dur-1) var(--curva-estandar); }

    /* Punto de la píldora del inicio: late (M07 lo usa) */
    .punto-latido { animation: zs-latido 2s var(--curva-estandar) infinite; }
    @keyframes zs-latido {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.35); opacity: .6; }
    }
  }

  /* Reducir movimiento: nada pendiente, nada que gire; los cambios de estado son instantáneos */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition-duration: 0s !important;
      transition-delay: 0s !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
    }
    .revelar--pendiente { opacity: 1; transform: none; }
    .btn[aria-busy="true"] .btn__indicador { display: none; }
    .punto-latido { animation: none; }
  }

  /* Impresión: todo visible */
  @media print {
    .revelar--pendiente { opacity: 1; transform: none; }
    .wa-flotante { display: none; }
  }
}