/* =========================================================================
   VOLTRYX v4 — homemade / domain-specific
   Decrypt typography, perimeter widget, sketchy annotations, Fibonacci scale
   ========================================================================= */

:root {
  /* Fibonacci spacing tokens */
  --fib-1: 8px;
  --fib-2: 13px;
  --fib-3: 21px;
  --fib-4: 34px;
  --fib-5: 55px;
  --fib-6: 89px;
  --fib-7: 144px;
}

/* ============================================================
   Decrypt-cipher effect: locks in width so layout doesn't jump
   ============================================================ */
.decrypt {
  font-variant-ligatures: none;
  font-variant-numeric: tabular-nums;
}
.decrypt .glyph {
  display: inline-block;
  white-space: pre;
}

/* ============================================================
   Replace mission-control body with bespoke 2-tile widget
   ============================================================ */
.mc-body.bespoke {
  display: grid;
  grid-template-columns: 1fr 1.05fr; /* golden-ratio-ish */
  gap: 1px;
  min-height: 460px;
}
@media (max-width: 900px) {
  .mc-body.bespoke { grid-template-columns: 1fr; }
}

/* Perimeter widget */
.mc-perimeter {
  background: var(--bg);
  padding: var(--fib-4);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mc-perimeter .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--fib-2);
  font-weight: 500;
}
.mc-perimeter .label .stats { display: inline-flex; gap: var(--fib-2); }
.mc-perimeter .label .stats b {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  margin-right: 4px;
}
.mc-perimeter-canvas {
  flex: 1;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
}
.mc-perimeter-canvas svg {
  width: 100%;
  height: 100%;
  max-width: 460px;
  max-height: 380px;
}
.mc-perimeter-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--fib-2);
  padding-top: var(--fib-3);
  margin-top: var(--fib-2);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}
.mc-perimeter-foot .leg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mc-perimeter-foot .leg::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
}
.mc-perimeter-foot .leg.attack::before { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.mc-perimeter-foot .leg.edge::before { background: var(--warn); }
.mc-perimeter-foot .leg.core::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* Terminal */
.mc-terminal {
  background: #06040c;
  padding: var(--fib-4);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-mono);
}
.mc-terminal::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(200, 182, 255, 0.025) 0px,
      rgba(200, 182, 255, 0.025) 1px,
      transparent 1px,
      transparent 3px
    );
  pointer-events: none;
  opacity: 0.6;
}
.mc-terminal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--fib-3);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  position: relative;
  z-index: 1;
}
.mc-terminal-head .path { color: var(--accent); }
.mc-terminal-head .blink {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.mc-terminal-body {
  flex: 1;
  position: relative;
  z-index: 1;
  font-size: 12px;
  line-height: 1.55;
  color: #b8b0c8;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  overflow: hidden;
  min-height: 320px;
}
.mc-terminal-line { display: flex; gap: 8px; align-items: baseline; }
.mc-terminal-line .ts { color: #5a5468; font-size: 11px; flex-shrink: 0; }
.mc-terminal-line .lvl {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  width: 38px;
}
.mc-terminal-line .lvl.ok   { color: var(--ok); }
.mc-terminal-line .lvl.warn { color: var(--warn); }
.mc-terminal-line .lvl.crit { color: var(--danger); }
.mc-terminal-line .lvl.info { color: var(--accent); }
.mc-terminal-line .msg { color: #d4cce0; }
.mc-terminal-line .arg { color: var(--accent-2); }
.mc-terminal-line .num { color: var(--warn); }

.mc-terminal-prompt {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--accent);
  margin-top: var(--fib-2);
}
.mc-terminal-prompt::before {
  content: "$";
  color: var(--accent-2);
}
.mc-terminal-cursor {
  display: inline-block;
  width: 7px; height: 13px;
  background: var(--accent);
  animation: blink 1s steps(2) infinite;
  vertical-align: middle;
}

/* ============================================================
   Sketchy hand-drawn annotations
   ============================================================ */
.annot {
  position: absolute;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--accent);
  pointer-events: none;
  z-index: 5;
  filter: url(#sketchy);
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}
.annot.is-in { opacity: 1; transition-delay: 0.4s; }
.annot svg {
  position: absolute;
  width: 90px;
  height: 70px;
  overflow: visible;
}
.annot .text {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

/* Position: top-left annotation pointing into the perimeter widget */
.annot-perimeter {
  top: -20px;
  left: -100px;
  transform: rotate(-4deg);
}
.annot-perimeter svg {
  top: 22px;
  left: 80px;
  transform: rotate(15deg);
}
.annot-perimeter .text {
  display: inline-block;
  max-width: 130px;
  text-wrap: balance;
  line-height: 1.15;
}
@media (max-width: 1180px) { .annot-perimeter { display: none; } }

/* Position: right-side annotation on terminal */
.annot-terminal {
  bottom: -20px;
  right: -110px;
  transform: rotate(3deg);
}
.annot-terminal svg {
  bottom: 26px;
  right: 80px;
  transform: rotate(-12deg) scaleX(-1);
}
.annot-terminal .text {
  display: inline-block;
  max-width: 130px;
  text-align: right;
  text-wrap: balance;
  line-height: 1.15;
}
@media (max-width: 1180px) { .annot-terminal { display: none; } }

/* Annotation on stats — "this is real" */
.annot-stats {
  position: absolute;
  top: -36px;
  right: 32px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--accent);
  transform: rotate(-3deg);
  filter: url(#sketchy);
}
.annot-stats svg {
  position: absolute;
  width: 60px; height: 50px;
  top: 18px;
  right: -50px;
  transform: rotate(40deg);
}
@media (max-width: 700px) { .annot-stats { display: none; } }

/* ============================================================
   Marquee — cyber lexicon items
   ============================================================ */
.marquee-track .item.kind-tag {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  color: var(--text-dim);
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.marquee-track .item.kind-tag .glyph { display: none; }
.marquee-track .item.kind-tag::before {
  content: "/";
  color: var(--text-faint);
  margin-right: 4px;
}

/* ============================================================
   Hero: lock the headline width to prevent shift on decrypt
   ============================================================ */
.hero h1 .line {
  display: block;
  overflow: visible;
}

/* ============================================================
   Section spacing harmonized to Fibonacci
   ============================================================ */
.section { padding: var(--fib-7) 0; }
@media (max-width: 700px) { .section { padding: var(--fib-6) 0; } }
.section-head { margin-bottom: var(--fib-6); }
.features-grid { gap: var(--fib-2); }
.feature { padding: var(--fib-4); }
.stats { position: relative; }
.cta { padding: var(--fib-7) var(--fib-5); }

/* ============================================================
   Add a soft "engineered" stamp under hero meta
   ============================================================ */
.hero-stamp {
  margin-top: var(--fib-4);
  display: inline-flex;
  align-items: center;
  gap: var(--fib-2);
  opacity: 0;
  transition: opacity 1s var(--ease-out);
  transition-delay: 1.6s;
}
.hero.is-ready .hero-stamp { opacity: 0.7; }
.hero-stamp svg { width: 56px; height: 56px; }
.hero-stamp .meta {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  text-align: left;
}
.hero-stamp .meta b { color: var(--text-dim); font-weight: 500; }