/* Premium full-screen preloader. Rendered server-side as the first child of and visible by default (no JS required to show it) so there is never a flash of unstyled/unloaded content. js/preloader.js only ever adds timed motion and, once the page is ready, fades this out and deletes it. */ .preloader { position: fixed; inset: 0; z-index: var(--z-preloader); display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 42%, var(--color-mint-tint) 0%, var(--color-bg) 68%); } .preloader-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); padding: var(--space-6); } /* ---------- Mark: rotating arc + tooth glyph ---------- */ .preloader-mark { position: relative; width: clamp(76px, 14vw, 112px); height: clamp(76px, 14vw, 112px); display: flex; align-items: center; justify-content: center; } .preloader-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; } .preloader-ring-track, .preloader-ring-arc { fill: none; stroke-width: 2.5; } .preloader-ring-track { stroke: var(--color-border-strong); opacity: 0.5; } .preloader-ring-arc { stroke: var(--color-accent); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 245; } .preloader-tooth { position: relative; width: 38%; height: 38%; color: var(--color-primary); animation: preloader-breathe 2.4s var(--ease-in-out) infinite; } .preloader-tooth-path { fill: currentColor; } @keyframes preloader-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* ---------- Wordmark ---------- */ .preloader-word { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); letter-spacing: 0.14em; color: var(--color-ink); text-align: center; text-transform: uppercase; } .preloader-word span { display: block; margin-top: var(--space-1); font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.28em; color: var(--color-ink-soft); } /* ---------- Progress bar ---------- */ .preloader-bar { width: clamp(140px, 32vw, 200px); height: 2px; border-radius: var(--radius-full); background: var(--color-border); overflow: hidden; } .preloader-bar-fill { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); } /* ---------- Exit ---------- */ .preloader { opacity: 1; } /* Applied the instant js/preloader.js begins the exit (before the opacity tween even starts) so the — now fading — overlay can never intercept a click meant for the page underneath. Kept independent of the [hidden]/display rule below, which only lands once the fade has actually finished. */ .preloader.is-hidden { pointer-events: none !important; } .preloader[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .preloader-tooth { animation: none; } }