/* ============================================================ animations.css — Telemétrico Animaciones de scroll reutilizables para todas las páginas. Requiere IntersectionObserver en el JS de cada página. Uso: 1. Linkeá este archivo en el de cada página 2. El JS del IntersectionObserver agrega las clases: - anim-hidden → estado inicial (invisible) - anim-fade-up → entra desde abajo con fade - anim-slide-left → entra desde la izquierda con fade - anim-visible → estado final, lo agrega el observer ============================================================ */ /* ─── KEYFRAMES ───────────────────────────────────────────── */ @keyframes _fadeUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } } @keyframes _slideLeft { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: translateX(0); } } /* ─── ESTADO INICIAL ──────────────────────────────────────── */ .anim-hidden { opacity: 0; } /* ─── ANIMACIONES (se activan al agregar anim-visible) ───── */ .anim-fade-up.anim-visible { animation: _fadeUp 0.6s ease both; } .anim-slide-left.anim-visible { animation: _slideLeft 0.6s ease both; } /* ─── ACCESIBILIDAD ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .anim-hidden, .anim-fade-up, .anim-slide-left { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } } /* ─── HERO H1 / H2: animación CSS pura ─────────────────────────────────────── Se usa CSS en lugar de JS para evitar conflictos con background-clip: text */ @keyframes _heroTitle { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } } .hero-animate-h1 { animation: _heroTitle 0.7s ease both; } .hero-animate-h2 { animation: _heroTitle 0.7s ease 0.15s both; } @media (prefers-reduced-motion: reduce) { .hero-animate-h1, .hero-animate-h2 { animation: none !important; } }