/* HardVibe — shared styles */

:root {
  --hv-bg: #0a0a0f;
  --hv-bg-2: #11111a;
  --hv-bg-3: #15151f;
  --hv-line: rgba(255, 255, 255, 0.08);
  --hv-line-strong: rgba(255, 255, 255, 0.16);
  --hv-fg: #ededed;
  --hv-fg-dim: rgba(237, 237, 237, 0.62);
  --hv-fg-faint: rgba(237, 237, 237, 0.38);
  --hv-accent: #ff2b8f;      /* magenta */
  --hv-accent-2: #00e5ff;    /* cyan */
  --hv-warn: #ffd60a;
  --hv-ok: #7cffb5;
  --hv-danger: #ff3b4a;

  --hv-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hv-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hv-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

.hv-root {
  background: var(--hv-bg);
  color: var(--hv-fg);
  font-family: var(--hv-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Scan grid background — subtle horizontal lines */
.hv-scan {
  background-image:
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.018) 0 1px, transparent 1px 4px);
}

/* Dot grid */
.hv-dotgrid {
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Noise texture via SVG, very subtle */
.hv-noise::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ─── Glitch type ─── */
@keyframes hv-glitch-x {
  0%, 92%, 100% { transform: translate(0,0); }
  93% { transform: translate(-1.5px, 0); }
  95% { transform: translate(2px, -1px); }
  97% { transform: translate(-1px, 1px); }
}
@keyframes hv-glitch-split {
  0%, 92%, 100% { text-shadow: 0 0 transparent; }
  93% { text-shadow: -2px 0 var(--hv-accent), 2px 0 var(--hv-accent-2); }
  96% { text-shadow: 2px 0 var(--hv-accent), -2px 0 var(--hv-accent-2); }
}
.hv-glitch { animation: hv-glitch-x 6s infinite, hv-glitch-split 6s infinite; }

/* Caret blink */
@keyframes hv-caret { 0%,49%{opacity:1}50%,100%{opacity:0} }
.hv-caret::after { content: "_"; margin-left: 2px; animation: hv-caret 1s step-end infinite; }

/* Marquee-ish scan pulse */
@keyframes hv-scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
.hv-scanline::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,229,255,0.08) 50%, transparent 100%);
  pointer-events: none;
  animation: hv-scanline 8s linear infinite;
}

/* Typed caret */
@keyframes hv-blink { 0%,49%{opacity:1}50%,100%{opacity:0} }
.hv-blink { animation: hv-blink 1s step-end infinite; }

/* Kill chain pulse */
@keyframes hv-pulse {
  0%,100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50% { box-shadow: 0 0 0 8px transparent; opacity: 0.7; }
}
.hv-pulse { animation: hv-pulse 2s ease-in-out infinite; }

/* Kill chain link draw */
@keyframes hv-dashmove { to { stroke-dashoffset: -24; } }
.hv-dashmove { stroke-dasharray: 6 4; animation: hv-dashmove 1.2s linear infinite; }

/* Button-like link */
.hv-link {
  color: var(--hv-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--hv-line-strong);
  transition: color .15s, border-color .15s;
}
.hv-link:hover { color: var(--hv-accent-2); border-bottom-color: var(--hv-accent-2); }

/* Tag */
.hv-tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  font-family: var(--hv-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--hv-line-strong);
  color: var(--hv-fg-dim);
  border-radius: 2px;
}
.hv-tag.on-mag { color: var(--hv-accent); border-color: color-mix(in oklab, var(--hv-accent) 40%, transparent); }
.hv-tag.on-cya { color: var(--hv-accent-2); border-color: color-mix(in oklab, var(--hv-accent-2) 40%, transparent); }
.hv-tag.on-warn { color: var(--hv-warn); border-color: color-mix(in oklab, var(--hv-warn) 40%, transparent); }

/* KBD-like */
.hv-kbd {
  font-family: var(--hv-mono);
  font-size: 10.5px;
  padding: 1px 5px;
  border: 1px solid var(--hv-line-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: var(--hv-fg-dim);
  background: rgba(255,255,255,0.02);
}

/* Divider */
.hv-hr { height: 1px; background: var(--hv-line); border: 0; margin: 0; }
.hv-vr { width: 1px; background: var(--hv-line); align-self: stretch; }

/* Scrollbar hide inside artboards */
.hv-noscroll::-webkit-scrollbar { display: none; }
.hv-noscroll { scrollbar-width: none; }

/* Placeholder asset */
.hv-placeholder {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.03) 0 10px,
      rgba(255,255,255,0.00) 10px 20px),
    #0e0e17;
  border: 1px solid var(--hv-line);
  color: var(--hv-fg-faint);
  font-family: var(--hv-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
}

/* Light theme overrides (applied on root via attr) */
.hv-root[data-theme="light"] {
  --hv-bg: #f4f2ec;
  --hv-bg-2: #eae7df;
  --hv-bg-3: #e0ddd2;
  --hv-line: rgba(0,0,0,0.10);
  --hv-line-strong: rgba(0,0,0,0.22);
  --hv-fg: #14141a;
  --hv-fg-dim: rgba(20,20,26,0.68);
  --hv-fg-faint: rgba(20,20,26,0.42);
}
.hv-root[data-theme="light"] .hv-placeholder {
  background:
    repeating-linear-gradient(135deg,
      rgba(0,0,0,0.05) 0 10px,
      rgba(0,0,0,0.00) 10px 20px),
    #eceae2;
}
.hv-root[data-theme="light"] .hv-dotgrid {
  background-image: radial-gradient(rgba(0,0,0,0.14) 1px, transparent 1px);
}

/* --- accent swap via [data-accent] --- */
.hv-root[data-accent="magenta"] { --hv-accent: #ff2b8f; --hv-accent-2: #00e5ff; }
.hv-root[data-accent="cyan"]    { --hv-accent: #00e5ff; --hv-accent-2: #ff2b8f; }
.hv-root[data-accent="green"]   { --hv-accent: #3dff8a; --hv-accent-2: #ffbf00; }
.hv-root[data-accent="amber"]   { --hv-accent: #ffbf00; --hv-accent-2: #3dff8a; }