/* ============================================================ EPIORA — animations.css - Reveal states (only hidden when .js-ready is set) - Page transition overlay - Custom cursor - Marquee animation ============================================================ */ /* ============ REVEAL STATES ============ */ /* Everything below is scoped under .js-ready (added by a tiny inline script in ). If JavaScript is disabled, content simply renders visible with no initial hidden states. */ .js-ready .reveal-line { display: block; overflow: hidden; } .js-ready .reveal-line-inner { display: block; transform: translateY(110%); will-change: transform; } .js-ready [data-reveal="fade"] { opacity: 0; transform: translateY(30px); will-change: transform, opacity; } .js-ready [data-reveal="image"] { opacity: 0; will-change: transform, opacity; } .js-ready [data-reveal="image"] img { transform: scale(1.08); will-change: transform; } /* ============ PAGE TRANSITION OVERLAY ============ */ .page-transition { position: fixed; inset: 0; z-index: 1500; pointer-events: none; visibility: hidden; } .page-transition.is-active { visibility: visible; pointer-events: auto; } .page-transition__panel { position: absolute; inset: 0; background: var(--dark); transform: scaleY(0); transform-origin: bottom center; } .page-transition__panel--b { background: var(--bg); transform-origin: top center; } /* ============ CUSTOM CURSOR ============ */ .cursor { position: fixed; top: 0; left: 0; z-index: 3000; pointer-events: none; display: none; } .cursor.is-visible { display: block; } .cursor__dot { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--gold-mid); transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out), margin 0.35s var(--ease-out), background-color 0.35s ease; } .cursor__label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.625rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--dark); opacity: 0; white-space: nowrap; transition: opacity 0.25s ease; } .cursor.is-link .cursor__dot { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: var(--gold); } .cursor.is-link .cursor__label { opacity: 1; } .cursor.is-dragging .cursor__dot { background: var(--gold); } .cursor.is-dragging .cursor__label { opacity: 1; } /* Hide native cursor only when the custom one is confirmed active */ html.has-cursor, html.has-cursor * { cursor: none !important; } /* ============ MARQUEE ANIMATION ============ */ .marquee.is-animated .marquee__track { animation: marquee-scroll 42s linear infinite; } @keyframes marquee-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* ============ REDUCED MOTION ============ */ @media (prefers-reduced-motion: reduce) { .js-ready .reveal-line-inner { transform: none; } .js-ready [data-reveal="fade"] { opacity: 1; transform: none; } .js-ready [data-reveal="image"], .js-ready [data-reveal="image"] img { opacity: 1; transform: none; } .cursor { display: none !important; } .page-transition__panel { transform: none; } html.has-cursor, html.has-cursor * { cursor: auto !important; } }