/* ===========================================================================
   DW PERFUMERÍA — MOVIMIENTO  ·  Fase 4 de «MOUILLETTE»

   La regla: si no comunica algo, se borra.

   Medido en producción con `getComputedStyle` sobre todo el DOM: de los 22
   `@keyframes` declarados en las hojas, solo DOS se ejecutaban de verdad. Los
   otros veinte son animaciones muertas heredadas de la plantilla de DW Jeans
   —partículas flotantes, órbitas, ondas NFC— que no tocan ningún elemento que
   exista hoy en esta tienda.

   Las dos que sí corrían, corrían INFINITAS. Las dos se paran, y abajo está
   escrito por qué.
   =========================================================================== */

/* ===========================================================================
   1 · EL BOTE DEL BOTÓN DE WHATSAPP — fuera
   ---------------------------------------------------------------------------
   `whatsapp-bounce 3s infinite`. Un botón que salta cada tres segundos, para
   siempre, en todas las páginas.

   Comunica algo la primera vez y después es ruido: el ojo lo aprende en diez
   segundos y a partir de ahí solo roba atención al producto. En el móvil,
   además, es una animación compuesta que no se detiene nunca — con la batería
   que eso cuesta y sin que nadie la haya pedido.

   El botón se queda. El salto, no.
   =========================================================================== */

.whatsapp-float,
.dw-float,
.dw-float--whatsapp {
  animation: none !important;
}

/* Lo que sí comunica es que responde al dedo. Eso pasa cuando lo tocas, no
   cada tres segundos. */
.whatsapp-float,
.dw-float {
  transition: transform var(--tiempo-2) var(--curva-salida);
}
.whatsapp-float:hover,
.dw-float:hover,
.whatsapp-float:focus-visible,
.dw-float:focus-visible {
  transform: scale(1.06);
}

/* ===========================================================================
   2 · LAS DOS TIRAS DESLIZANTES — se paran
   ---------------------------------------------------------------------------
   `dw-marquee-scroll 32s infinite`, dos veces.

   El contenido es bueno —envíos, concentración, asesoría, los cuatro pasos de
   la compra— y se queda entero. Lo que se va es el desplazamiento: un texto
   que se mueve no se puede leer, hay que esperar a que pase. Es información
   útil convertida en decoración.

   Quieta, se lee de un golpe. Y deja de ser el elemento más de plantilla de
   toda la portada.
   =========================================================================== */

.dw-marquee__track {
  animation: none !important;
  /* Ya no hace falta el doble juego de contenido para el bucle: se centra y
     lo que sobra por los lados se recorta con el desbordamiento del padre. */
  justify-content: center;
}

.dw-marquee {
  overflow: hidden;
}

/* El segundo grupo era el clon que alimentaba el bucle infinito. Sin
   movimiento, es contenido repetido: se oculta, y también para el lector de
   pantalla, que hasta ahora leía los cuatro puntos dos veces seguidas. */
.dw-marquee__group:nth-of-type(2) {
  display: none;
}

/* ===========================================================================
   3 · LO QUE SÍ SE MUEVE, Y POR QUÉ
   ---------------------------------------------------------------------------
   Tres movimientos en toda la tienda. Los tres responden a algo que ha hecho
   la persona, ninguno se repite solo, y los tres usan únicamente `transform` y
   `opacity` — las dos propiedades que el navegador compone sin volver a
   calcular la maqueta.
   =========================================================================== */

/* a) LA MOUILLETTE se ensancha al pasar por encima.
      Dice «esto es un objeto, y es de esta familia». Está en componentes.css. */

/* b) LA TARJETA se eleva al pasar por encima.
      Dice «esto se puede pulsar». Se acota al rango del encargo: estaba en
      450 ms, medio segundo para levantar 3 px. */
.product-card {
  transition:
    border-color var(--tiempo-3) var(--curva-suave),
    box-shadow var(--tiempo-3) var(--curva-suave),
    transform var(--tiempo-2) var(--curva-salida) !important;
}

/* c) LA APARICIÓN ESCALONADA de la cuadrícula.
      Dice «esto acaba de llegar» y ordena la lectura de izquierda a derecha.
      Ocurre UNA vez por carga y nunca se repite. */
.anim-fade-in {
  transition:
    opacity var(--tiempo-3) var(--curva-salida),
    transform var(--tiempo-3) var(--curva-salida) !important;
}

/* El carrusel del hero funde con opacidad. Un segundo es largo para el rango
   del encargo, pero aquí es deliberado: es una fotografía de producto a media
   pantalla, y un cambio de 300 ms se lee como un parpadeo. Se deja anotado. */

/* ===========================================================================
   4 · QUIEN PIDE QUIETUD, OBTIENE QUIETUD
   ---------------------------------------------------------------------------
   `style.css` tiene 75 KB y cero bloques de `prefers-reduced-motion`. El
   barrido general está en componentes.css; aquí se rematan los casos en los
   que apagar la animación deja algo invisible o roto, que es el error clásico:
   `.anim-fade-in` parte de `opacity: 0`, así que apagar la transición sin más
   deja la tienda EN BLANCO con HTTP 200.
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .anim-fade-in,
  html.js .anim-fade-in {
    opacity: 1 !important;
    transform: none !important;
  }

  .dw-carrusel__slide {
    transition: none !important;
  }

  .product-card:hover {
    transform: none !important;
  }
}