/* =====================================================
   V5 — MISSION CONTROL · HORIZONTAL
   Lifted from marquee-variants.html, scoped for index.html
   ===================================================== */

/* SHARED — section heading copy block (.mw-*) */
.mc5-section .mw-head {
  max-width: 760px; margin: 0 auto;
  text-align: center; padding: 0 32px;
}
.mc5-section .mw-head h2 {
  font-family: var(--font-pixel);
  font-size: clamp(30px, 5vw, 60px);
  line-height: 0.95;
  -webkit-font-smoothing: none; font-smooth: never;
  margin: 0 0 16px;
  color: #fff;
}
.mc5-section .mw-head p {
  font-family: var(--font-body);
  font-size: 17px; line-height: 1.55;
  margin: 0 auto; max-width: 560px;
  color: rgba(255,255,255,0.66);
}
.mc5-section .mw-head .eyebrow { color: rgba(255,255,255,0.62); }

/* SHARED — 9:16 video tile */
.mc5-section .vid {
  position: relative; aspect-ratio: 9 / 16;
  overflow: hidden; background: var(--ink-chrome);
  border-radius: 6px; isolation: isolate;
}
.mc5-section .vid::before {
  content: ""; position: absolute; inset: -25%;
  background:
    radial-gradient(60% 50% at 30% 30%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(40% 40% at 70% 70%, rgba(255,255,255,0.14), transparent 70%),
    radial-gradient(45% 60% at 50% 90%, rgba(255,255,255,0.22), transparent 70%),
    linear-gradient(135deg, #2a2a2a 0%, var(--ink-chrome) 60%);
  animation: mc5-vid-drift 14s ease-in-out infinite alternate;
  z-index: 0;
}
.mc5-section .vid::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.45));
  z-index: 1; pointer-events: none;
}
@keyframes mc5-vid-drift {
  0%   { transform: translate(0%,0%) scale(1.0); }
  50%  { transform: translate(-3%,4%) scale(1.05); }
  100% { transform: translate(3%,-3%) scale(1.08); }
}
.mc5-section .vid[data-h]::before     { filter: none; }
.mc5-section .vid[data-h="1"]::before { filter: brightness(0.92); }
.mc5-section .vid[data-h="2"]::before { filter: brightness(1.08); }
.mc5-section .vid[data-h="3"]::before { filter: brightness(0.86); }
.mc5-section .vid[data-h="4"]::before { filter: brightness(1.12) contrast(0.95); }
.mc5-section .vid[data-h="5"]::before { filter: brightness(0.95); }
.mc5-section .vid[data-h="6"]::before { filter: brightness(1.05) contrast(1.05); }
.mc5-section .vid[data-h="7"]::before { filter: brightness(0.88) contrast(1.1); }
.mc5-section .vid[data-h="8"]::before { filter: brightness(1.0) contrast(0.9); }

.mc5-section .vid-top {
  position: absolute; top: 8px; left: 8px; right: 8px; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 8px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.85);
}
.mc5-section .vid-top > span {
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  padding: 2px 5px; border-radius: 2px;
}
.mc5-section .vid-top .live {
  color: #4ADE80; display: inline-flex; align-items: center; gap: 4px;
}
.mc5-section .vid-top .live::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: #4ADE80; animation: mc5-blink 1.2s steps(2) infinite;
}
.mc5-section .vid-headline {
  position: absolute; left: 10px; right: 10px; bottom: 28px; z-index: 3;
  font-family: var(--font-pixel); font-size: 13px; line-height: 1.05;
  -webkit-font-smoothing: none; font-smooth: never;
  color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.mc5-section .vid-meta {
  position: absolute; inset: auto 8px 8px 8px; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 8px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.85);
}
.mc5-section .vid-meta .pill {
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  padding: 2px 5px; border-radius: 2px;
}
@keyframes mc5-blink { 50% { opacity: 0; } }

/* SHARED — flip number */
.mc5-section .tick { display: inline-flex; align-items: baseline; }
.mc5-section .tick.flash { animation: mc5-tickFlash 350ms ease-out; }
@keyframes mc5-tickFlash {
  0%   { color: #fff; }
  100% { color: inherit; }
}

/* SHARED — MC stat block */
.mc5-section .mc-stat {
  padding: 22px 24px;
  border-right: 1px solid rgba(255,255,255,0.10);
  display: flex; flex-direction: column; gap: 6px;
}
.mc5-section .mc-stat:last-child { border-right: none; }
.mc5-section .mc-stat-label {
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.48);
}
.mc5-section .mc-stat-val {
  font-family: var(--font-pixel); font-size: 36px; line-height: 1;
  -webkit-font-smoothing: none; font-smooth: never;
  color: #fff;
}
.mc5-section .mc-stat-delta {
  font-family: var(--font-mono); font-size: 10px;
  color: #4ADE80; letter-spacing: 0.08em;
}
.mc5-section .mc-stat-delta.down { color: #FACC15; }

/* SHARED — MC creative card */
.mc5-section .mc-card {
  position: relative;
  background: var(--ink-raised);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 8px 8px 10px;
  border-radius: 6px;
}
.mc5-section .mc-card .vid { border-radius: 3px; }
.mc5-section .mc-card-meta {
  margin-top: 8px;
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: 8px;
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: rgba(255,255,255,0.5);
}
.mc5-section .mc-card-meta .perf {
  color: #4ADE80;
  font-family: var(--font-pixel);
  font-size: 14px;
}

/* SHARED — log window */
.mc5-section .mc-log-window {
  background: #0a0a0c;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  overflow: hidden;
}
.mc5-section .mc-log-head {
  padding: 9px 14px;
  background: var(--ink-raised);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.55);
  display: flex; align-items: center; gap: 12px;
}
.mc5-section .mc-log-head .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; animation: mc5-blink 1.2s steps(2) infinite; }
.mc5-section .mc-log-body {
  padding: 14px 18px;
  font-family: var(--font-mono); font-size: 11px;
  line-height: 1.85;
  color: rgba(255,255,255,0.78);
  height: 132px;
  overflow: hidden;
  position: relative;
}
.mc5-section .mc-log-line { display: flex; gap: 12px; }
.mc5-section .mc-log-line .ts { color: rgba(255,255,255,0.38); min-width: 70px; }
.mc5-section .mc-log-line .ok { color: #4ADE80; min-width: 28px; }
.mc5-section .mc-log-line .warn { color: #FACC15; min-width: 28px; }
.mc5-section .mc-log-line .info { color: rgba(255,255,255,0.78); min-width: 28px; }

/* V5 — frame */
.mc5 {
  background: var(--ink); color: #fff;
  padding: 96px 0 0; overflow: hidden;
  position: relative;
}
.mc5-hud {
  max-width: 1240px; margin: 56px auto 0;
  padding: 0 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mc5-hud-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.mc5-status {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 32px;
  max-width: 1240px; margin: 0 auto;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.62);
}
.mc5-status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ADE80; animation: mc5-blink 1.2s steps(2) infinite;
}
.mc5-status .sep { color: rgba(255,255,255,0.25); }
.mc5-status .uptime { color: rgba(255,255,255,0.85); margin-left: auto; font-variant-numeric: tabular-nums; }

.mc5-wall {
  margin: 28px 0 0;
  overflow: hidden;
  padding: 28px 0 12px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.mc5-wall-inner {
  display: flex; gap: 22px;
  align-items: flex-start;
  width: max-content;
  padding: 0 32px;
  animation: mc5-flow 50s linear infinite;
}
@keyframes mc5-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.mc5-wall-inner .mc-card {
  flex-shrink: 0;
  width: 200px;
  align-self: flex-start;
}
.mc5-wall-inner .mc-card:nth-child(3n+2) { margin-top: 28px; }
.mc5-wall-inner .mc-card:nth-child(3n+3) { margin-top: -14px; }

/* v5-only: IBM Plex Mono for the channel/perf meta line + in-video headline */
.mc5-wall-inner .mc-card-meta {
  font-family: 'IBM Plex Mono', 'Space Mono', ui-monospace, monospace;
  letter-spacing: 0.08em;
}
.mc5-wall-inner .mc-card-meta .perf {
  font-family: 'IBM Plex Mono', 'Space Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 12px;
}
.mc5-wall-inner .vid-headline {
  font-family: 'IBM Plex Mono', 'Space Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  bottom: 32px;
  -webkit-font-smoothing: antialiased;
  font-smooth: always;
}

.mc5-log {
  max-width: 1240px; margin: 0 auto;
  padding: 0 32px 56px;
}

/* RESPONSIVE — tablet */
@media (max-width: 1000px) {
  .mc5 { padding-top: 64px; }
  .mc5-hud { margin-top: 40px; }
  .mc5-hud-inner { grid-template-columns: repeat(3, 1fr); }
  .mc5-hud-inner > .mc5-hide-mobile { display: none; }
  .mc5-status { font-size: 9px; gap: 8px; }
  .mc5-status .uptime { width: 100%; text-align: right; }
  .mc5-wall-inner .mc-card { width: 170px; }
}

/* RESPONSIVE — mobile */
@media (max-width: 640px) {
  .mc5-section .mw-head { padding: 0 20px; }
  .mc5-section .mw-head h2 { font-size: 28px; line-height: 1; margin-bottom: 12px; }
  .mc5-section .mw-head p  { font-size: 14px; line-height: 1.5; }
  .mc5-section .mw-head .eyebrow { font-size: 10px; margin-bottom: 12px; }

  .mc5 { padding: 48px 0 0; }
  .mc5-hud { display: none; }

  .mc5-status { display: none; }
  .mc5-status::-webkit-scrollbar { display: none; }
  .mc5-status > * { flex-shrink: 0; }
  .mc5-status .dot { width: 7px; height: 7px; }

  .mc5-wall { margin-top: 20px; padding: 24px 0 12px; }
  .mc5-wall-inner { gap: 14px; padding: 0 16px; animation-duration: 38s; }
  .mc5-wall-inner .mc-card { width: 150px; padding: 6px 6px 8px; }
  .mc5-wall-inner .mc-card:nth-child(3n+2) { margin-top: 18px; }
  .mc5-wall-inner .mc-card:nth-child(3n+3) { margin-top: -8px; }
  .mc5-wall-inner .mc-card-meta { font-size: 7px; gap: 2px; }
  .mc5-wall-inner .mc-card-meta .perf { font-size: 12px; }

  .mc5-log { padding: 0 14px 48px; }
  .mc5-log .mc-log-head { padding: 8px 12px; font-size: 8px; }
  .mc5-log .mc-log-body { padding: 10px 12px; font-size: 9px; height: 108px; line-height: 1.75; }
  .mc5-log .mc-log-line { gap: 8px; }
  .mc5-log .mc-log-line .ts { min-width: 52px; font-size: 9px; }
  .mc5-log .mc-log-line .ok,
  .mc5-log .mc-log-line .warn,
  .mc5-log .mc-log-line .info { min-width: 24px; font-size: 9px; }
}

/* =====================================================
   V6 — MISSION CONTROL · BRANDED
   Same skeleton as V5, branding realigned to index.html
   - Plex Mono → Space Mono / Pixel
   - Status greens/yellows → --accent / --warning
   - .section-head heading scaffold (matches LOOP / WHY)
   - Symmetric 96px section padding
   - Card radius 8px, vid 4px
   - Mac traffic-light log chrome
   - .vid gradient stays in blueprint family
   ===================================================== */

/* Section root uses .section .section--ink — the .mc5 class is dropped */
.mc-branded.mc5-section {
  /* section already handles padding/bg via .section.section--ink */
  overflow: hidden;
  position: relative;
}

/* — Heading scaffold (use site .section-head; clean out any .mw-head leftovers) */
.mc-branded .section-head { margin-bottom: 56px; }

/* — HUD: keep mc5 layout, just retune margins so it sits below .section-head */
.mc-branded .mc5-hud {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

/* — Card surface: token-aligned + radius bump */
.mc-branded .mc-card {
  background: var(--ink-chrome);
  border-radius: 8px;
}
.mc-branded .mc-card .vid { border-radius: 4px; }

/* — Log window: replace single green dot with mac traffic lights */
.mc-branded .mc-log-head .dot {
  width: 10px; height: 10px;
  border: 1px solid rgba(0,0,0,0.15);
  animation: none;
  background: var(--gray-400, #ccc);
}
.mc-branded .mc-log-head .dot--c { background: var(--dot-close); }
.mc-branded .mc-log-head .dot--m { background: var(--dot-min); }
.mc-branded .mc-log-head .dot--x { background: var(--dot-max); }

/* — Wall typography: kill Plex, return to brand fonts */
.mc-branded .mc5-wall-inner .mc-card-meta {
  font-family: var(--font-mono);
  letter-spacing: 0.10em;
}
.mc-branded .mc5-wall-inner .mc-card-meta .perf {
  font-family: var(--font-pixel);
  font-weight: normal;
  font-size: 14px;
}
.mc-branded .mc5-wall-inner .vid-headline {
  font-family: var(--font-pixel);
  font-weight: normal;
  font-size: 13px;
  line-height: 1.05;
  letter-spacing: 0;
  bottom: 28px;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

/* — Tile gradients: hold to the blueprint blue family (vary brightness/saturate only) */
.mc-branded .vid[data-h]::before  { filter: none; }
.mc-branded .vid[data-h="1"]::before { filter: brightness(1.10) saturate(0.85); }
.mc-branded .vid[data-h="2"]::before { filter: brightness(0.90); }
.mc-branded .vid[data-h="3"]::before { filter: brightness(1.05) saturate(0.80); }
.mc-branded .vid[data-h="4"]::before { filter: brightness(0.95) saturate(1.15); }
.mc-branded .vid[data-h="5"]::before { filter: brightness(1.15) saturate(0.75); }
.mc-branded .vid[data-h="6"]::before { filter: brightness(0.85); }
.mc-branded .vid[data-h="7"]::before { filter: brightness(1.00) saturate(1.20); }
.mc-branded .vid[data-h="8"]::before { filter: brightness(1.10) saturate(0.90); }

/* — Compare marker between the two MC sections */
.mc-compare-marker {
  background: var(--ink);
  color: rgba(255,255,255,0.55);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 18px 32px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mc-compare-marker strong {
  color: var(--accent);
  font-weight: normal;
  margin-right: 10px;
}

/* =====================================================
   MC · LIGHT — white-background companion variant
   Sits under the dark .mc-branded section.
   All dark-mode color choices inverted; .vid tiles
   stay dark (the creative artifacts are inherently
   video frames; keeping them dark preserves contrast).
   ===================================================== */
.mc-light.mc5-section {
  background: var(--bg);
  color: var(--fg-1);
}

/* Heading + eyebrow already inherit from .section / .section-head;
   no extra rules needed (uses --accent eyebrow + ink h2). */

/* — HUD borders + label colors flip to ink tints */
.mc-light .mc5-hud {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.mc-light .mc-stat { border-right: 1px solid var(--border); }
.mc-light .mc-stat:last-child { border-right: none; }
.mc-light .mc-stat-label  { color: var(--fg-2); }
.mc-light .mc-stat-val    { color: var(--fg-1); }
.mc-light .mc-stat-delta  { color: var(--accent); }
.mc-light .mc-stat-delta.down { color: var(--warning); }

/* — Status line on light */
.mc-light .mc5-status {
  border-bottom: 1px solid var(--border);
  color: var(--fg-2);
}
.mc-light .mc5-status .sep { color: var(--gray-400); }
.mc-light .mc5-status .uptime { color: var(--fg-1); }
.mc-light .mc5-status .dot { background: var(--accent); }

/* — Wall fade mask uses bg, not ink */
.mc-light .mc5-wall {
  -webkit-mask-image: linear-gradient(to right, transparent 0, var(--bg) 4%, var(--bg) 96%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, var(--bg) 4%, var(--bg) 96%, transparent 100%);
}

/* — Card surface: paper instead of near-black */
.mc-light .mc-card {
  background: var(--paper);
  border: 1px solid var(--paper-edge);
}
.mc-light .mc-card-meta { color: var(--fg-2); }
.mc-light .mc-card-meta .perf { color: var(--accent); }

/* — Tick flash needs a visible target on white;
   accent already works but make sure it overrides any dark-side flash. */
.mc-light .tick.flash {
  animation-name: mc-light-tickFlash;
}
@keyframes mc-light-tickFlash {
  0%   { color: var(--accent); }
  100% { color: inherit; }
}

/* =====================================================
   REAL CREATIVE — image/video drops inside .vid
   Suppresses the placeholder gradient and lets the
   actual 9:16 asset render full-bleed under the chrome.
   Specificity bumped via `.mc-card` so site-neutral.css
   can't reassert the placeholder gradient over it.
   ===================================================== */
.mc5-section .mc-card .vid--media::after { content: none; }
.mc5-section .mc-card .vid--media { background: #0a0a0c; }
.mc5-section .mc-card .vid--media .vid-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 1;
  display: block;
  pointer-events: none;
  -webkit-user-select: none; user-select: none;
}
/* Subtle top/bottom scrim so the LIVE chip + meta pills stay legible
   regardless of what's in the underlying frame. */
.mc5-section .mc-card .vid--media::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.55) 100%);
  filter: none;
  animation: none;
  pointer-events: none;
}