/* ============================================================ Line by Fraxuo — animations.css Reveal robusto: VISIBLE por defecto. Sólo se oculta cuando JS confirma que va a revelar (.line-reveal en ) y se anima con .is-revealed vía IntersectionObserver. Sin depender de GSAP/rAF. ============================================================ */ /* --- estados ocultos: SÓLO bajo .line-reveal (lo añade animations.js) --- */ .line-reveal [data-animate="fade-up"]{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .line-reveal [data-animate="fade-up"].is-revealed{ opacity:1; transform:none; } .line-reveal [data-animate="title"] .line-line{ display:inline-block; transform:translateY(110%); transition:transform .85s var(--ease); } .line-reveal [data-animate="title"].is-revealed .line-line{ transform:translateY(0); } .line-reveal [data-animate="title"].is-revealed .line-line-mask:nth-child(2) .line-line{ transition-delay:.10s; } .line-reveal [data-animate="title"].is-revealed .line-line-mask:nth-child(3) .line-line{ transition-delay:.20s; } .line-reveal [data-animate="stagger-up"] > *{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease); } .line-reveal [data-animate="stagger-up"].is-revealed > *{ opacity:1; transform:none; } .line-reveal [data-animate="stagger-up"].is-revealed > *:nth-child(2){ transition-delay:.05s; } .line-reveal [data-animate="stagger-up"].is-revealed > *:nth-child(3){ transition-delay:.10s; } .line-reveal [data-animate="stagger-up"].is-revealed > *:nth-child(4){ transition-delay:.15s; } .line-reveal [data-animate="stagger-up"].is-revealed > *:nth-child(5){ transition-delay:.20s; } .line-reveal [data-animate="stagger-up"].is-revealed > *:nth-child(6){ transition-delay:.25s; } .line-reveal [data-animate="stagger-up"].is-revealed > *:nth-child(7){ transition-delay:.30s; } .line-reveal [data-animate="stagger-up"].is-revealed > *:nth-child(8){ transition-delay:.35s; } /* no-JS: todo visible */ .no-js [data-animate]{ opacity:1 !important; transform:none !important; } /* keyframes */ @keyframes line-bounce{ 0%,100%{ transform:scaleY(.5); opacity:.5; } 50%{ transform:scaleY(1.5); opacity:1; } } @keyframes line-drip{ 0%{ transform:scaleY(0); transform-origin:top; opacity:0; } 40%{ opacity:1; } 100%{ transform:scaleY(1); transform-origin:top; opacity:0; } } @keyframes line-pulsering{ 0%{ transform:scale(.8); opacity:.7; } 100%{ transform:scale(2.2); opacity:0; } } @keyframes line-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.2; } } /* reduce motion: todo visible y sin animación */ @media (prefers-reduced-motion: reduce){ .line-reveal [data-animate], .line-reveal [data-animate="stagger-up"] > *, .line-reveal [data-animate="title"] .line-line{ opacity:1 !important; transform:none !important; transition:none !important; } .line-loader__signal span, .line-hero__scroll span, .line-ticker__track{ animation:none !important; } *{ scroll-behavior:auto !important; } }