/* ===================================================================
   Hexbench — Signature Effects & Components
   Colors come from theme.css (loaded just before this file) — see
   that file to recolor the whole project from one place.
   Type: Space Grotesk (display) · Inter (body) · JetBrains Mono (data)
=================================================================== */

:root{
  --bg:       rgb(var(--bg-rgb));
  --panel:    rgb(var(--panel-rgb));
  --panel-2:  rgb(var(--panel2-rgb));
  --border:   rgb(var(--border-rgb));
  --mint:     rgb(var(--accent-rgb));
  --mint-dim: rgb(var(--accent-dim-rgb));
  --amber:    rgb(var(--accent2-rgb));
  --text:     rgb(var(--ink-rgb));
  --muted:    rgb(var(--muted-rgb));
  transition: background-color .35s ease, border-color .35s ease;
}

*{ scroll-behavior:smooth; }

body{
  background-color:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  cursor:none; /* replaced by custom cursor on pointer devices */
  overflow-x:hidden;
}
@media (hover:none){ body{ cursor:auto; } #hb-cursor,#hb-cursor-ring{ display:none; } }

.font-display{ font-family:'Space Grotesk',sans-serif; }
.font-mono{ font-family:'JetBrains Mono',monospace; }

/* --- circuit grid backdrop --------------------------------------- */
.hb-grid-bg{
  background-image:
    linear-gradient(rgb(var(--accent-rgb) / var(--grid-opacity)) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--accent-rgb) / var(--grid-opacity)) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, #0000005e 100%);
}

/* --- custom cursor -------------------------------------------------
   A small solid dot + a lagging glow ring that reacts to hoverables */
#hb-cursor{
  position:fixed; top:0; left:0; width:8px; height:8px; border-radius:50%;
  background:var(--mint); pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%); box-shadow:0 0 10px 2px rgb(var(--accent-rgb) / .8);
  transition:width .15s,height .15s,background .15s;
}
#hb-cursor-ring{
  position:fixed; top:0; left:0; width:34px; height:34px; border-radius:50%;
  border:1px solid rgb(var(--accent-rgb) / .45); pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%); transition:width .2s,height .2s,border-color .2s,background .2s;
}
.hb-cursor-hover#hb-cursor{ width:6px; height:6px; background:var(--amber); box-shadow:0 0 12px 3px rgb(var(--accent2-rgb) / .8); }
.hb-cursor-hover#hb-cursor-ring{ width:54px; height:54px; border-color:rgb(var(--accent2-rgb) / .6); background:rgb(var(--accent2-rgb) / .06); }

/* --- glow / magnetic buttons --------------------------------------*/
.hb-btn{
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .25s cubic-bezier(.2,.9,.3,1), box-shadow .25s ease;
}
.hb-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 30px -8px rgb(var(--accent-rgb) / .55); }
.hb-btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgb(var(--btn-glow-rgb) / .25), transparent 45%);
  opacity:0; transition:opacity .3s;
}
.hb-btn:hover::before{ opacity:1; }

/* --- tool cards ------------------------------------------------- */
.hb-card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border);
  transition:transform .35s cubic-bezier(.2,.9,.3,1), border-color .35s, box-shadow .35s;
  will-change:transform;
}
.hb-card:hover{
  border-color:rgb(var(--accent-rgb) / .5);
  box-shadow:0 20px 40px -20px rgb(var(--accent-rgb) / .35);
}

/* --- blinking terminal cursor ------------------------------------*/
.hb-caret{ display:inline-block; width:9px; height:1.1em; background:var(--mint); margin-left:2px; animation:hb-blink 1s steps(1) infinite; vertical-align:-2px; }
@keyframes hb-blink{ 50%{ opacity:0; } }

/* --- scanline shimmer on hero panel -------------------------------*/
.hb-scan{ position:relative; overflow:hidden; }
.hb-scan::after{
  content:""; position:absolute; left:0; right:0; height:2px; top:-2px;
  background:linear-gradient(90deg, transparent, var(--mint), transparent);
  animation:hb-scan-move 4s linear infinite; opacity:.6;
}
@keyframes hb-scan-move{ 0%{ top:-2px;} 100%{ top:100%;} }

/* --- fade-up on scroll --------------------------------------------*/
.hb-reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.9,.3,1); }
.hb-reveal.hb-in{ opacity:1; transform:translateY(0); }

/* --- glow text ------------------------------------------------- */
.hb-glow-text{ text-shadow:0 0 24px rgb(var(--accent-rgb) / .45); }

/* --- badge pulse for "live" tools ---------------------------------*/
.hb-pulse{ position:relative; }
.hb-pulse::after{
  content:""; position:absolute; inset:-3px; border-radius:9999px;
  border:1px solid var(--mint); opacity:0; animation:hb-pulse-ring 2.2s ease-out infinite;
}
@keyframes hb-pulse-ring{ 0%{ opacity:.6; transform:scale(.8);} 100%{ opacity:0; transform:scale(1.6);} }

/* --- code / syntax highlighting (theme-aware) ---------------------*/
.hb-code{ line-height:1.6; white-space:pre; }
.hl-tag{ color:rgb(var(--accent-rgb)); font-weight:600; }
.hl-attr{ color:rgb(var(--accent2-rgb)); }
.hl-string{ color:#7EC699; }
html[data-theme="light"] .hl-string{ color:#1F8A4C; }
.hl-comment{ color:var(--muted); font-style:italic; }
.hl-doctype{ color:var(--muted); }
mark.hb-mark{ background:rgb(var(--accent-rgb) / .35); color:inherit; border-radius:2px; }
mark.hb-mark-active{ background:rgb(var(--accent2-rgb) / .55); }


::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:var(--mint-dim); }

/* --- form controls ------------------------------------------------*/
.hb-input, .hb-textarea, .hb-select{
  background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  transition:border-color .2s, box-shadow .2s;
}
.hb-input:focus, .hb-textarea:focus, .hb-select:focus{
  outline:none; border-color:var(--mint); box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .15);
}

/* --- copy toast --------------------------------------------------*/
#hb-toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--panel-2); border:1px solid var(--mint); color:var(--text);
  padding:10px 18px; border-radius:10px; font-size:14px; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s; z-index:9999;
}
#hb-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}