/* ============================================================================ Animaciones sutiles — Grupo Mecsa Filosofía Emil Kowalski: pocas, rápidas (<500ms), ease-out, con propósito. TODO bajo prefers-reduced-motion: no-preference. SEGURIDAD: el estado "oculto" del reveal SOLO aplica cuando tiene la clase `anim-on` (la agrega reveal.js). Si el JS no corre / falla / está bloqueado → no hay `anim-on` → el contenido se ve normal (sin animación). Así nunca queda contenido invisible. ============================================================================ */ @media (prefers-reduced-motion: no-preference) { /* ── 1. Reveal al hacer scroll (gated por .anim-on) ─────────────────────── */ html.anim-on .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease-out, transform .5s ease-out; will-change: opacity, transform; } html.anim-on .reveal.in { opacity: 1; transform: none; } /* Stagger: hijos directos entran uno tras otro (grillas de cards/logos). */ html.anim-on .reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .5s ease-out, transform .5s ease-out; will-change: opacity, transform; } html.anim-on .reveal-stagger.in > * { opacity: 1; transform: none; } html.anim-on .reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; } html.anim-on .reveal-stagger.in > *:nth-child(2) { transition-delay: 70ms; } html.anim-on .reveal-stagger.in > *:nth-child(3) { transition-delay: 140ms; } html.anim-on .reveal-stagger.in > *:nth-child(4) { transition-delay: 210ms; } html.anim-on .reveal-stagger.in > *:nth-child(5) { transition-delay: 280ms; } html.anim-on .reveal-stagger.in > *:nth-child(6) { transition-delay: 350ms; } html.anim-on .reveal-stagger.in > *:nth-child(n+7) { transition-delay: 400ms; } /* ── 2. Hover: leve levantada en tarjetas (feedback) — siempre seguro ───── */ .card-gm-primary, .card.tcn-card { transition: transform .18s ease-out, box-shadow .18s ease-out; } .col-sm:hover > .card-gm-primary, .card-gm-primary:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -14px rgba(1, 52, 131, .38); } /* ── 3. Press: botones responden al clic (feedback) — siempre seguro ────── */ .btn-gm-primary, .btn-gm-outline-light, .btn-gm-link-primary, .btn-pay { transition: transform .12s ease-out, background-color .15s ease, color .15s ease, box-shadow .15s ease; } .btn-gm-primary:active, .btn-gm-outline-light:active, .btn-gm-link-primary:active, .btn-pay:active { transform: scale(.97); } }