/* Entry preloader: the Ergodex mark resolves from a cipher grid, then docks onto the header logo.
   Ported from the ergodex-redesign study; every rule is scoped under .preloader so it cannot leak into the site styles. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap");
.preloader { --mark-size: min(96px, 20vw, 28svh); --font-display: Montserrat, 'Segoe UI', sans-serif; position: fixed; inset: 0; z-index: 1000; background: #171b19; display: grid; place-items: center; }
html[data-theme=light] .preloader { background: #f8f9f7; }
.preloader.done { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.preloader[hidden] { display: none; }
.preloader .composition, .logo .composition { position: relative; width: calc(var(--mark-size) * 3.34); height: var(--mark-size); transform-origin: center; }
:is(.preloader, .logo) .grid { width: var(--mark-size); transform: translateX(117%); position: relative; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); gap: calc(var(--mark-size) * .015625); aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
:is(.preloader, .logo) .cell { position: relative; min-width: 0; min-height: 0; border: 0; outline: none; box-shadow: none; }
:is(.preloader, .logo) .glyph { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(7px, 2.3vw, 9px)/1 ui-monospace, SFMono-Regular, Consolas, monospace; transform-origin: center; }
:is(.preloader, .logo) .grid::after { content: ''; position: absolute; inset: 0; border: calc(var(--mark-size) * .072916667) solid #fd7001; border-radius: 50%; clip-path: inset(0 0 0 50%); opacity: var(--arc-opacity, 0); mask-image: conic-gradient(from 0deg, #000 0deg var(--semicircle-sweep, 0deg), transparent var(--semicircle-sweep, 0deg) 360deg); -webkit-mask-image: conic-gradient(from 0deg, #000 0deg var(--semicircle-sweep, 0deg), transparent var(--semicircle-sweep, 0deg) 360deg); pointer-events: none; }
:is(.preloader, .logo) .arc-cipher { position: absolute; inset: 0; pointer-events: none; }
:is(.preloader, .logo) .arc-cipher span { position: absolute; transform: translate(-50%, -50%); color: #fd7001; font: 700 calc(var(--mark-size) * .085) / 1 ui-monospace, monospace; }
:is(.preloader, .logo) .wordmark { position: absolute; left: calc(var(--mark-size) * 1.065); top: 0; width: calc(var(--mark-size) * 2.275); height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; opacity: 0; font-family: var(--font-display); }
:is(.preloader, .logo) .brand-name { color: #fd7001; font-size: calc(var(--mark-size) * .55); font-weight: 600; letter-spacing: -.045em; line-height: 1.08; }
:is(.preloader, .logo) .brand-labs { color: #929292; font-size: calc(var(--mark-size) * .18); font-weight: 400; letter-spacing: .48em; margin-right: -.48em; line-height: 1.3; margin-top: calc(var(--mark-size) * .03); }
:is(.preloader, .logo) .cipher-letter { position: relative; display: inline-block; }
:is(.preloader, .logo) .cipher-sizing { visibility: hidden; }
:is(.preloader, .logo) .cipher-live { position: absolute; inset: 0; text-align: center; }
/* The header logo slot: sized like the old logo image; the docked composition becomes the logo. */
.home .logo { --mark-size: clamp(2rem, 2.7vw, 2.75rem); display: block; width: calc(var(--mark-size) * 3.34); height: var(--mark-size); text-decoration: none; }
@media (max-width: 30rem) { .home .logo { --mark-size: 1.75rem; } }
.logo .composition { transform: none; opacity: 1; transition: opacity .15s ease; }
.logo:hover .composition { opacity: .75; }
.logo .wordmark { opacity: 1; }
/* Already played this session (flag set inline in <head>): keep the overlay from flashing before the script runs. */
html.preloader-played .preloader { display: none; }