/* 404 — the site's plate, one door.

   It lives on its own sheet rather than in page.css because not-found.tsx
   renders inside the root layout, outside the (site) shell: it links site.css
   for the tokens, type and .btn, and this file for everything the page owns.
   Nothing else loads it, so it carries no selector that isn't used here. */

.nf{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:clamp(80px,12vh,140px) var(--gut)}

/* ---------- atmosphere ---------- */
/* the node mesh: a canvas, full bleed, behind everything. See notfound.js. */
.nf-mesh{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* two slow aurora lobes in the brand blues, the hero's light without its video */
.nf-aura{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.nf-aura i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.nf-aura i:first-child{width:min(70vw,780px);aspect-ratio:1;left:50%;top:38%;translate:-50% -50%;background:radial-gradient(circle,rgba(86,116,255,.55),transparent 65%);animation:nf-float 14s var(--ease) infinite alternate}
.nf-aura i:last-child{width:min(48vw,520px);aspect-ratio:1;left:62%;top:62%;translate:-50% -50%;background:radial-gradient(circle,rgba(183,242,255,.3),transparent 65%);animation:nf-float 11s var(--ease) infinite alternate-reverse}
@keyframes nf-float{from{transform:translate(-4%,-3%) scale(.94)}to{transform:translate(5%,4%) scale(1.08)}}

/* vignette, so the edges fall away instead of ending */
.nf:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 45%,transparent 48%,rgba(4,5,10,.6) 100%)}

/* ---------- the numeral ---------- */
/* 404 set oversized in outline behind the sentence: the error is legible at a
   glance without a line of copy spending itself on saying it */
.nf-ghost{position:absolute;left:50%;top:48%;translate:-50% -50%;z-index:0;pointer-events:none;user-select:none;
  font:300 clamp(200px,42vw,620px)/.8 var(--display);letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1.5px rgba(157,180,255,.14);
  animation:nf-breathe 7s var(--ease) infinite alternate}
@keyframes nf-breathe{from{opacity:.55;transform:scale(1)}to{opacity:.95;transform:scale(1.03)}}

/* ---------- copy ---------- */
.nf-copy{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;max-width:min(760px,100%)}
.nf-copy>*{opacity:0;animation:nf-up 1s var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes nf-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.nf-eyebrow{display:inline-flex;gap:10px;align-items:center;font:500 13px var(--display);color:var(--cyan);
  border:1px solid rgba(183,242,255,.22);background:rgba(183,242,255,.05);padding:8px 14px;border-radius:999px;margin-bottom:var(--gap-m)}
.nf-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--coral);box-shadow:0 0 12px var(--coral);animation:blink 1.4s infinite}

.nf h1{font-size:clamp(44px,7.4vw,104px);line-height:.92;letter-spacing:-.05em;max-width:none;margin-bottom:var(--gap-s)}
.nf h1 .serif{font-size:1.08em}
.nf-sub{font-size:clamp(17px,1.4vw,21px);line-height:1.6;color:var(--mut);max-width:26em;text-wrap:balance;margin-bottom:var(--gap-m)}

/* the one door */
.nf .btn{padding:18px 32px;font-size:16.5px}

@media (max-width:640px){
  /* The numeral has to clear the sentence rather than sit inside it: at this
     width the copy fills the void, and an outline behind body text is noise. */
  .nf-ghost{font-size:52vw;top:26%;-webkit-text-stroke-color:rgba(157,180,255,.1)}
}
@media (prefers-reduced-motion:reduce){
  .nf-aura i,.nf-ghost,.nf-eyebrow i{animation:none}
  .nf-copy>*{opacity:1;animation:none}
}