/* motion.css — animaciones de SICA Propiedades */ @media (prefers-reduced-motion: no-preference) { /* ============ HERO: ENTRADA EN CASCADA ============ Se activa cuando boot-done se agrega al (después de que el boot loader desaparece). Cada elemento tiene un transition-delay distinto para el efecto cascada. */ .hero-mark, .hero .eyebrow, .hero h1, .hero .hero-slogan, .hero-search { opacity: 0; transform: translateY(20px); transition: opacity .75s var(--ease), transform .75s var(--ease); } html.boot-done .hero-mark { opacity: 1; transform: none; transition-delay: 0s; } html.boot-done .hero .eyebrow { opacity: 1; transform: none; transition-delay: .12s; } html.boot-done .hero h1 { opacity: 1; transform: none; transition-delay: .26s; } html.boot-done .hero .hero-slogan { opacity: 1; transform: none; transition-delay: .44s; } html.boot-done .hero-search { opacity: 1; transform: none; transition-delay: .6s; } /* ============ HERO BG: KEN BURNS ============ Zoom lento y sutil en cada slide del fondo del hero. Se combina con el heroFade ya existente. */ @keyframes heroKenBurns { from { transform: scale(1); } to { transform: scale(1.07); } } .hero-bg .slide { animation-name: heroFade, heroKenBurns; animation-duration: 30s, 30s; animation-timing-function: var(--ease), linear; animation-iteration-count: infinite, infinite; transform-origin: center center; will-change: opacity, transform; } /* ============ SCROLL REVEAL ============ */ /* Elemento individual: fade + slide-up */ [data-anim] { opacity: 0; transform: translateY(30px); transition: opacity .75s var(--ease), transform .75s var(--ease); } [data-anim].is-visible { opacity: 1; transform: none; } /* Contenedor con hijos en cascada */ [data-anim-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity .65s var(--ease), transform .65s var(--ease); } [data-anim-stagger].is-visible > * { opacity: 1; transform: none; } /* Delays por posición — cap en ítem 7+ */ [data-anim-stagger].is-visible > *:nth-child(1) { transition-delay: 0s; } [data-anim-stagger].is-visible > *:nth-child(2) { transition-delay: .08s; } [data-anim-stagger].is-visible > *:nth-child(3) { transition-delay: .16s; } [data-anim-stagger].is-visible > *:nth-child(4) { transition-delay: .24s; } [data-anim-stagger].is-visible > *:nth-child(5) { transition-delay: .32s; } [data-anim-stagger].is-visible > *:nth-child(6) { transition-delay: .40s; } [data-anim-stagger].is-visible > *:nth-child(n+7) { transition-delay: .40s; } }