/* Hallmark · component: loading entrance · genre: modern-minimal
 * theme: studied-DNA (source: https://nexus.cld9.ai/) / existing Arka identity
 * Outline-to-fill logo, then opacity reveal. P5 H5 E5 S5 R4 V4. */
.site-loader{display:none;position:fixed;inset:0;z-index:100;background:var(--color-paper);color:var(--color-ink);opacity:1;transition:opacity 450ms var(--ease-out)}
html.loader-active{overflow:hidden}
.loader-active .site-loader{display:grid;place-items:center}
.site-loader.is-leaving{opacity:0;pointer-events:none}
.loader-center{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,2vw,28px);width:100%;padding:24px}
.loader-logo{display:block;width:clamp(220px,52vw,760px);max-width:100%;height:auto;overflow:visible}
.loader-center p{margin:0;color:var(--color-muted);font-family:var(--font-mono);font-size:clamp(10px,.9vw,13px);line-height:1.5;letter-spacing:.18em;text-transform:uppercase;text-align:center}
.loader-skip{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:12px 16px;background:transparent;border:1px solid var(--color-rule);border-radius:999px;color:var(--color-muted);font:inherit;font-size:12px;cursor:pointer;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.loader-skip:hover{color:var(--color-ink);border-color:var(--color-ink)}
.loader-skip:active{background:var(--color-selected)}
.loader-skip:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.site-loader{transition-duration:100ms}.loader-skip{transition:none}}