/* ========================================================================== RT — Sistema de animaciones (clases base; GSAP controla los reveals de scroll vía animations.js, esto cubre transiciones CSS puras y el estado inicial de los elementos que GSAP va a animar) ========================================================================== */ /* Estado inicial de elementos con reveal por scroll. GSAP quita estas clases / anima desde este estado al entrar en viewport. Si JS no carga, el contenido igual es visible y accesible (progressive enhancement): estas reglas solo aplican mientras .js-ready está en . */ html:not(.js-ready) [data-reveal] { opacity: 1 !important; transform: none !important; } html.js-ready [data-reveal="fade-up"] { opacity: 0; transform: translateY(40px); } html.js-ready [data-reveal="fade"] { opacity: 0; } html.js-ready [data-reveal="clip"] { clip-path: inset(0 100% 0 0); } html.js-ready [data-reveal="scale"] { opacity: 0; transform: scale(1.08); } html.js-ready [data-reveal-stagger] > * { opacity: 0; transform: translateY(30px); } /* Page transition overlay */ .page-transition { position: fixed; inset: 0; background: var(--color-bg-dark); z-index: 9999; transform: translateY(100%); pointer-events: none; } .page-transition.is-entering { transform: translateY(0); } /* Loader breve inicial */ .preloader { position: fixed; inset: 0; background: var(--color-bg); z-index: 9998; display: flex; align-items: center; justify-content: center; transition: opacity .4s var(--ease-standard), visibility .4s var(--ease-standard); } .preloader img { height: 32px; opacity: 0; animation: preloaderFade .5s var(--ease-standard) forwards; } @keyframes preloaderFade { to { opacity: 1; } } .preloader.is-hidden { opacity: 0; visibility: hidden; } /* Hero headline: reveal por líneas */ .hero-line { overflow: hidden; } .hero-line__inner { display: block; transform: translateY(100%); color: var(--color-accent-dos); } html:not(.js-ready) .hero-line__inner { transform: none; } /* Custom cursor (opcional, solo desktop — ver animations.js) */ .custom-cursor { position: fixed; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); pointer-events: none; z-index: var(--z-cursor); mix-blend-mode: difference; transform: translate(-50%, -50%); transition: width .2s var(--ease-standard), height .2s var(--ease-standard); display: none; } @media (hover: hover) and (pointer: fine) { html.has-custom-cursor .custom-cursor { display: block; } } .custom-cursor.is-active { width: 34px; height: 34px; } /* ---------- Accesibilidad: respetar prefers-reduced-motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } html.js-ready [data-reveal], html.js-ready [data-reveal-stagger] > *, .hero-line__inner { opacity: 1 !important; transform: none !important; clip-path: none !important; } .custom-cursor { display: none !important; } }