/* Shared phosphor terminal theme for elarial.tech landing pages.
   Mirrors the Mastodon custom CSS at social.elarial.tech.
   Fonts are served from THIS origin: cross-origin webfonts require
   CORS headers, so the woff2 files are duplicated here rather than
   linked from social.elarial.tech. */

@font-face {
  font-family: "JBM Nerd Web";
  src: local("JetBrainsMono Nerd Font"),
       local("JetBrainsMonoNerdFont-Regular"),
       local("JetBrainsMono NF"),
       url("/fonts/JetBrainsMonoNerdFont-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JBM Nerd Web";
  src: local("JetBrainsMono Nerd Font Bold"),
       local("JetBrainsMonoNerdFont-Bold"),
       url("/fonts/JetBrainsMonoNerdFont-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root{
  --bg:#0b0f0b; --surface:#11170f; --raised:#161d14; --border:#263021;
  --fg:#c9d1c9; --dim:#7f8c7f; --accent:#3fb950; --accent-dim:#2ea043;
  --mono:"JBM Nerd Web","JetBrainsMono Nerd Font",ui-monospace,
         SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--mono); font-size:14px; line-height:1.65;
  padding:clamp(16px,5vw,48px);
  /* room for the fixed CRT button so it never sits on content */
  padding-bottom:calc(clamp(16px,5vw,48px) + 56px);
  -webkit-text-size-adjust:100%;
}
a{color:var(--accent)}

/* ── CRT overlay. Toggled by /crt-toggle.js via data-crt on <html>. ── */
html:not([data-crt="off"]) body::before{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgba(255,0,0,.030) 0 1px, rgba(0,255,0,.022) 1px 2px,
    rgba(0,0,255,.030) 2px 3px);
}
html:not([data-crt="off"]) body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:
    radial-gradient(ellipse at center,transparent 52%,
      rgba(0,0,0,.28) 82%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,.17) 0 1px, transparent 1px 3px);
  animation:ph-flicker 7s infinite;
}
@keyframes ph-flicker{
  0%,88%,100%{opacity:1} 89%{opacity:.94} 90%{opacity:1}
  93%{opacity:.97} 94%{opacity:.91} 95%{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  body::before, body::after{display:none!important}
  .cursor{animation:none!important}
}

/* ── CRT toggle button ─────────────────────────────────────── */
#crt-toggle{
  position:fixed; right:12px; bottom:12px; z-index:10000;
  font-family:var(--mono); font-size:11px; line-height:1;
  letter-spacing:.04em; padding:7px 10px;
  color:var(--accent); background:rgba(11,15,11,.88);
  border:1px solid var(--accent-dim); border-radius:0;
  cursor:pointer; opacity:.45;
  transition:opacity .15s ease,background .15s ease,color .15s ease;
}
#crt-toggle:hover{opacity:1; background:var(--accent); color:var(--bg)}
#crt-toggle:focus-visible{opacity:1; outline:1px solid var(--accent); outline-offset:2px}
#crt-toggle[aria-pressed="false"]{color:var(--dim); border-color:var(--border)}
@media (max-width:600px){
  #crt-toggle{right:auto; left:10px; bottom:calc(env(safe-area-inset-bottom,0px) + 10px);
              font-size:10px; padding:6px 8px}
}