/* ===================================================================== Maderera Alma — animations.css Keyframes + reveal system ===================================================================== */ /* --------------------------------------------------------------------- Reveal base — sólo aplica cuando JS está activo (html.js). Si JS no carga, los elementos se ven sin animación (degradación elegante, sin secciones vacías). El script que agrega html.js vive en el , antes de cargar este CSS, así que no hay FOUC. --------------------------------------------------------------------- */ html.js .ma-reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ma-ease), transform 700ms var(--ma-ease); transition-delay: var(--ma-reveal-delay, 0ms); will-change: opacity, transform; } html.js .ma-reveal--in { opacity: 1; transform: translateY(0); } /* Variantes — sólo con JS activo */ html.js .ma-reveal--fade { transform: none; } html.js .ma-reveal--left { transform: translateX(-32px); } html.js .ma-reveal--right { transform: translateX(32px); } html.js .ma-reveal--scale { transform: scale(0.96); } html.js .ma-reveal--in, html.js .ma-reveal--in.ma-reveal--left, html.js .ma-reveal--in.ma-reveal--right, html.js .ma-reveal--in.ma-reveal--scale { transform: none; } /* --------------------------------------------------------------------- Hero intro (sin esperar al observer — animación de entrada inicial) --------------------------------------------------------------------- */ .ma-hero__inner > * { opacity: 0; transform: translateY(20px); animation: ma-hero-rise 900ms var(--ma-ease) forwards; } .ma-hero__eyebrow { animation-delay: 80ms; } .ma-hero__title { animation-delay: 200ms; } .ma-hero__lead { animation-delay: 380ms; } .ma-hero__actions { animation-delay: 540ms; } .ma-hero__meta { animation-delay: 700ms; } @keyframes ma-hero-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* --------------------------------------------------------------------- Underline animado en links (efecto extra en algunos CTAs) --------------------------------------------------------------------- */ @keyframes ma-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* --------------------------------------------------------------------- Drift sutil en el fondo del hero (da vida sin distraer) --------------------------------------------------------------------- */ @keyframes ma-drift { 0% { transform: scale(1.04) translate3d(0,0,0); } 50% { transform: scale(1.06) translate3d(-1%, -1%, 0); } 100% { transform: scale(1.04) translate3d(0,0,0); } } .ma-hero__bg { animation: ma-drift 24s var(--ma-ease) infinite; } /* --------------------------------------------------------------------- Shimmer del hero scroll indicator --------------------------------------------------------------------- */ @keyframes ma-scroll-pulse { 0% { transform: scaleY(0); opacity: 0; } 30% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(0); opacity: 0; transform-origin: bottom; } } /* --------------------------------------------------------------------- Sutil sway en los anillos del intro --------------------------------------------------------------------- */ .ma-intro__media { animation: ma-sway 12s var(--ma-ease) infinite; } @keyframes ma-sway { 0%, 100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(-1deg) scale(1.015); } } /* --------------------------------------------------------------------- Tag rotando para producto (efecto sutil cuando carga) --------------------------------------------------------------------- */ @keyframes ma-pop-in { 0% { opacity: 0; transform: translateY(8px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .ma-card__cat { animation: ma-pop-in 600ms var(--ma-ease) 200ms backwards; }