/* ================================================================
   SPpC — Shared Stylesheet
   css/style.css
   ================================================================
   1. Design tokens
   2. Reset & base
   3. Animated background
   4. Scanline overlay
   5. Grid-lines layer
   6. Geometric SVG layer
   7. Site header & brand
   8. Status badge & pulse dot
   9. Site footer
   10. Keyframes
   11. Responsive / accessibility
   ================================================================ */


/* ── 1. Design Tokens ─────────────────────────────────────── */
:root {
  --color-bg-deep:  #06070b;
  --color-bg-base:  #0b0f18;
  --color-ink:      #e9edf6;
  --color-muted:    #a8b2c6;
  --color-acid:     #c8ff3d;
  --color-ember:    #ff3b3b;
  --color-cyan:     #27f4ff;
  --color-violet:   #9b7bff;

  --shadow-lg: 0 18px 60px rgba(0, 0, 0, .55);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, .40);

  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;

  --ease: cubic-bezier(.2, .9, .2, 1);

  --font-body:    Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: Orbitron, Inter, sans-serif;
}


/* ── 2. Reset & Base ──────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  height: 100%;
  margin: 0;
  color: var(--color-ink);
  background: linear-gradient(180deg, var(--color-bg-deep), var(--color-bg-base));
  font-family: var(--font-body);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}


/* ── 3. Animated Background ───────────────────────────────── */
.animated-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  background:
    radial-gradient(circle at 20% 30%, rgba(155, 123, 255, .30), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba( 39, 244, 255, .25), transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(255,  59,  59, .20), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(200, 255,  61, .15), transparent 50%);
  filter: drop-shadow(0 0 10px rgba(200, 255, 61, .4));
}


/* ── 4. Scanline Overlay ──────────────────────────────────── */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  opacity: .10;
  z-index: 0;
  background:
    repeating-linear-gradient(  0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient( 90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
  filter: blur(.3px);
  transform: rotate(-2deg);
}


/* ── 5. Grid-Lines Layer ──────────────────────────────────── */
.gridlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .35;
  background:
    linear-gradient(to right,  rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 84px 84px,
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 84px 84px;
  mask-image: radial-gradient(
    closest-side at 50% 45%,
    rgba(0,0,0,1),
    rgba(0,0,0,.7) 55%,
    rgba(0,0,0, 0) 92%
  );
}


/* ── 6. Geometric SVG Layer ───────────────────────────────── */
.geo {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.geo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .9;
}


/* ── 7. Site Header & Brand ───────────────────────────────── */
.site-header {
  position: relative;
  z-index: 2;
  padding: clamp(18px, 3.5vw, 36px) clamp(18px, 5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 240px;
}

.brand__logo {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  cursor: default;
  filter: drop-shadow(0 0 8px rgba(39, 244, 255, .8));
}
.brand__logo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.brand__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.15;
  user-select: none;
}
/* The "p" in "SPpC" is intentionally lowercase */
.brand__name .lc {
  text-transform: lowercase;
}

.brand__sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--color-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  user-select: none;
}


/* ── 8. Status Badge & Pulse Dot ──────────────────────────── */
.status-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-muted);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-acid);
  box-shadow: 0 0 0 3px rgba(200,255,61,.16), 0 0 18px rgba(200,255,61,.35);
  position: relative;
  flex: 0 0 auto;
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(200, 255, 61, .25);
  opacity: .6;
  animation: pulse 1.8s var(--ease) infinite;
}


/* ── 9. Site Footer ───────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 2;
  padding: 18px clamp(18px, 5vw, 64px) 26px;
  color: rgba(168, 178, 198, .72);
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.site-footer .mono {
  font-family: var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(168, 178, 198, .75);
}

/* Utility colour helpers */
.u-acid { color: var(--color-acid); }
.u-cyan { color: rgba(39, 244, 255, .9); }


/* ── 10. Keyframes ────────────────────────────────────────── */
@keyframes pulse {
  0%   { transform: scale(.75);  opacity: .15; }
  55%  { transform: scale(1.10); opacity: .55; }
  100% { transform: scale(1.35); opacity:  0; }
}

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}


/* ── 11. Responsive & Accessibility ──────────────────────── */
@media (max-width: 920px) {
  .status-badge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-dot::after { animation: none; }
}