/* ============================================================
   Tornillería Lupserr — Clases de estado para GSAP
   Los elementos con estas clases arrancan invisibles;
   GSAP los anima al estado visible.
   ============================================================ */

/* Estado inicial: invisible — GSAP los anima a opacity:1 */
.gsap-fade-up,
.gsap-fade-in,
.hero-content > *,
.product-card,
.category-card,
.feature-item,
.section-reveal {
  opacity: 0;
}

/* Evitar flash durante carga — visible si JS está desactivado */
.no-js .gsap-fade-up,
.no-js .gsap-fade-in,
.no-js .hero-content > *,
.no-js .product-card,
.no-js .category-card,
.no-js .feature-item,
.no-js .section-reveal {
  opacity: 1;
}

/* will-change en elementos que definitivamente se animarán */
.hero-content > *,
.product-card,
.category-card {
  will-change: transform, opacity;
}