/* 404 and server error page */
.err { position: relative; display: flex; align-items: center; min-height: 100svh; padding: calc(var(--nav-h) + 24px) 0 64px; overflow: hidden; isolation: isolate; text-align: center; background: var(--ink); }
.err__grid { position: absolute; inset: 0; z-index: -3; background: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 72%); mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 72%); animation: errGrid 20s linear infinite; }
.err__blob { position: absolute; z-index: -2; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.err__blob--1 { top: 8%; left: 6%; width: 380px; height: 380px; background: rgba(242, 29, 53, .32); animation: errBlob 12s ease-in-out infinite; }
.err__blob--2 { right: 4%; bottom: 6%; width: 320px; height: 320px; background: rgba(255, 255, 255, .1); animation: errBlob 15s ease-in-out infinite reverse; }
.err__scan { position: absolute; left: 0; right: 0; top: 0; z-index: -1; height: 140px; background: linear-gradient(180deg, transparent, rgba(242, 29, 53, .1), transparent); pointer-events: none; animation: errScan 7s linear infinite; }
.err__inner { display: flex; flex-direction: column; align-items: center; }
.err__pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; color: #fff; font-size: .8125rem; font-weight: 500; letter-spacing: .06em; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .07); animation: errUp .8s var(--ease) both; }
.err__pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: xPulse 1.8s ease-out infinite; }

.err__stage { position: relative; margin: 26px 0 8px; padding: 10px clamp(20px, 6vw, 90px); }
.err__code { display: flex; align-items: center; justify-content: center; gap: clamp(2px, 1.2vw, 18px); font-family: var(--font-head); font-size: clamp(6.5rem, 21vw, 15rem); font-weight: 600; line-height: 1; letter-spacing: -.06em; }
.err__digit { position: relative; display: inline-block; color: #fff; animation: errDrop .9s var(--ease) both; }
.err__digit:last-child { animation-delay: .25s; }
.err__digit::before, .err__digit::after { content: attr(data-t); position: absolute; inset: 0; pointer-events: none; }
.err__digit::before { color: var(--red); transform: translateX(4px); clip-path: inset(0 0 58% 0); animation: errGlitchA 3.6s steps(1) infinite; }
.err__digit::after { color: rgba(255, 255, 255, .55); transform: translateX(-4px); clip-path: inset(62% 0 0 0); animation: errGlitchB 3.6s steps(1) infinite .4s; }

.err__radar { position: relative; flex: 0 0 auto; width: .8em; height: .8em; border-radius: 50%; animation: errDrop .9s var(--ease) .12s both; }
.err__radar-ring { position: absolute; inset: 0; border: .05em solid var(--red); border-radius: 50%; box-shadow: 0 0 .25em rgba(242, 29, 53, .55), inset 0 0 .25em rgba(242, 29, 53, .35); }
.err__radar-ring--2 { inset: 22%; border-width: .02em; border-color: rgba(255, 255, 255, .3); box-shadow: none; }
.err__radar-sweep { position: absolute; inset: .05em; border-radius: 50%; background: conic-gradient(from 0deg, rgba(242, 29, 53, 0) 0deg, rgba(242, 29, 53, 0) 250deg, rgba(242, 29, 53, .65) 360deg); animation: errSpin 2.6s linear infinite; }
.err__radar-cross { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .22)) center / 100% 1px no-repeat, linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .22)) center / 1px 100% no-repeat; }
.err__radar-blip { position: absolute; left: 66%; top: 30%; width: .07em; height: .07em; min-width: 8px; min-height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); animation: errBlip 2.6s ease-out infinite; }

.err__chip { position: absolute; z-index: 1; width: clamp(44px, 6vw, 64px); aspect-ratio: 1; display: grid; place-items: center; color: #fff; font-size: clamp(1.1rem, 2.4vw, 1.6rem); border: 1px solid rgba(255, 255, 255, .28); border-radius: 26%; background: #17171b; box-shadow: 0 16px 34px rgba(0, 0, 0, .5); animation: xFloat 5s ease-in-out infinite; }
.err__chip--1 { left: 2%; top: 14%; }
.err__chip--2 { right: 3%; top: 8%; color: #fff; border-color: transparent; background: var(--red); box-shadow: 0 16px 34px rgba(242, 29, 53, .45); animation-delay: -1.5s; }
.err__chip--3 { left: 6%; bottom: 8%; animation-delay: -3s; }
.err__chip--4 { right: 1%; bottom: 14%; animation-delay: -4.2s; }

.err__title { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .28em; margin: 14px 0 12px; font-family: var(--font-head); font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.15; }
.err__word { display: inline-block; animation: errUp .8s var(--ease) both; }
.err__word:nth-child(1) { animation-delay: .5s; }
.err__word:nth-child(2) { animation-delay: .6s; }
.err__word:nth-child(3) { animation-delay: .7s; }
.err__word:nth-child(4) { animation-delay: .8s; }
.err__word:last-child { color: var(--red); }
.err__text { max-width: 540px; margin: 0 0 26px; color: var(--text-dim); font-size: 1.0625rem; line-height: 1.7; animation: errUp .8s var(--ease) .9s both; }
.err__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; animation: errUp .8s var(--ease) 1s both; }
.err__actions .glass-btn { margin-top: 0; text-decoration: none; }
.err__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px; }
.err__link { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; color: #e7e7ea; font-size: .9375rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .04); animation: errPop .6s var(--ease) both; transition: color .25s, background .25s, border-color .25s, transform .3s var(--ease); }
.err__link:nth-child(1) { animation-delay: 1.15s; }
.err__link:nth-child(2) { animation-delay: 1.23s; }
.err__link:nth-child(3) { animation-delay: 1.31s; }
.err__link:nth-child(4) { animation-delay: 1.39s; }
.err__link:nth-child(5) { animation-delay: 1.47s; }
.err__link:nth-child(6) { animation-delay: 1.55s; }
.err__link i { color: var(--red); transition: color .25s; }
.err__link:hover { color: #fff; background: var(--red); border-color: var(--red); transform: translateY(-4px); }
.err__link:hover i { color: #fff; }

@keyframes errGrid { to { background-position: 64px 64px, 64px 64px; } }
@keyframes errBlob { 50% { transform: translate(40px, -30px) scale(1.15); } }
@keyframes errScan { from { transform: translateY(-140px); } to { transform: translateY(100vh); } }
@keyframes errUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes errDrop { from { opacity: 0; transform: translateY(-70px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes errPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes errSpin { to { transform: rotate(360deg); } }
@keyframes errBlip { 0%, 55% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .85); opacity: 1; } 100% { box-shadow: 0 0 0 .25em rgba(255, 255, 255, 0); opacity: .35; } }
@keyframes errGlitchA { 0%, 88%, 100% { transform: translateX(0); opacity: 0; } 90% { transform: translateX(7px); opacity: 1; } 94% { transform: translateX(-5px); opacity: 1; } 97% { transform: translateX(4px); opacity: 1; } }
@keyframes errGlitchB { 0%, 91%, 100% { transform: translateX(0); opacity: 0; } 93% { transform: translateX(-8px); opacity: 1; } 96% { transform: translateX(5px); opacity: 1; } }

@media (max-width: 575px) { .err__chip { display: none; } .err__stage { padding-inline: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .err *, .err { animation: none !important; }
  .err__digit::before, .err__digit::after { display: none; }
}