/* Shared styles for all three directions */

/* ============ DIRECTION A — Console Technical ============ */
.a-root {
  --bg: #07090c;
  --bg-2: #0c1015;
  --panel: #0f141b;
  --line: rgba(120, 180, 220, 0.08);
  --line-2: rgba(120, 180, 220, 0.16);
  --fg: #d8e4ee;
  --muted: #6a7a8a;
  --muted-2: #4a5868;
  --accent: #4ad6c8;
  --accent-2: #1d8a82;
  --warn: #e8a14a;
  background: var(--bg);
  color: var(--fg);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.a-root *::selection { background: var(--accent); color: var(--bg); }
.a-mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
.a-display {
  font-family: 'Inter Tight', 'Helvetica Neue', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.a-grid-bg {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
}
.a-tick { color: var(--muted-2); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }
.a-rule { height: 1px; background: var(--line-2); }
.a-rule-dotted { height: 1px; background-image: linear-gradient(90deg, var(--line-2) 50%, transparent 50%); background-size: 6px 1px; }
.a-led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent), 0 0 2px var(--accent);
  animation: a-pulse 1.6s ease-in-out infinite;
}
@keyframes a-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* VU meter bars */
.vu-bar {
  display: inline-block;
  width: 4px;
  margin-right: 2px;
  background: linear-gradient(to top, var(--accent-2), var(--accent) 60%, var(--warn) 90%);
  border-radius: 1px;
  vertical-align: bottom;
}

/* Waveform */
.wave-bar {
  display: inline-block;
  width: 2px;
  margin-right: 1px;
  background: currentColor;
  border-radius: 1px;
  vertical-align: middle;
  transition: background 0.2s;
}

/* Marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track {
  display: inline-flex;
  animation: marquee 40s linear infinite;
  white-space: nowrap;
}

/* ============ DIRECTION B — Editorial ============ */
.b-root {
  --bg: #0a1014;
  --bg-2: #0f1820;
  --fg: #e8efe8;
  --muted: #7a8a8a;
  --accent: #c4d8c8;
  --accent-2: #6a9088;
  --warm: #d8a878;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', system-ui, sans-serif;
}
.b-serif {
  font-family: 'Newsreader', 'Times New Roman', serif;
  font-weight: 300;
  letter-spacing: -0.015em;
}
.b-italic { font-style: italic; }
.b-mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }

/* ============ DIRECTION C — Brutalist Grid ============ */
.c-root {
  --bg: #0e1418;
  --bg-2: #131b22;
  --fg: #e6ecf0;
  --muted: #5a6a78;
  --accent: #00d4c4;
  --accent-2: #ffd042;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  background: var(--bg);
  color: var(--fg);
  font-family: 'Space Grotesk', 'Helvetica Neue', system-ui, sans-serif;
}
.c-mega {
  font-family: 'Space Grotesk', 'Helvetica Neue', sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.85;
}
.c-mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }

/* shared placeholder image */
.placeholder-img {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.025),
      rgba(255,255,255,0.025) 8px,
      rgba(255,255,255,0.05) 8px,
      rgba(255,255,255,0.05) 16px
    ),
    linear-gradient(135deg, #1a2530 0%, #0a1014 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  position: relative;
  overflow: hidden;
}
.placeholder-img::after {
  content: '';
  position: absolute; inset: 8px;
  border: 1px dashed rgba(255,255,255,0.1);
}

/* hover credits */
.hover-row {
  position: relative;
  cursor: default;
  transition: padding 0.3s cubic-bezier(.2,.7,.3,1), background 0.2s;
}
.hover-row .hover-meta {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(.2,.7,.3,1), opacity 0.25s;
  opacity: 0;
}
.hover-row:hover .hover-meta {
  max-height: 80px;
  opacity: 1;
}

/* scrollbar hide inside artboards */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }


/* ============ LIGHT THEME OVERRIDES ============ */

/* A · Console Technical · Light — blueprint paper */
.a-root.light {
  --bg: #f4f6f8;
  --bg-2: #e8ecef;
  --panel: #ffffff;
  --line: rgba(20, 40, 60, 0.08);
  --line-2: rgba(20, 40, 60, 0.18);
  --fg: #1a2530;
  --muted: #5a6a78;
  --muted-2: #8a98a6;
  --accent: #008b80;
  --accent-2: #005a52;
  --warn: #b8762a;
}

/* B · Editorial · Light — cream paper */
.b-root.light {
  --bg: #f5f1e8;
  --bg-2: #ebe6d8;
  --fg: #1a1814;
  --muted: #7a7468;
  --accent: #5a8576;
  --accent-2: #3a5048;
  --warm: #9a4a18;
  --line: rgba(20, 18, 12, 0.1);
  --line-2: rgba(20, 18, 12, 0.2);
}

/* C · Brutalist · Light — high contrast */
.c-root.light {
  --bg: #ffffff;
  --bg-2: #f0f0f0;
  --fg: #0a0a0a;
  --muted: #6a6a6a;
  --line: rgba(0, 0, 0, 0.12);
  --line-2: rgba(0, 0, 0, 0.22);
  --accent: #00a89b;
  --accent-2: #c89020;
}

/* In light mode, the editorial pull-quote-card uses bg-2 — make sure it reads */
.b-root.light { background: var(--bg); color: var(--fg); }
.a-root.light { background: var(--bg); color: var(--fg); }
.c-root.light { background: var(--bg); color: var(--fg); }


/* ============ RESPONSIVE — MOBILE ============ */
/* Designs are authored at 1280. On narrow viewports, stack inline grids
   to a single column and tame oversized type. The clamp() values on hero
   headlines (set per-direction in JSX) handle most font scaling. */

@media (max-width: 900px) {
  /* All inline grid layouts inside any direction collapse to a single column */
  .a-root [style*="grid-template-columns"],
  .b-root [style*="grid-template-columns"],
  .c-root [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Restore the top-nav 3-col chrome in C — must read left/center/right */
  .c-root > div[style*="grid-template-columns: 1fr auto 1fr"] {
    grid-template-columns: 1fr auto 1fr !important;
    gap: 8px !important;
  }
  /* Tighter padding inside sections on mobile */
  .a-root, .b-root, .c-root { font-size: 12px; }
}

@media (max-width: 700px) {
  /* Soak up edge padding on the smallest screens */
  .a-root [style*="padding: 64px 32px"],
  .a-root [style*="padding: 80px 32px"],
  .a-root [style*="padding: '64px 32px"],
  .a-root [style*="padding: '80px 32px"] { padding: 40px 16px !important; }
  .b-root [style*="padding: 100px 56px"],
  .b-root [style*="padding: '100px 56px"],
  .b-root [style*="padding: 120px 56px"],
  .b-root [style*="padding: '120px 56px"] { padding: 56px 18px !important; }
  .c-root [style*="padding: 100px 32px"],
  .c-root [style*="padding: '100px 32px"],
  .c-root [style*="padding: 120px 32px"],
  .c-root [style*="padding: '120px 32px"] { padding: 56px 16px !important; }

  /* Top status bars get cramped — let them wrap */
  .a-root > div:first-child,
  .c-root > div:first-child {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}