/* Logo reveal loader (after Osmo), home page only. The wordmark fills left to right while a bar
   runs along the bottom, then the black panel lifts off the page. Only shown while html has
   .is-loading, which an inline <head> script adds on the first visit of a session (not for
   reduced motion), so the page is never covered when JavaScript is off. */

@font-face { font-family: 'Geist Mono'; src: url('../fonts/geistmono-400-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

.loader { position: fixed; inset: 0 0 auto; z-index: 2000; display: none; width: 100%; height: 100dvh; color: #fff; }
.is-loading .loader { display: block; }
html.is-loading, html.is-loading body { overflow: hidden; }

.loader__bg { position: absolute; inset: 0; background: #000; }
.loader__bg-bar { position: absolute; inset: auto 0 0; z-index: 1; height: 8px; background: #fff; transform: scale3d(0, 1, 1); transform-origin: 0% 50%; }

.loader__container { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
.loader__logo-wrap { position: relative; display: grid; }
.loader__logo-item { grid-area: 1 / 1; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', sans-serif; font-size: clamp(36px, 4.5vw, 64px); font-weight: 600; line-height: 1; letter-spacing: -0.055em; white-space: nowrap; -webkit-font-smoothing: antialiased; }
.loader__logo-item.is--base { opacity: 0.2; }
.loader__logo-item.is--top { clip-path: inset(0% 100% 0% 0%); }

.loader__text-wrap { position: absolute; bottom: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.loader__text-el { position: absolute; margin-bottom: -0.25em; padding-bottom: 0.25em; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }

[data-load-reset] { opacity: 0; }