/* Shared tokens + components for all under-construction templates.
   Palette: Gengar — ghost purple body, red eyes, white grin, on near-black. */

:root {
  --bg: #07050c;
  --bg-2: #100a1b;
  --surface: rgba(28, 17, 46, 0.55);
  --surface-solid: #140d22;

  --gengar-deep: #2c1b4a;
  --gengar: #6b4fa0;
  --gengar-light: #a785d9;
  --neon: #b46dff;
  --neon-soft: rgba(180, 109, 255, 0.35);

  --eye: #ff2e55;
  --eye-glow: rgba(255, 46, 85, 0.6);
  --tooth: #f4effd;

  --text: #ece6f7;
  --muted: #9989b6;
  --line: rgba(180, 109, 255, 0.18);

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

::selection { background: var(--eye); color: var(--tooth); }

/* ---------- overlays ---------- */

.scanlines {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: overlay;
}

.noise {
  pointer-events: none;
  position: fixed;
  inset: -50%;
  z-index: 49;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: noise-shift 0.8s steps(4) infinite;
}

@keyframes noise-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -1%); }
  100% { transform: translate(0, 0); }
}

/* ---------- ghost mark (eyes + grin) ---------- */

.mark { display: block; overflow: visible; }
.mark .eye { fill: var(--eye); filter: drop-shadow(0 0 6px var(--eye-glow)) drop-shadow(0 0 18px var(--eye-glow)); }
.mark .pupil { fill: #2a0410; }
.mark .grin { fill: var(--tooth); filter: drop-shadow(0 0 8px rgba(244, 239, 253, 0.35)); }
.mark .teeth { fill: none; stroke: var(--gengar-deep); stroke-width: 1.6; stroke-linejoin: round; }
.mark .eyes { transform-box: fill-box; transform-origin: center; animation: blink 6s infinite; }

@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%           { transform: scaleY(0.08); }
  96%           { transform: scaleY(1); }
}

/* ---------- glitch text ---------- */

.glitch { position: relative; display: inline-block; }
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.glitch::before {
  color: var(--eye);
  transform: translate(-2px, 0);
  mix-blend-mode: screen;
  animation: glitch-a 3.2s infinite steps(1);
}
.glitch::after {
  color: var(--neon);
  transform: translate(2px, 0);
  mix-blend-mode: screen;
  animation: glitch-b 2.7s infinite steps(1);
}

@keyframes glitch-a {
  0%, 86%, 100% { clip-path: inset(0 0 100% 0); }
  87% { clip-path: inset(12% 0 64% 0); transform: translate(-6px, 0); }
  89% { clip-path: inset(58% 0 18% 0); transform: translate(4px, 0); }
  91% { clip-path: inset(34% 0 41% 0); transform: translate(-3px, 0); }
  93% { clip-path: inset(0 0 100% 0); }
}
@keyframes glitch-b {
  0%, 78%, 100% { clip-path: inset(0 0 100% 0); }
  79% { clip-path: inset(70% 0 6% 0); transform: translate(5px, 0); }
  81% { clip-path: inset(22% 0 60% 0); transform: translate(-5px, 0); }
  83% { clip-path: inset(0 0 100% 0); }
}

/* ---------- small UI pieces ---------- */

.label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gengar-light);
}
.status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--eye);
  box-shadow: 0 0 0 0 var(--eye-glow);
  animation: pulse 1.8s infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--eye-glow); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 46, 85, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 46, 85, 0); }
}

.progress {
  position: relative;
  height: 3px;
  width: 100%;
  background: rgba(180, 109, 255, 0.12);
  border-radius: 3px;
  overflow: hidden;
}
.progress > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--value, 64%);
  background: linear-gradient(90deg, var(--gengar), var(--neon) 70%, var(--eye));
  box-shadow: 0 0 12px var(--neon-soft);
}
.progress > span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-100%);
  animation: shimmer 2.4s infinite;
}

@keyframes shimmer { to { transform: translateX(100%); } }

.footer {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.footer a { text-decoration: none; border-bottom: 1px solid var(--line); transition: color 0.2s, border-color 0.2s; }
.footer a:hover { color: var(--eye); border-color: var(--eye); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.footer .apps { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.footer .apps a::before { content: "↗ "; color: var(--eye); }