/* ═══════════════════════════════════════════════════════════════════════════
   MFGFlow — Shared Stylesheet
   Included by: index.html, resources.html, v2.html
   Page-specific overrides live in each file's inline <style> block.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: #000;
  color: #fff;
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  overflow-x: hidden;
}

/* Subtle scanline overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.018) 0px,
    rgba(255,255,255,0.018) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 9998;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #222; border-radius: 0; }

/* ── Grid background ─────────────────────────────────────────────────────── */
.grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ── Nav blur ────────────────────────────────────────────────────────────── */
.nav-blur { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.cursor::after { content: '_'; animation: blink 1.1s step-end infinite; }

@keyframes rotate-cw  { to { transform: rotate(360deg); } }
@keyframes rotate-ccw { to { transform: rotate(-360deg); } }
.gear-cw  { animation: rotate-cw  28s linear infinite; transform-origin: center; }
.gear-ccw { animation: rotate-ccw 20s linear infinite; transform-origin: center; }

@keyframes flow { 0%{stroke-dashoffset:200} 100%{stroke-dashoffset:0} }
.flow-dash { stroke-dasharray: 6 14; animation: flow 2.5s linear infinite; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.term-card {
  border: 1px solid #1c1c1c;
  background: #060606;
  transition: border-color .25s, background .25s;
}
.term-card:hover { border-color: #444; background: #0c0c0c; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  background: #fff;
  color: #000;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background .2s;
  cursor: pointer;
}
.btn-primary:hover { background: #d4d4d4; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  border: 1px solid #333;
  color: #888;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color .2s, color .2s;
}
.btn-secondary:hover { border-color: #fff; color: #fff; }

/* ── Section labels ──────────────────────────────────────────────────────── */
.term-label {
  color: #444;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Particle canvas ─────────────────────────────────────────────────────── */
#particle-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ── Spline viewer ───────────────────────────────────────────────────────── */
.spline-wrap {
  position: relative;
  overflow: hidden;
}
.spline-wrap spline-viewer {
  width: 100%;
  height: 100%;
  display: block;
}
@media (min-width: 768px) {
  #spline-wrap { height: 480px !important; }
}

/* Hide Spline watermark */
spline-viewer::part(logo) { display: none !important; }
spline-viewer::part(watermark) { display: none !important; }

.spline-logo-cover {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 52px;
  background: #040404;
  z-index: 20;
  pointer-events: all;
}

.spline-spotlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 280px at var(--sx, 50%) var(--sy, 50%), rgba(255,255,255,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.spline-wrap:hover .spline-spotlight { opacity: 1; }