/* ============================================================================
   LB JEANS — MOVIMIENTO · «Taller Índigo»
   Fase 4 de 4. 2026-08-11
   ----------------------------------------------------------------------------
   Se carga LA ÚLTIMA. Reglas que se cumplen sin excepción:

     · Solo `transform` y `opacity`. Nada más va en la GPU.
     · Tres duraciones: 150 / 220 / 300 ms. Salen de tokens.
     · Entrada con `--lb-curva-entrada`, salida con `--lb-curva-salida`.
       Nunca `ease` por defecto, nunca `linear` salvo un bucle continuo.
     · Escalonado de 40 ms con tope de 6 elementos. A partir del séptimo el
       retardo deja de sumar: si no, la última tarjeta entra medio segundo tarde
       y eso ya no es ritmo, es espera.
     · El estado final es el estado NATURAL. Las animaciones usan
       `animation-fill-mode: backwards`, así que si el motor no las ejecuta el
       contenido se ve igual. Nunca se deja nada en `opacity: 0` de salida.
     · `prefers-reduced-motion` ya está resuelto en lb-tokens.css para TODO el
       sitio; aquí no hace falta repetirlo.

   QUÉ SE RETIRA, Y POR QUÉ TAN POCO
   La auditoría contó 22 `@keyframes`, 20 de ellos en bucle infinito. Medido en
   la página real, **solo dos corren**: el resto vive en las 133 clases muertas
   que `style.css` arrastra desde la plantilla de tuNFC y no llega al markup.
   Así que no hay veinte animaciones que apagar: hay una.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. EL REBOTE ETERNO DEL BOTÓN DE WHATSAPP
   Un botón fijo, siempre en pantalla, saltando para siempre. No comunica un
   cambio de estado ni una causa: solo pide atención. Y compite justo con el
   botón que cobra.
   Se queda quieto y responde al puntero, que es cuando sí hay algo que decir.
   -------------------------------------------------------------------------- */
.whatsapp-float {
  animation: none !important;
  transition: transform var(--lb-dur-1) var(--lb-curva-entrada);
}
.whatsapp-float:hover { transform: scale(1.06); }
.whatsapp-float:active { transform: scale(0.97); }

/* La banda de marquesina SÍ se queda: una marquesina es un bucle continuo por
   definición, y es de los pocos sitios donde `linear` es lo correcto. Con
   movimiento reducido se detiene sola por la regla global. */

/* ----------------------------------------------------------------------------
   2. ENTRADA DE LAS TARJETAS
   Comunica dos cosas: que el bloque llegó completo, y en qué orden leerlo.
   -------------------------------------------------------------------------- */
@keyframes lb-entrar {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.lb-grid > *,
.productos-grid > * {
  animation: lb-entrar var(--lb-dur-3) var(--lb-curva-entrada) backwards;
}
.lb-grid > :nth-child(1),  .productos-grid > :nth-child(1)  { animation-delay: 0ms; }
.lb-grid > :nth-child(2),  .productos-grid > :nth-child(2)  { animation-delay: 40ms; }
.lb-grid > :nth-child(3),  .productos-grid > :nth-child(3)  { animation-delay: 80ms; }
.lb-grid > :nth-child(4),  .productos-grid > :nth-child(4)  { animation-delay: 120ms; }
.lb-grid > :nth-child(5),  .productos-grid > :nth-child(5)  { animation-delay: 160ms; }
/* Tope: del sexto en adelante, todos con el mismo retardo. */
.lb-grid > :nth-child(n+6),
.productos-grid > :nth-child(n+6) { animation-delay: 200ms; }

/* ----------------------------------------------------------------------------
   3. LA COSTURA SE COSE
   El rótulo de sección aparece y el pespunte se dibuja de izquierda a derecha,
   como si lo cosieran. Es el único gesto narrativo del sistema y solo ocurre
   una vez por sección. Escala en X: es `transform`, no `width`.
   -------------------------------------------------------------------------- */
@keyframes lb-coser {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.lb-eyebrow::after,
.section__label::after {
  transform-origin: left center;
  animation: lb-coser var(--lb-dur-3) var(--lb-curva-entrada) 80ms backwards;
}

/* ----------------------------------------------------------------------------
   4. LA TALLA SE ASIENTA
   Al elegir talla, la pastilla se hunde un punto y vuelve. Comunica que el
   control aceptó la pulsación — que es justo la duda que tiene quien compra un
   jean por internet.
   -------------------------------------------------------------------------- */
@keyframes lb-asentar {
  0%   { transform: scale(1); }
  45%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}
.talla-opcion.is-active,
.talla-opcion[aria-checked="true"] {
  animation: lb-asentar var(--lb-dur-2) var(--lb-curva-entrada);
}
/* Y el pespunte de la talla elegida se cose igual que el de las secciones. */
.talla-opcion.is-active::after,
.talla-opcion[aria-checked="true"]::after {
  transform-origin: left center;
  animation: lb-coser var(--lb-dur-2) var(--lb-curva-entrada) backwards;
}

/* ----------------------------------------------------------------------------
   5. LA BARRA DE COMPRA ENTRA DESDE ABAJO
   Aparece desde donde vive. Continuidad espacial, no un parpadeo.
   -------------------------------------------------------------------------- */
@keyframes lb-subir {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: none; }
}
.lb-barra-compra {
  animation: lb-subir var(--lb-dur-3) var(--lb-curva-entrada) backwards;
}

/* ----------------------------------------------------------------------------
   6. LO QUE SE SALE DEL SISTEMA
   `style.css` anima `box-shadow` (×4), `all` (×3), `padding`, `height` y
   `left`. Ninguna de esas va en la GPU: cada fotograma obliga al navegador a
   recalcular la maquetación. Se acotan a las dos que sí valen, sin tocar la
   hoja vieja.
   -------------------------------------------------------------------------- */
.btn,
.lb-card,
.product-card,
.talla-opcion,
.form-input,
.form-select,
.form-textarea,
.header__cart,
.header__social-link {
  transition-property: transform, opacity, border-color, color, background-color;
}

/* ----------------------------------------------------------------------------
   7. CONTENIDO FUERA DE PANTALLA
   Las secciones largas dejan de pintarse hasta que se acercan. `contain-
   intrinsic-size` evita que el salto de scroll se note.
   -------------------------------------------------------------------------- */
.lb-editorial,
.faq-section,
.reviews-grid,
.blog-grid {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}