/* yoinks.io — teaser. Dark, monospace, one accent. mostlygino tokens. */
:root{
  --bg:#000; --bg-2:#05070d;
  --label:#fff;
  --label-2:rgba(235,235,245,.66);
  --label-3:rgba(235,235,245,.40);
  --accent:#4da2ff;
  --accent-hi:#9ecbff;
  --accent-dim:rgba(77,162,255,.5);
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ease-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-ios:cubic-bezier(0.32,0.72,0,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:
    radial-gradient(130% 100% at 50% -10%, var(--bg-2) 0%, var(--bg) 60%);
  color:var(--label);
  font-family:var(--mono);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* layers ------------------------------------------------------------ */
canvas#mesh{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

.veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 40%,transparent 36%,rgba(0,0,0,.78) 100%)}

/* film grain — static, cheap, overlay-blended */
.grain{position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}

main{position:relative;z-index:3;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;text-align:center}

/* entrance choreography -------------------------------------------- */
.rise{opacity:0;transform:translateY(14px);filter:blur(6px);
  animation:rise .9s var(--ease-expo) forwards}
@keyframes rise{to{opacity:1;transform:none;filter:none}}

/* wordmark ---------------------------------------------------------- */
.mark{
  font-size:clamp(3rem,13vw,8.75rem);font-weight:800;letter-spacing:-.045em;
  line-height:.9;display:inline-flex;align-items:baseline;
}
.mark .ch{display:inline-block;will-change:transform}
.mark .dot{color:var(--accent);text-shadow:0 0 36px var(--accent-dim)}
/* the "o" is a bespoke pig snout: thick ring reads as the letter,
   nostrils breathe, whole snout sniffs; snuffles faster on hover */
.mark .snout-o{display:inline-block;width:.78em;height:.78em;
  transform:translateY(.07em);animation:sniff 5s var(--ease-ios) infinite}
.mark .snout-o svg{display:block;width:100%;height:100%;overflow:visible}
.mark .snout-o .ring{fill:none;stroke:currentColor;stroke-width:19}
.mark .snout-o .nostrils{fill:currentColor;transform-box:fill-box;
  transform-origin:center;animation:breathe 3.4s var(--ease-ios) infinite}
.mark:hover .snout-o .nostrils{animation-duration:1.1s}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.22)}}
@keyframes sniff{0%,84%,100%{transform:translateY(.07em)}
  88%{transform:translateY(.02em)}92%{transform:translateY(.09em)}}

.tagline{margin-top:1.5rem;color:var(--label-2);
  font-size:clamp(.82rem,2.4vw,1.02rem);letter-spacing:.02em;min-height:1.4em}
.caret{display:inline-block;width:.55ch;color:var(--accent);
  animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.status{margin-top:2.75rem;display:inline-flex;align-items:center;gap:.7ch;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--label-3)}
.status .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 var(--accent-dim);animation:pulse 2.4s var(--ease-expo) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-dim)}
  70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}

footer{position:fixed;z-index:3;bottom:22px;left:0;right:0;text-align:center;
  color:var(--label-3);font-size:.66rem;letter-spacing:.14em}

/* 404 --------------------------------------------------------------- */
.code{font-size:clamp(4.5rem,22vw,13rem);font-weight:800;letter-spacing:-.05em;
  line-height:.82;display:inline-flex}
.lead{margin-top:1.1rem;color:var(--label-2);font-size:clamp(.84rem,2.4vw,1.02rem)}
.home{display:inline-block;margin-top:2.4rem;color:var(--accent);text-decoration:none;
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid rgba(77,162,255,.38);border-radius:10px;padding:.8em 1.5em;
  transition:background .25s var(--ease-expo),border-color .25s var(--ease-expo),
             box-shadow .25s var(--ease-expo)}
.home:hover{background:rgba(77,162,255,.12);border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(77,162,255,.25)}

@media (prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none;filter:none}
  .caret,.status .pulse{animation:none}
  .mark .snout-o,.mark .snout-o .nostrils{animation:none}
}

/* ===== 404 showpiece ============================================== */
.stage{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:24px;text-align:center;gap:0}

/* chromatic-glitch number */
.glitch{position:relative;display:inline-block;color:var(--label);
  font-size:clamp(4.5rem,24vw,14rem);font-weight:800;letter-spacing:-.05em;line-height:.82}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;
  clip-path:inset(0);pointer-events:none}
.glitch::before{color:var(--accent);animation:gl-b 4s steps(1) infinite}
.glitch::after{color:var(--danger);animation:gl-a 4s steps(1) infinite}
@keyframes gl-b{
  0%,8%,100%{transform:none;clip-path:inset(0 0 100% 0)}
  2%{transform:translate(-3px,1px);clip-path:inset(12% 0 55% 0)}
  4%{transform:translate(3px,-1px);clip-path:inset(60% 0 12% 0)}
  6%{transform:translate(-2px,0);clip-path:inset(35% 0 40% 0)}
  41%{transform:translate(2px,0);clip-path:inset(20% 0 62% 0)}
  43%{transform:none;clip-path:inset(0 0 100% 0)}
}
@keyframes gl-a{
  0%,9%,100%{transform:none;clip-path:inset(0 0 100% 0)}
  3%{transform:translate(3px,-1px);clip-path:inset(48% 0 24% 0)}
  5%{transform:translate(-3px,1px);clip-path:inset(18% 0 58% 0)}
  7%{transform:translate(2px,0);clip-path:inset(70% 0 8% 0)}
  42%{transform:translate(-2px,0);clip-path:inset(40% 0 35% 0)}
  44%{transform:none;clip-path:inset(0 0 100% 0)}
}

.nohost{margin-top:.6rem;color:var(--label-2);font-weight:500;
  font-size:clamp(.7rem,2vw,.9rem);letter-spacing:.42em;text-transform:uppercase;
  padding-left:.42em /* offset tracking so it reads centered */}

/* faux terminal */
.term{margin-top:2rem;width:min(460px,92vw);text-align:left;
  border:1px solid var(--separator);border-radius:12px;overflow:hidden;
  background:rgba(12,14,20,.72);backdrop-filter:blur(10px);
  box-shadow:0 20px 50px -24px rgba(0,0,0,.8)}
.term-bar{display:flex;gap:7px;align-items:center;padding:10px 13px;
  border-bottom:1px solid var(--separator)}
.term-bar i{width:9px;height:9px;border-radius:50%;background:rgba(235,235,245,.22)}
.term-bar i:first-child{background:rgba(77,162,255,.7)}
.term-bar b{margin-left:8px;font-weight:500;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--label-3)}
.term-body{padding:14px 16px;font-size:.78rem;line-height:1.7;
  color:var(--label-2);white-space:pre-wrap;word-break:break-all;min-height:7.4em;margin:0}
.term-body .ok{color:var(--accent)}
.term-body .err{color:var(--danger)}
.term-body .tcaret{display:inline-block;width:.55ch;color:var(--accent);
  animation:blink 1.1s steps(1) infinite}

@media (prefers-reduced-motion:reduce){
  .glitch::before,.glitch::after{animation:none;clip-path:inset(0 0 100% 0)}
  .term-body .tcaret{animation:none}
}