/* Voltrus — shared design-system layer.
   Loaded LAST in <head> (after each page's inline <style>), so it can override
   the --font-serif token globally and auto-apply the control-room aesthetic to
   existing card classes — no per-page markup needed.

   Reads tokens pages already define (--accent, --bg, --text, --border).
   Pages that omit them just get no decoration — graceful. */

/* ---- Display font: Chakra Petch over Playfair (Playfair stays as fallback) ---- */
:root,
[data-theme="dark"] {
  --font-serif: "Chakra Petch", "Playfair Display", Georgia, serif;
}
[data-theme="light"] {
  --font-serif: "Chakra Petch", "Playfair Display", Georgia, serif;
}

/* ---- Atmosphere: precision grid + glow + scanlines + drifting sweep ---- */
.lp-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.lp-bg__grid {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
  opacity: 0.6;
}
.lp-bg__grid--fine {
  background-size: 16px 16px;
  opacity: 0.18;
  mask-image: radial-gradient(ellipse 60% 40% at 50% 10%, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 40% at 50% 10%, #000 20%, transparent 70%);
}
.lp-bg__glow {
  position: absolute;
  top: -20%;
  left: 50%;
  width: 900px;
  height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--accent) 16%, transparent),
    transparent 70%
  );
  filter: blur(20px);
}
.lp-bg__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    color-mix(in srgb, var(--text) 2.2%, transparent) 3px,
    color-mix(in srgb, var(--text) 2.2%, transparent) 4px
  );
  opacity: 0.4;
  mix-blend-mode: overlay;
}
.lp-bg__sweep {
  position: absolute;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--accent) 6%, transparent),
    transparent
  );
  animation: lp-sweep 9s linear infinite;
}
@keyframes lp-sweep {
  0% { transform: translateY(-160px); }
  100% { transform: translateY(120vh); }
}

/* ---- Corner brackets — auto-applied to feature cards ---- */
.feature-card {
  position: relative;
}
.feature-card::before,
.feature-card::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  border-style: solid;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 200ms ease;
}
.feature-card::before {
  top: -1px;
  left: -1px;
  border-width: 1px 0 0 1px;
}
.feature-card::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 1px 1px 0;
}
.feature-card:hover::before,
.feature-card:hover::after {
  opacity: 1;
}

/* ---- Accent tick on card titles ---- */
.feature-card > h3 {
  position: relative;
  padding-left: 14px;
}
.feature-card > h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 3px;
  height: calc(1em + 2px);
  background: var(--accent);
  border-radius: 2px;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .lp-bg__sweep { animation: none !important; }
}

/* ---- Header wordmark logo (all pages) ---- */
.wordmark { display: inline-flex; align-items: center; gap: 8px; }
.wordmark img { width: 18px; height: 18px; border-radius: 5px; display: block; }
