/* ─────────────────────────────────────────────────────────────
   HOME.CSS — Cinematic homepage system
   Layered ON TOP of slashing.css. index.html only.
   Three acts: LIGHT lead → DARK war-room → LIGHT close.
   "Light is the argument. Dark is the proof."
   ───────────────────────────────────────────────────────────── */

:root {
  /* dark war-room canvas */
  --ink:        #0A0C10;
  --ink-2:      #0E1116;
  --ink-3:      #141821;
  --ink-line:   rgba(255,255,255,0.07);
  --ink-line-2: rgba(255,255,255,0.12);
  --ink-text:   #E8EBF1;
  --ink-soft:   #AEB6C4;
  --ink-muted:  #6B7585;

  /* glows */
  --glow-red:   rgba(200,16,46,0.45);
  --glow-green: rgba(34,197,94,0.40);
  --glow-blue:  rgba(0,163,224,0.40);

  /* motion */
  --ease-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-weighted: cubic-bezier(0.65, 0, 0.20, 1);
  --dur:           0.9s;
}

/* ── Page-level: kill default scroll jump, set rhythm ── */
.home { position: relative; }

/* The fixed grain/grid field that lives behind everything */
.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(13,15,18,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13,15,18,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 80%);
}

/* ───────────────────────────────────────────
   NAV — elevates over both themes, inverts on dark
   ─────────────────────────────────────────── */
nav.home-nav {
  transition: background 0.5s var(--ease-weighted),
              border-color 0.5s var(--ease-weighted),
              backdrop-filter 0.5s var(--ease-weighted);
}
nav.home-nav.is-dark {
  background: rgba(10,12,16,0.72);
  border-bottom-color: var(--ink-line);
}
nav.home-nav.is-dark .nav-logo { color: #fff; }
nav.home-nav.is-dark .nav-link { color: var(--ink-soft); }
nav.home-nav.is-dark .nav-link:hover { color: #fff; }
nav.home-nav.is-dark .nav-link.active { color: var(--blue); }

/* slim scroll-progress hairline under the nav */
.scroll-rail {
  position: fixed;
  top: 64px; left: 0;
  height: 2px; width: 100%;
  z-index: 101;
  background: transparent;
  pointer-events: none;
}
.scroll-rail__fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--red), var(--blue));
  box-shadow: 0 0 12px var(--glow-red);
  transition: width 0.1s linear;
}

/* ───────────────────────────────────────────
   ACT I — LEAD (light editorial)
   ─────────────────────────────────────────── */
.lead {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 56px;
  padding: 132px 56px 88px;
  max-width: 1480px;
  margin: 0 auto;
}

.lead__rink {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  overflow: hidden;
}
.lead__rink line, .lead__rink circle, .lead__rink rect, .lead__rink path {
  stroke: var(--black);
}

.lead__copy { position: relative; z-index: 2; }

.lead__eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 3.5px;
  color: var(--red);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 30px;
}
.lead__eyebrow::before {
  content: ''; width: 34px; height: 1px; background: var(--red);
  transform-origin: left; transform: scaleX(0);
  animation: ruleDraw 0.9s var(--ease-expo) 0.2s forwards;
}
@keyframes ruleDraw { to { transform: scaleX(1); } }

.lead__headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(68px, 8.4vw, 132px);
  line-height: 0.86;
  letter-spacing: 1px;
  color: var(--black);
  margin-bottom: 34px;
}
.lead__headline .ln { display: block; overflow: hidden; }
.lead__headline .ln > span {
  display: block;
  transform: translateY(108%);
  animation: lineRise 1.05s var(--ease-expo) forwards;
}
.lead__headline .ln:nth-child(1) > span { animation-delay: 0.10s; }
.lead__headline .ln:nth-child(2) > span { animation-delay: 0.20s; }
.lead__headline .ln:nth-child(3) > span { animation-delay: 0.30s; }
.lead__headline .ln:nth-child(4) > span { animation-delay: 0.40s; }
@keyframes lineRise { to { transform: translateY(0); } }

.lead__headline .accent      { color: var(--red); }
.lead__headline .accent-blue { color: var(--blue); }

.lead__sub {
  font-size: 16.5px;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.78;
  max-width: 480px;
  margin-bottom: 38px;
  opacity: 0;
  animation: softIn 1s var(--ease-expo) 0.6s forwards;
}
.lead__sub strong { color: var(--black); font-weight: 500; }
@keyframes softIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.lead__ctas {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  opacity: 0;
  animation: softIn 1s var(--ease-expo) 0.74s forwards;
}

/* a bigger, more deliberate primary button for the hero */
.btn-lg { padding: 15px 30px; font-size: 12.5px; letter-spacing: 1.5px; }
.btn-primary.btn-lg { box-shadow: 0 8px 30px -10px var(--glow-red); }
.btn-primary.btn-lg:hover { box-shadow: 0 12px 36px -8px var(--glow-red); }

/* ── The dark ROI instrument inset (the bridge to the proof) ── */
.lead__panel {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  animation: panelPowerOn 1.2s var(--ease-expo) 0.5s forwards;
}
@keyframes panelPowerOn {
  to { opacity: 1; transform: none; }
}

.instrument {
  background: var(--ink);
  border: 1px solid var(--ink-line-2);
  border-top: 2px solid var(--red);
  box-shadow:
    0 40px 80px -32px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.02) inset;
  position: relative;
  overflow: hidden;
}
/* faint scanline sheen sweeping once on power-on */
.instrument::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 18%);
  pointer-events: none;
}

.instrument__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ink-line);
  background: var(--ink-2);
}
.instrument__title {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px; letter-spacing: 2px;
  color: var(--ink-soft); text-transform: uppercase;
}
.instrument__live {
  font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: 1.5px;
  color: var(--green); text-transform: uppercase;
  display: flex; align-items: center; gap: 7px;
}
.instrument__live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--glow-green);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.roi-cols, .roi-row {
  display: grid;
  grid-template-columns: 26px 1fr 38px 32px 44px 60px 64px 70px;
  align-items: center; gap: 8px;
  padding: 0 20px;
}
.roi-cols {
  padding-top: 11px; padding-bottom: 11px;
  border-bottom: 1px solid var(--ink-line);
}
.roi-cols span {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--ink-muted); text-align: right;
}
.roi-cols .l { text-align: left; }
.roi-cols .c-red   { color: var(--red); }
.roi-cols .c-blue  { color: var(--blue); }
.roi-cols .c-green { color: var(--green); }

.roi-row {
  padding-top: 11px; padding-bottom: 11px;
  border-bottom: 1px solid var(--ink-line);
  transition: background 0.18s var(--ease-weighted);
  /* per-row cascade on power-on */
  opacity: 0; transform: translateX(10px);
  animation: rowIn 0.6s var(--ease-expo) forwards;
}
.roi-row:hover { background: rgba(255,255,255,0.03); }
.roi-row:nth-child(2)  { animation-delay: 0.62s; }
.roi-row:nth-child(3)  { animation-delay: 0.68s; }
.roi-row:nth-child(4)  { animation-delay: 0.74s; }
.roi-row:nth-child(5)  { animation-delay: 0.80s; }
.roi-row:nth-child(6)  { animation-delay: 0.86s; }
.roi-row:nth-child(7)  { animation-delay: 0.92s; }
.roi-row:nth-child(8)  { animation-delay: 0.98s; }
.roi-row:nth-child(9)  { animation-delay: 1.04s; }
.roi-row:nth-child(10) { animation-delay: 1.10s; }
.roi-row:nth-child(11) { animation-delay: 1.16s; }
@keyframes rowIn { to { opacity: 1; transform: none; } }

.roi-rank {
  font-family: 'DM Mono', monospace; font-size: 10.5px;
  color: var(--ink-muted); text-align: right;
}
.roi-player { min-width: 0; }
.roi-name {
  font-size: 13.5px; font-weight: 500; color: var(--ink-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.roi-team {
  font-family: 'DM Mono', monospace; font-size: 9.5px;
  color: var(--ink-muted); letter-spacing: 0.5px; margin-top: 2px;
}
.roi-v {
  font-family: 'DM Mono', monospace; font-size: 12.5px;
  text-align: right; color: var(--ink-soft);
}
.roi-v.eng  { color: var(--blue); }
.roi-v.adj  { color: #fff; font-weight: 500; }
.roi-v.cap  { color: var(--ink-muted); font-size: 11px; }
.roi-v.rate { color: var(--ink-text); font-size: 11px; }
.roi-v.pos  { color: var(--green); font-size: 11px; text-shadow: 0 0 14px var(--glow-green); }
.roi-v.neg  { color: var(--red);   font-size: 11px; text-shadow: 0 0 14px var(--glow-red); }

.instrument__foot {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 4px 14px;
  padding: 13px 20px;
  background: var(--ink-2);
  border-top: 1px solid var(--ink-line);
}
.instrument__foot .note {
  font-family: 'DM Mono', monospace; font-size: 9.5px;
  color: var(--ink-muted); letter-spacing: 0.5px;
}
.instrument__foot .tag {
  font-family: 'DM Mono', monospace; font-size: 9.5px;
  color: var(--blue); letter-spacing: 1.5px;
}

/* ───────────────────────────────────────────
   THE INVERSION — light → dark seam
   ─────────────────────────────────────────── */
.seam {
  position: relative; z-index: 1;
  height: 140px;
  background: linear-gradient(180deg, var(--white) 0%, var(--ink) 100%);
}
.seam::before {
  /* a single hairline that scans across at the boundary */
  content: '';
  position: absolute; left: 56px; right: 56px; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red), var(--blue), transparent);
  opacity: 0.0;
  transform: scaleX(0.2);
  transition: opacity 1s var(--ease-expo), transform 1.4s var(--ease-expo);
}
.seam.lit::before { opacity: 0.9; transform: scaleX(1); }

/* ───────────────────────────────────────────
   ACT II — PROOF (dark war-room)
   ─────────────────────────────────────────── */
.proof {
  position: relative; z-index: 1;
  background: var(--ink);
  color: var(--ink-text);
  padding: 96px 56px 110px;
  overflow: hidden;
}
.proof::before {
  /* terminal grid that fades in behind the proof */
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--ink-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ink-line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(100% 70% at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(100% 70% at 50% 30%, #000 20%, transparent 75%);
  opacity: 0.6;
}
.proof__inner { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; }

.proof__label {
  font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--blue); margin-bottom: 18px;
  display: flex; align-items: center; gap: 12px;
}
.proof__label::before { content: ''; width: 30px; height: 1px; background: var(--blue); }

.proof__headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.92; letter-spacing: 1.5px; color: #fff;
  margin-bottom: 28px;
}
.proof__sub {
  font-size: 15.5px; font-weight: 300; color: var(--ink-soft);
  line-height: 1.85; max-width: 640px; margin-bottom: 64px;
}
.proof__sub strong { color: #fff; font-weight: 500; }

/* ── Empty-net flip exhibit (uses only numbers already on the page) ── */
.flip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  margin-bottom: 72px;
}
.flip__cell {
  background: var(--ink-2);
  padding: 28px 30px 30px;
  position: relative;
}
.flip__role {
  font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 6px;
}
.flip__name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px; letter-spacing: 1px; color: #fff; margin-bottom: 22px;
}
.flip__bars { display: grid; gap: 14px; }
.flip__bar { }
.flip__bar .lab {
  display: flex; justify-content: space-between;
  font-family: 'DM Mono', monospace; font-size: 11px;
  color: var(--ink-soft); margin-bottom: 6px;
}
.flip__bar .lab .n { color: var(--ink-muted); }
.flip__track {
  height: 10px; background: var(--ink-3);
  border: 1px solid var(--ink-line); position: relative; overflow: hidden;
}
/* filled by default (no-JS safe); JS empties then fills on reveal */
.flip__meter {
  position: absolute; top: 0; bottom: 0; left: 0;
  right: calc(100% - var(--w));
}
.js .flip__meter[data-fill] { right: 100%; transition: right 1.3s var(--ease-expo); }
.js .flip.in .flip__meter[data-fill] { right: calc(100% - var(--w)); }
.flip__meter.raw { background: linear-gradient(90deg, #3a4150, #5a6577); }
.flip__meter.adj { background: linear-gradient(90deg, var(--red-dim), var(--red)); box-shadow: 0 0 18px var(--glow-red); }
.flip__meter.clean { background: linear-gradient(90deg, var(--green), #16a34a); box-shadow: 0 0 18px var(--glow-green); }

.flip__verdict {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--ink-line);
  font-size: 13px; color: var(--ink-soft); line-height: 1.6;
}
.flip__verdict strong { color: #fff; font-weight: 500; }
.flip__cell.is-winner { border-top: 2px solid var(--red); }
.flip__cell.is-clean  { border-top: 2px solid var(--green); }

/* ── Four instrument panels (the process) ── */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--ink-line);
  border: 1px solid var(--ink-line);
}
.proc {
  background: var(--ink-2);
  padding: 30px 26px 32px;
  position: relative; overflow: hidden;
}
/* hidden pre-reveal only when JS is active (no-JS = visible) */
.js .proc { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-expo), transform 0.8s var(--ease-expo); }
.proof.in .proc { opacity: 1; transform: none; }
.proof.in .proc:nth-child(1) { transition-delay: 0.05s; }
.proof.in .proc:nth-child(2) { transition-delay: 0.15s; }
.proof.in .proc:nth-child(3) { transition-delay: 0.25s; }
.proof.in .proc:nth-child(4) { transition-delay: 0.35s; }
/* top accent draws in */
.proc::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform 0.9s var(--ease-expo);
}
.proof.in .proc::before { transform: scaleX(1); }
.proof.in .proc:nth-child(2)::before { transition-delay: 0.15s; }
.proof.in .proc:nth-child(3)::before { transition-delay: 0.25s; }
.proof.in .proc:nth-child(4)::before { transition-delay: 0.35s; }

.proc__no {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 2px;
  color: var(--red); margin-bottom: 14px;
}
.proc__title {
  font-family: 'Bebas Neue', sans-serif; font-size: 23px; letter-spacing: 0.5px;
  color: #fff; line-height: 1.05; margin-bottom: 14px;
}
.proc__desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.75; font-weight: 300; }
.proc__desc strong { color: #fff; font-weight: 500; }
.proc__status {
  margin-top: 18px; display: inline-block;
  font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: 1px;
  padding: 4px 10px;
  color: var(--green); border: 1px solid rgba(34,197,94,0.30);
  background: rgba(34,197,94,0.07);
}

/* ── Readout (ticker as instrument) ── */
.readout {
  margin-top: 1px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--ink-line);
  border: 1px solid var(--ink-line); border-top: none;
}
.readout__cell {
  background: var(--ink-2);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.readout__lab {
  font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ink-muted);
}
.readout__val {
  font-family: 'Bebas Neue', sans-serif; font-size: 38px; letter-spacing: 1px;
  color: #fff; line-height: 1;
}
.readout__val .u { font-size: 16px; color: var(--ink-soft); margin-left: 4px; }

/* ───────────────────────────────────────────
   DARK→LIGHT seam back
   ─────────────────────────────────────────── */
.seam-up {
  position: relative; z-index: 1; height: 120px;
  background: linear-gradient(180deg, var(--ink) 0%, var(--white) 100%);
}

/* ───────────────────────────────────────────
   ACT III — CLOSE (light)
   ─────────────────────────────────────────── */
.close {
  position: relative; z-index: 1;
  text-align: center;
  padding: 110px 56px 120px;
  overflow: hidden;
}
.close::before {
  content: 'SLASHING';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(140px, 22vw, 300px); letter-spacing: 18px;
  color: rgba(200,16,46,0.035); white-space: nowrap; pointer-events: none; z-index: 0;
}
.close__inner { position: relative; z-index: 1; }
.close__headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(46px, 6vw, 84px); letter-spacing: 2px; line-height: 0.96;
  color: var(--black); margin-bottom: 22px;
}
.close__headline .accent { color: var(--red); }
.close__sub {
  font-size: 16px; color: var(--muted); line-height: 1.7;
  max-width: 500px; margin: 0 auto 44px;
}
.close__form {
  display: flex; max-width: 480px; margin: 0 auto;
}
.close__input {
  flex: 1; background: var(--surface); border: 1px solid var(--border); border-right: none;
  color: var(--black); font-family: 'DM Mono', monospace; font-size: 13px;
  padding: 16px 20px; outline: none; transition: border-color 0.2s;
}
.close__input::placeholder { color: var(--muted); }
.close__input:focus { border-color: var(--red); }
.close__form .btn-primary { padding: 16px 26px; }

/* ───────────────────────────────────────────
   RESPONSIVE
   ─────────────────────────────────────────── */
@media (max-width: 1080px) {
  .lead { grid-template-columns: 1fr; gap: 48px; padding-top: 120px; min-height: auto; }
  .lead__panel { max-width: 640px; }
  .process, .readout, .flip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .lead, .proof, .close { padding-left: 22px; padding-right: 22px; }
  .seam::before { left: 22px; right: 22px; }
  .process, .readout, .flip { grid-template-columns: 1fr; }
  .roi-cols, .roi-row { grid-template-columns: 20px minmax(0,1fr) 26px 24px 32px 48px 60px; gap: 6px; padding-left: 14px; padding-right: 14px; }
  .roi-cols .h-rate, .roi-v.rate { display: none; }
}
@media (max-width: 400px) {
  .roi-cols, .roi-row { gap: 5px; padding-left: 12px; padding-right: 12px; }
  .roi-v, .roi-v.cap, .roi-v.rate, .roi-v.pos, .roi-v.neg { font-size: 10.5px; }
  .roi-name { font-size: 12px; }
}

/* ───────────────────────────────────────────
   REDUCED MOTION — show the final state, no theatrics
   ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lead__eyebrow::before { animation: none; transform: scaleX(1); }
  .lead__headline .ln > span,
  .lead__sub, .lead__ctas, .lead__panel,
  .roi-row, .proc {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .proc::before { transform: scaleX(1); }
  .flip .flip__meter { transition: none; }
  .scroll-rail__fill { transition: none; }
}