/* ===========================================================================
   notfound.css — animated 404 view
   A big "404" where the 0 is an orbital ring: a terracotta dot orbits it,
   sonar rings ping outward, the digits idle-float and parallax to the pointer.
   =========================================================================== */
#view-404{display:none}
.nf-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:7rem;padding-bottom:4rem;position:relative;z-index:2}

.nf-eyebrow{display:flex;align-items:center;gap:0.7rem;margin-bottom:clamp(1.5rem,4vh,2.5rem)}
.nf-bar{width:34px;height:1px;background:var(--line-2)}

/* the big animated 404 */
.nf-stage{position:relative;margin-bottom:clamp(1.2rem,3.5vh,2.2rem)}
.nf-num{display:flex;align-items:center;justify-content:center;gap:clamp(0.3rem,1.8vw,1.4rem);line-height:1}
.nf-layer{will-change:transform;transform:translate3d(calc(var(--px,0)*var(--dx,0)),calc(var(--py,0)*var(--dy,0)),0)}
.nf-l1{--dx:-46px;--dy:-26px}
.nf-l2{--dx:20px;--dy:-12px}
.nf-l3{--dx:52px;--dy:30px}
.nf-glyph{display:block;font-family:var(--display);font-weight:300;font-size:clamp(7rem,27vw,20rem);color:var(--espresso);letter-spacing:-0.02em}

/* the zero = an orbital ring */
.nf-zero{position:relative;display:grid;place-items:center;width:clamp(5.5rem,20vw,15rem);height:clamp(5.5rem,20vw,15rem)}
.nf-ring{width:100%;height:100%;border-radius:50%;border:clamp(0.7rem,2.4vw,1.7rem) solid var(--espresso);box-sizing:border-box}
.nf-sonar,.nf-orbit{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.nf-sonar span{position:absolute;width:100%;height:100%;border-radius:50%;border:1px solid var(--terracotta);opacity:0}
.nf-orbit-track{position:relative;width:126%;height:126%}
.nf-dot{position:absolute;top:calc(clamp(11px,1.5vw,17px)/-2);left:50%;width:clamp(11px,1.5vw,17px);height:clamp(11px,1.5vw,17px);margin-left:calc(clamp(11px,1.5vw,17px)/-2);border-radius:50%;background:var(--terracotta);box-shadow:0 0 26px rgba(192,86,59,0.55)}

@media (prefers-reduced-motion:no-preference){
  .nf-l1 .nf-glyph{animation:nf-float 6s ease-in-out infinite}
  .nf-l2 .nf-zero{animation:nf-float 6s ease-in-out infinite;animation-delay:-2s}
  .nf-l3 .nf-glyph{animation:nf-float 6s ease-in-out infinite;animation-delay:-4s}
  .nf-orbit-track{animation:nf-spin 7s linear infinite}
  .nf-sonar span{animation:nf-ping 3.6s ease-out infinite}
  .nf-sonar span:nth-child(2){animation-delay:1.2s}
  .nf-sonar span:nth-child(3){animation-delay:2.4s}
}
@keyframes nf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes nf-spin{to{transform:rotate(360deg)}}
@keyframes nf-ping{0%{transform:scale(0.4);opacity:0.5}80%{opacity:0}100%{transform:scale(2.2);opacity:0}}

/* copy */
.nf-title{font-family:var(--display);font-weight:300;font-size:clamp(2rem,5.5vw,3.6rem);line-height:1.04;letter-spacing:-0.02em;color:var(--espresso);max-width:18ch}
.nf-title em{font-style:italic;color:var(--terracotta)}
.nf-lead{margin-top:1.3rem;max-width:46ch;font-size:clamp(1rem,1.4vw,1.2rem);color:var(--ink)}
.nf-path{margin-top:1.4rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:0.4rem 0.95rem;max-width:90vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nf-path::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--terracotta);margin-right:0.55rem;vertical-align:middle;opacity:0.7}

.nf-cta{margin-top:clamp(2rem,5vh,2.8rem);display:flex;flex-wrap:wrap;gap:0.9rem 1.2rem;justify-content:center}

.nf-index{margin-top:clamp(2.5rem,6vh,4rem);display:flex;flex-wrap:wrap;gap:1.2rem 2rem;justify-content:center;border-top:1px solid var(--line);padding-top:1.6rem}
.nf-index a{font-family:var(--mono);font-size:0.78rem;color:var(--espresso);display:inline-flex;gap:0.55rem;align-items:baseline;position:relative}
.nf-index a .n{color:var(--muted)}
.nf-index a::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:0;background:var(--terracotta);transition:width .3s}
.nf-index a:hover{color:var(--terracotta)}
.nf-index a:hover::after{width:100%}

@media(max-width:560px){
  .nf-num{gap:0.2rem}
  .nf-index{gap:1rem 1.4rem}
}