/* ============================================= TL 10 BARBERÍA — animations.css Progressive enhancement: el estado "oculto" inicial solo se aplica cuando .js-anim está en . Sin JS todo el contenido es visible por defecto. ============================================= */ /* ---- Transition base (siempre activa) ---- */ .reveal, .reveal-left, .reveal-right, .reveal-stagger { transition: opacity 0.7s ease, transform 0.7s ease; } /* ---- Estado inicial oculto — solo cuando JS está activo ---- */ .js-anim .reveal { opacity: 0; transform: translateY(28px); } .js-anim .reveal-left { opacity: 0; transform: translateX(-36px); } .js-anim .reveal-right { opacity: 0; transform: translateX(36px); } .js-anim .reveal-stagger{ opacity: 0; transform: translateY(24px); } /* ---- Estado visible ---- */ .js-anim .reveal.visible, .js-anim .reveal-left.visible, .js-anim .reveal-right.visible, .js-anim .reveal-stagger.visible { opacity: 1; transform: translate(0, 0); } /* ---- Stagger delays ---- */ .reveal-stagger:nth-child(1) { transition-delay: 0s; } .reveal-stagger:nth-child(2) { transition-delay: 0.12s; } .reveal-stagger:nth-child(3) { transition-delay: 0.24s; } .reveal-stagger:nth-child(4) { transition-delay: 0.36s; } .reveal-stagger:nth-child(5) { transition-delay: 0.48s; } .reveal-stagger:nth-child(6) { transition-delay: 0.60s; } /* ---- Hero entry animation ---- */ .hero-content { animation: heroFadeUp 1s ease both; animation-delay: 0.3s; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } /* ---- Gallery reveal override ---- */ .js-anim .gal-item.reveal { transform: scale(0.97) translateY(16px); } .js-anim .gal-item.reveal.visible { transform: scale(1) translateY(0); } /* ---- Reduce motion override ---- */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal-left, .reveal-right, .reveal-stagger, .js-anim .reveal, .js-anim .reveal-left, .js-anim .reveal-right, .js-anim .reveal-stagger, .gal-item.reveal, .hero-content { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; } }