/* ═══════════════════════════════════════════════════════════════════
   ASTRELT — CRT-GLASS DESIGN SYSTEM (shared standard)
   Source of truth: tools/personal-website/index.html
   Linked by the portfolio AND every tool, BEFORE their own <style>.
   Self-contained — no @import. Pair with /astrelt-fx.js for the WebGL
   backgrounds; this file alone gives the full CSS CRT look + fallback.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. THEME VARIABLES ──────────────────────────────────────────────
   Tools / astrelt-fx may override --green / --amber / --dim / --bg etc.
   at runtime (localStorage.konamiScheme). Everything below is derived
   from those so a single colour swap re-themes the whole surface. */
:root {
  --green:#44ff18; --amber:#ffb000; --dim:#205a20; --bg:#050505;
  --glow:rgba(0,90,0,.25); --scanline:rgba(0,255,0,.025);
  --font:'Press Start 2P',monospace;
  --mono:'Cascadia Code',Consolas,monospace;
  --green-mid:color-mix(in srgb,var(--green) 90%,#000);
  --green-dim:color-mix(in srgb,var(--green) 65%,#000);
  --amber-dim:color-mix(in srgb,var(--amber) 50%,#000);
  --bg-card:color-mix(in srgb,var(--dim) 22%,#000);
  --bg-hi:color-mix(in srgb,var(--dim) 38%,#000);
  --green-glow:rgba(57,255,20,.15); --amber-glow:rgba(255,176,0,.10);
  --disc-glow:rgba(57,255,20,.30);
  --panel-bg:#010e01;
  --bevel-lo:color-mix(in srgb,var(--dim) 75%,transparent);
}

/* ── 2. CUSTOM MATRIX CURSOR (high-contrast, low-vision) ─────────────
   Arrow everywhere; crosshair-reticle on interactive; I-beam on text. */
:root{
  --cur-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><path d='M4 2 L4 24 L10 18 L14 27 L18 25 L14 16 L23 16 Z' fill='%2344ff18' stroke='black' stroke-width='2.5' stroke-linejoin='round'/></svg>") 4 2;
  --cur-point: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><g fill='none' stroke='black' stroke-width='6'><line x1='16' y1='3' x2='16' y2='29'/><line x1='3' y1='16' x2='29' y2='16'/><circle cx='16' cy='16' r='7'/></g><g fill='none' stroke='%2344ff18' stroke-width='3'><line x1='16' y1='3' x2='16' y2='29'/><line x1='3' y1='16' x2='29' y2='16'/><circle cx='16' cy='16' r='7'/></g></svg>") 16 16;
  --cur-text: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='28'><rect x='5' y='2' width='4' height='24' fill='%2344ff18' stroke='black' stroke-width='1.5'/></svg>") 7 14;
}
html, body { cursor: var(--cur-arrow), auto; }
a, button, summary, select, [onclick], [role="button"], label[for],
input[type="checkbox"], input[type="radio"], input[type="submit"],
input[type="button"], input[type="reset"] { cursor: var(--cur-point), pointer; }
input[type="text"], input[type="email"], input[type="number"], input[type="search"],
input[type="password"], textarea, [contenteditable="true"] { cursor: var(--cur-text), text; }

/* ── 3. CRT phosphor background + scanlines + vignette ──────────────
   The black + CRT gradients live on <html> (NOT body) so the fixed
   #glsl-bg / #knot-bg canvases (z-index -2/-1) show through a
   TRANSPARENT body. This is the universal CRT fallback and what shows
   when WebGL is unavailable. */
html {
  background-color:#000;
  background-image:
    radial-gradient(ellipse 75% 55% at 50% 40%,rgba(0,110,0,.16) 0%,transparent 70%),
    radial-gradient(ellipse 40% 60% at 18% 50%,rgba(0,70,0,.18) 0%,transparent 60%),
    repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.32) 2px,rgba(0,0,0,.32) 3px),
    radial-gradient(circle,rgba(57,255,20,.035) 1px,transparent 1px);
  background-size:auto,auto,auto,5px 5px;
  background-attachment:fixed;
}
body {
  background:transparent;   /* let the WebGL canvases behind show through */
  font-family:var(--font); color:var(--green);
  box-sizing:border-box;
}
/* CRT vignette */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:10001;
  background:
    radial-gradient(ellipse 96% 93% at 50% 50%,transparent 62%,rgba(0,0,0,.65) 82%,rgba(0,0,0,.96) 100%),
    radial-gradient(ellipse 55% 18% at 48% 1%,rgba(200,255,200,.035) 0%,transparent 100%);
}
/* base scanlines */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:10000;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.1) 2px,rgba(0,0,0,.1) 4px);
}
/* gentle CRT flicker on content */
@keyframes crt-flicker{0%,89%,91%,94%,96%,100%{opacity:1}90%{opacity:.97}95%{opacity:.98}}
body>*{animation:crt-flicker 10s infinite;}

/* ── 4. CRT OVERLAY ELEMENTS (injected by astrelt-fx.js) ────────────
   aperture grille · rolling band · film grain · vignette. Styled here
   so the FX script only has to inject empty <div>s. */
#crt-grille{position:fixed;inset:0;z-index:10000;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.30) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,0,0,.06) 0 1px, rgba(0,255,0,.06) 1px 2px, rgba(0,80,255,.06) 2px 3px);
  background-size:100% 3px, 3px 100%; mix-blend-mode:multiply;
  animation:crt-flick 6s infinite;}
#crt-roll{position:fixed;left:0;right:0;top:-30vh;height:30vh;z-index:10001;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(120,255,160,.04) 45%,rgba(190,255,210,.10) 50%,rgba(120,255,160,.04) 55%,transparent);
  animation:crt-roll 7s linear infinite; mix-blend-mode:screen;}
@keyframes crt-roll{from{top:-30vh}to{top:100vh}}
#crt-grain{position:fixed;inset:-50%;z-index:10002;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:crt-grain .5s steps(4) infinite;}
@keyframes crt-grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-2%)}75%{transform:translate(-2%,-3%)}100%{transform:translate(3%,2%)}}
#crt-vig{position:fixed;inset:0;z-index:10003;pointer-events:none;
  background:
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 88%, rgba(0,0,0,.96) 100%),
    radial-gradient(60% 22% at 50% 0%, rgba(255,255,255,.05), transparent 70%);}
@keyframes crt-flick{0%,96%,100%{opacity:1}97%{opacity:.93}98%{opacity:.99}}
/* FX toggle hides every overlay */
html.fx-off #crt-grille,html.fx-off #crt-roll,html.fx-off #crt-grain,html.fx-off #crt-vig{display:none!important;}
/* when the live GLSL shader is up, dim the CSS grille so they don't double up */
html.glsl-on #crt-grille{opacity:.55;}

/* ── 5. WEBGL BACKGROUND CANVASES (injected by astrelt-fx.js) ───────
   GLSL CRT/phosphor shader (z -2) under the giant wireframe knot
   (z -1), both under all page content. Hidden until the script marks
   them live, so a WebGL failure leaves no empty canvas artefact. */
#glsl-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;display:block;
  width:100vw;height:100vh;opacity:0;transition:opacity .8s ease;}
#glsl-bg.glsl-live{opacity:.55;}
#knot-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;display:block;
  width:100vw;height:100vh;opacity:0;transition:opacity .8s ease;}
#knot-bg.knot-live{opacity:.17;}
@media(max-width:900px){ #knot-bg.knot-live{opacity:.12;} #glsl-bg.glsl-live{opacity:.4;} }
html.fx-off #glsl-bg,html.fx-off #knot-bg{opacity:0!important;}

/* ── 6. FX TOGGLE BUTTON (injected by astrelt-fx.js) ────────────────*/
#fx-toggle{position:fixed;left:12px;bottom:12px;z-index:10010;
  font-family:var(--font);font-size:.42rem;letter-spacing:1px;
  background:#020a02;color:var(--green);border:1px solid color-mix(in srgb,var(--green) 40%,transparent);
  padding:6px 10px;cursor:pointer;text-shadow:0 0 6px rgba(57,255,20,.5);transition:background .15s,color .15s;}
#fx-toggle:hover{background:var(--green);color:#000;}

/* ── 7. WINDOW-CHROME BEVEL HELPERS ─────────────────────────────────*/
.win-panel {
  border:2px solid;
  border-color:color-mix(in srgb,var(--green) 42%,transparent) var(--bevel-lo) var(--bevel-lo) color-mix(in srgb,var(--green) 42%,transparent);
  box-shadow:2px 2px 0 rgba(0,0,0,.85),0 0 18px color-mix(in srgb,var(--green) 10%,transparent);
  background:var(--panel-bg);
}
.win-panel-head {
  background:linear-gradient(90deg,#000900,#071a07 55%,#0d2a0d);
  color:var(--amber); font-family:var(--font); font-size:.46rem;
  padding:6px 10px; border-bottom:1px solid color-mix(in srgb,var(--green) 20%,transparent);
  text-shadow:0 0 10px rgba(255,176,0,.5); letter-spacing:1px;
}
/* Blanket richer borders/glow + gentle hover lift for common containers.
   Scoped to opt-in classes so tool layouts aren't disturbed. */
.card, .panel, .box, .section-box, .tool-section, fieldset.win {
  border:2px solid;
  border-color:color-mix(in srgb,var(--green) 38%,transparent) var(--bevel-lo) var(--bevel-lo) color-mix(in srgb,var(--green) 38%,transparent);
  box-shadow:2px 2px 0 rgba(0,0,0,.8), 0 0 16px rgba(57,255,20,.08);
  transition:transform .18s ease, box-shadow .25s;
}
.card:hover, .panel:hover, .box:hover, .section-box:hover, .tool-section:hover {
  transform:translateY(-2px);
  box-shadow:2px 4px 0 rgba(0,0,0,.8), 0 0 20px rgba(57,255,20,.16);
}

/* ── 8. BUTTONS ─────────────────────────────────────────────────────*/
.btn-term, .dl-btn-like {
  font-family:var(--font);font-size:.44rem;background:var(--bg-card);
  border:1px solid var(--green);color:var(--green);padding:6px 14px;cursor:pointer;
  letter-spacing:1px;text-decoration:none;display:inline-block;
  transition:transform .12s ease,background .15s,color .15s,box-shadow .15s;
}
.btn-term:hover, .dl-btn-like:hover {
  background:var(--green);color:#000;transform:translateY(-1px);box-shadow:0 0 12px rgba(57,255,20,.3);
}
.btn-term.amber, .dl-btn-like.amber{border-color:var(--amber);color:var(--amber);}
.btn-term.amber:hover, .dl-btn-like.amber:hover{background:var(--amber);color:#000;}

/* ── 9. LINKS + SELECTION ───────────────────────────────────────────*/
a{color:var(--amber);} a:hover{color:var(--green);} a:visited{color:var(--amber-dim);}
::selection{background:var(--green);color:#000;text-shadow:none;}

/* ── 10. GLOW-PULSE (apply .glow-pulse to draw attention) ───────────*/
@keyframes glow-pulse{0%,100%{box-shadow:0 0 6px rgba(57,255,20,.25);}50%{box-shadow:0 0 18px rgba(57,255,20,.55);}}
.glow-pulse{animation:glow-pulse 2s ease-in-out infinite;}
.crt-bloom{text-shadow:0 0 1px currentColor,0 0 6px currentColor,0 0 14px currentColor;}

/* ── 11. THEMED INPUTS / TEXTAREA / SELECT ──────────────────────────*/
input[type=text],input[type=email],input[type=number],input[type=search],input[type=password],
textarea,select{
  background:#010a01;color:var(--green);
  border:1px solid color-mix(in srgb,var(--green) 26%,transparent);
  box-shadow:inset 0 0 10px rgba(0,0,0,.6);outline:none;
  font-family:var(--font);
  transition:border-color .15s,box-shadow .15s;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--green);
  box-shadow:inset 0 0 10px rgba(0,0,0,.6),0 0 10px rgba(57,255,20,.25);
}

/* ── 12. THEMED SCROLLBARS ──────────────────────────────────────────*/
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--green) 45%,#000) transparent;}
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-track{background:rgba(0,0,0,.45);}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--green) 32%,#000);border:2px solid #000;}
*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--green) 55%,#000);}
*::-webkit-scrollbar-corner{background:#000;}

/* ── 13. LED-TUBE SCROLL BAR (.pixel-border) — beveled, segmented ───*/
.pixel-border {
  height: 22px; width: 100%; display: block; position: relative;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,.06) 16%, transparent 42%,
                            rgba(0,0,0,.40) 78%, rgba(0,0,0,.62) 100%),
    repeating-linear-gradient(90deg,
      #001400 0 2px, var(--green) 2px 16px,
      #001400 16px 18px, var(--amber) 18px 32px,
      #001400 32px 34px, var(--green-dim) 34px 48px);
  background-size: 100% 100%, 96px 100%;
  background-repeat: no-repeat, repeat-x;
  border-top: 1px solid color-mix(in srgb, var(--green) 65%, transparent);
  border-bottom: 1px solid #000;
  box-shadow: inset 0 2px 3px rgba(255,255,255,.20), inset 0 -3px 6px rgba(0,0,0,.6),
              0 0 10px rgba(57,255,20,.30);
  animation: pixel-scroll 9s linear infinite;
}
@keyframes pixel-scroll { from { background-position: 0 0, 0 0 } to { background-position: 0 0, 96px 0 } }
.pixel-border.amber-bar {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,.06) 16%, transparent 42%,
                            rgba(0,0,0,.40) 78%, rgba(0,0,0,.62) 100%),
    repeating-linear-gradient(90deg,
      #140a00 0 2px, var(--amber) 2px 16px,
      #140a00 16px 18px, var(--green) 18px 32px,
      #140a00 32px 34px, var(--amber-dim) 34px 48px);
  border-top-color: color-mix(in srgb, var(--amber) 65%, transparent);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.20), inset 0 -3px 6px rgba(0,0,0,.6),
              0 0 10px rgba(255,176,0,.28);
  animation-direction: reverse;
}

/* ── 14. BADGES / TAGS ──────────────────────────────────────────────*/
.tag{
  display:inline-block;font-size:.38rem;padding:2px 5px;margin:2px;letter-spacing:1px;
  background:rgba(57,255,20,.05);
  border:1px solid color-mix(in srgb,var(--green) 28%,transparent);
  color:var(--green-mid);text-shadow:0 0 6px rgba(57,255,20,.25);
  transition:all .15s;
}
.tag:hover{border-color:var(--green);color:var(--green);}
.badge{
  border:1px solid rgba(57,255,20,.2);padding:4px 10px;font-size:.4rem;letter-spacing:1px;
  color:var(--green-dim);background:transparent;transition:all .15s;
}
.badge:hover{border-color:var(--green);color:var(--green);box-shadow:0 0 10px rgba(57,255,20,.15);}

/* ── 15. GENTLE TILT BASE (perspective glare cards) ─────────────────*/
.tilt-grid{perspective:1000px;}
.tilt-card{position:relative;overflow:hidden;transform-style:preserve-3d;}
.tilt-card .glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s;z-index:2;
  background:radial-gradient(240px 240px at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--green) 14%,transparent),transparent 60%);}
.tilt-card.tilt-hover .glare{opacity:1;}

/* ═══════════════════════════════════════════════════════════════════
   16. CORNER CHROME — return-home · feedback · #astrelt-bar top strip
   (kept/upgraded from the prior theme.css; tools rely on these IDs.)
   ═══════════════════════════════════════════════════════════════════ */
.return-home{position:fixed;top:10px;left:10px;z-index:9997;font-family:var(--font);font-size:.38rem;color:var(--green);text-decoration:none;border:1px solid color-mix(in srgb,var(--green) 40%,transparent);background:rgba(0,0,0,.85);padding:5px 10px;letter-spacing:1px;transition:all .18s;backdrop-filter:blur(2px);}
.return-home:hover{background:var(--green);color:#000;}
.return-home::before{content:'← ';}

.feedback-btn{position:fixed;top:10px;right:10px;z-index:9997;font-family:var(--font);font-size:.38rem;color:var(--amber);text-decoration:none;border:1px solid color-mix(in srgb,var(--amber) 40%,transparent);background:rgba(0,0,0,.85);padding:5px 10px;letter-spacing:1px;transition:all .18s;cursor:pointer;backdrop-filter:blur(2px);}
.feedback-btn:hover{background:var(--amber);color:#000;}

/* auto-hiding top control strip */
#astrelt-bar{position:fixed;top:0;left:0;right:0;height:34px;z-index:9997;display:flex;align-items:center;gap:8px;padding:0 12px;background:linear-gradient(180deg,rgba(0,8,0,.92),rgba(0,8,0,0));opacity:.12;transform:translateY(-6px);transition:opacity .25s,transform .25s;pointer-events:none;}
#astrelt-bar.show, #astrelt-bar:hover, #astrelt-bar:focus-within{opacity:1;transform:translateY(0);pointer-events:auto;}
#astrelt-bar > *{pointer-events:auto;}
#astrelt-bar .ab-spacer{flex:1;}
.ab-btn{font-family:var(--font);font-size:.36rem;letter-spacing:1px;text-decoration:none;cursor:pointer;background:rgba(0,0,0,.85);border:1px solid color-mix(in srgb,var(--green) 40%,transparent);color:var(--green);padding:5px 9px;transition:transform .12s ease,background .15s,color .15s;}
.ab-btn:hover{background:var(--green);color:#000;transform:translateY(-1px);}
.ab-btn.amber{border-color:color-mix(in srgb,var(--amber) 45%,transparent);color:var(--amber);}
.ab-btn.amber:hover{background:var(--amber);color:#000;}
#astrelt-bar-hint{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:9996;width:60px;height:4px;background:color-mix(in srgb,var(--green) 50%,transparent);border-radius:0 0 4px 4px;pointer-events:none;}

/* outer page frame */
#astrelt-frame{position:fixed;inset:0;pointer-events:none;z-index:9990;border:2px solid color-mix(in srgb,var(--green) 30%,transparent);box-shadow:inset 0 0 60px rgba(57,255,20,.05);}

/* ── 17. REDUCED MOTION ─────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce){
  body>*{animation:none!important;}
  #crt-grille,#crt-roll,#crt-grain{animation:none!important;}
  .pixel-border{animation:none!important;}
  .glow-pulse{animation:none!important;}
  #knot-bg,#glsl-bg{transition:none!important;}
}
