/* ========================================================================== Animations — scroll reveals, loading screen, reduced-motion handling ========================================================================== */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } [data-reveal-group] > * { transition-delay: calc(var(--reveal-index, 0) * 70ms); } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } .no-js [data-reveal] { opacity: 1; transform: none; } /* ---- Loading screen ---- */ .loader { position: fixed; inset: 0; z-index: var(--z-loader); display: flex; align-items: center; justify-content: center; background: var(--color-ink-950); transition: opacity var(--duration-slow) var(--ease-standard), visibility var(--duration-slow); } .loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .loader__mark { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; } .loader__logo { width: 56px; height: 56px; } .loader__logo .draw { stroke-dasharray: 220; stroke-dashoffset: 220; animation: draw-line 1.1s var(--ease-out) forwards; } @keyframes draw-line { to { stroke-dashoffset: 0; } } .loader__bar { width: 11rem; height: 3px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.12); overflow: hidden; } .loader__bar span { display: block; height: 100%; width: 40%; background: var(--gradient-cta); border-radius: var(--radius-pill); animation: loader-sweep 1s ease-in-out infinite; } @keyframes loader-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(280%); } } .loader__text { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-on-dark-muted); } @media (prefers-reduced-motion: reduce) { .loader { transition: opacity 200ms linear; } .loader__logo .draw { animation: none; stroke-dashoffset: 0; } .loader__bar span { animation: none; width: 70%; } } /* JS marks with .js-ready once loader logic has bound; if JS never runs, this rule keeps the loader from ever trapping a visitor. */ .no-js .loader { display: none; }