/* ============================================================
   BARBER SHOP LKM — animations.css
   Scroll reveal + will-change (liberado en JS con transitionend)
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}

.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left.visible,
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Respeta la preferencia de movimiento reducido: apaga toda animación
   decorativa (aurora, marquee, reveals de entrada, pulso, cursor) y
   deja el contenido visible de inmediato, sin depender de JS. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; transition: none; }
  .hero-scroll { animation: none; }

  .aurora span { animation: none !important; }
  .marquee-track { animation: none !important; }
  .whatsapp-float::after { animation: none !important; display: none; }
  .hero-art-glow, .hero-mark { animation: none !important; }

  .reveal-line-inner,
  .hero-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-accent-line { animation: none !important; width: 90px !important; }

  .cursor-dot, .cursor-ring { display: none !important; }
  body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button { cursor: auto !important; }

  .gal-item, .btn-cta, .btn-cta-outline { transition: none !important; }
}