/* LeadsForYou journey: three scrubbed agent stages + the board fill +
   the dashboard finale. Companion to styles.css (obsidian tokens live there).
   Engineering per skills/10k-websites scrub-pipeline, adapted multi-stage. */

/* ---------- hero (solo, centered; the console card retired) ---------- */
/* The hero's own bottom fades to pure obsidian BEFORE the first stage, so
   the fixed ambient glow pools die smoothly instead of being sliced by the
   stage's opaque edge (the dissect line Nash caught on a tall viewport). */
/* The hero owns the first screen: nothing of the journey shows until the
   visitor scrolls, so the orb is the reward for the first flick. */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px 0 96px;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 11vh;
  z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(9, 13, 22, 0), var(--base) 92%);
}
.hero > .hero-down {
  position: absolute; left: 0; right: 0; bottom: 26px; margin: 0; z-index: 1;
  text-align: center;
}
.hero > .wrap { position: relative; z-index: 1; }
.hero-solo { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-solo .hero-copy { align-items: center; max-width: 860px; }
.hero-solo .hero-sub { margin-left: auto; margin-right: auto; }
.hero-solo .hero-ctas { justify-content: center; }
.hero-solo .hero-badges { justify-content: center; }
.hero-down {
  margin-top: 34px; color: var(--ink-3);
  font: 600 11px/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.hero-down i {
  display: block; width: 1px; height: 44px; margin: 10px auto 0;
  background: linear-gradient(to bottom, var(--orange), transparent);
  animation: dropline 2.2s ease-in-out infinite;
}
@keyframes dropline { 0%, 100% { transform: scaleY(0.4); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------- journey stages ---------- */
.jstage, #boardfill { padding: 0; } /* styles.css sections carry 64px pads; stages must abut */
.jstage { position: relative; height: 260vh; }
.jstick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.jposter, .jstage video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background-size: cover; background-position: center;
}
.jstage video { opacity: 0; transition: opacity 0.5s ease; will-change: transform; transform: translateZ(0); }
.jstage.video-ready video { opacity: 1; }
.jscrim {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, rgba(9, 13, 22, 0) 35%, rgba(9, 13, 22, 0.62) 100%);
}
/* One environment: every stage melts into the page's obsidian at its edges,
   so chapters pass through darkness instead of cutting against each other. */
.jstick::before, .jstick::after {
  content: ""; position: absolute; left: 0; right: 0; height: 9vh;
  z-index: 2; pointer-events: none;
}
.jstick::before { top: 0; background: linear-gradient(to bottom, var(--base), rgba(9, 13, 22, 0)); }
.jstick::after { bottom: 0; background: linear-gradient(to top, var(--base), rgba(9, 13, 22, 0)); }
.jband { z-index: 3; }
.jband {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; gap: 12px; padding: 0 8vw;
  opacity: 0; pointer-events: none;
  text-shadow: 0 1px 2px rgba(5, 5, 10, 0.95), 0 3px 12px rgba(5, 5, 10, 0.78), 0 10px 44px rgba(5, 5, 10, 0.8);
}
.jband::before {
  content: ""; position: absolute; inset: -4%; pointer-events: none; z-index: -1;
  opacity: calc(0.25 + 0.75 * var(--k, 1));
  background: radial-gradient(ellipse 64% 52% at 30% 50%, rgba(5, 5, 10, 0.68) 0%, rgba(5, 5, 10, 0.45) 46%, rgba(5, 5, 10, 0) 76%);
}
.jband .jk {
  font: 700 12px/1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  transform: translateY(calc((1 - var(--k, 1)) * -18px));
}
.jband .jh {
  max-width: 13em;
  font: 700 clamp(30px, 4vw, 52px)/1.15 var(--sans); letter-spacing: -0.02em; color: var(--ink);
  opacity: var(--k, 1);
  transform: translateY(calc((1 - var(--k, 1)) * 26px));
}
.jband .js { max-width: 30em; color: var(--ink-2); font-size: 16px;
  opacity: calc(var(--k, 1) * var(--k, 1));
  transform: translateY(calc((1 - var(--k, 1)) * 34px));
}
.jstage[data-agent="crawl"] .jk { color: var(--cyan); }
.jstage[data-agent="research"] .jk { color: var(--orange); }
.jstage[data-agent="enrich"] .jk { color: var(--green); }

/* ---------- the board fill ---------- */
#boardfill { position: relative; height: 300vh; }
#boardfill .jstick { display: grid; place-items: center; background: var(--base); }
.bf-wrap { width: min(920px, 92vw); }
.bf-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.bf-head h2 { font: 700 clamp(26px, 3vw, 40px)/1.2 var(--sans); letter-spacing: -0.02em; }
.bf-count {
  font: 600 12px/1.6 var(--mono); letter-spacing: 0.1em; color: var(--green); text-transform: uppercase;
}
.bf-count b { font-size: 18px; }
.bcard {
  border-radius: 18px; overflow: hidden;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 28px 56px -16px rgba(0, 0, 0, 0.65);
}
.bcard .btop {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid var(--line-soft);
  font: 600 10.5px/1.5 var(--mono); letter-spacing: 0.12em; color: var(--ink-3); text-transform: uppercase;
}
.bcard .btop .live { color: var(--green); display: inline-flex; align-items: center; gap: 6px; }
.bcard .bhead, .brow {
  display: grid; grid-template-columns: 2.2fr 2.6fr 1fr; gap: 14px;
  padding: 13px 18px; align-items: baseline;
}
.bcard .bhead {
  font: 600 10px/1.5 var(--mono); letter-spacing: 0.12em; color: var(--ink-3); text-transform: uppercase;
  border-bottom: 1px solid var(--line-soft); background: rgba(10, 14, 23, 0.6);
}
.brow { border-bottom: 1px solid var(--line-soft); opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.45s ease; }
.brow:last-child { border-bottom: none; }
.brow.on { opacity: 1; transform: none; }
.brow .bco { font: 650 14.5px/1.35 var(--sans); color: var(--ink); }
.brow .bco span { display: block; font: 400 11.5px/1.5 var(--mono); color: var(--ink-3); margin-top: 2px; }
.brow .bsig { font: 400 13px/1.5 var(--body); color: var(--ink-2); }
.brow .bst {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(78, 222, 163, 0.1); color: var(--green);
  border: 1px solid rgba(78, 222, 163, 0.25);
  font: 600 10px/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- dashboard finale ---------- */
#dash { padding: 96px 0; }
.dash-head { text-align: center; margin-bottom: 36px; }
.dash-head h2 { font: 700 clamp(30px, 3.6vw, 48px)/1.15 var(--sans); letter-spacing: -0.02em; }
.dash-head p { margin-top: 10px; color: var(--ink-2); }
.dash-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 18px; align-items: start; }
.dpanel {
  border-radius: 18px; overflow: hidden;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.dstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.dstat {
  border-radius: 14px; padding: 14px 16px;
  background: rgba(15, 23, 42, 0.8); border: 1px solid var(--line);
}
.dstat .lab { font: 600 9.5px/1.5 var(--mono); letter-spacing: 0.12em; color: var(--ink-3); text-transform: uppercase; }
.dstat b { display: block; font: 650 24px/1.2 var(--mono); color: var(--ink); margin-top: 4px; }
.dstat.hot { border-color: rgba(249, 115, 22, 0.35); }
.dstat.hot b { color: var(--orange-hi); }
.ddos { padding: 18px; display: grid; gap: 13px; }
.ddos .sec { font: 700 10px/1.5 var(--mono); letter-spacing: 0.12em; color: var(--ink-3); text-transform: uppercase; }
.ddos .wline {
  border-radius: 10px; padding: 11px 13px;
  background: rgba(78, 222, 163, 0.07); border: 1px solid rgba(78, 222, 163, 0.22);
  font-size: 13px; color: var(--ink-2);
}
.ddos .wline b { color: var(--green); font-weight: 650; }
.ddos .openwith { font-size: 13px; color: var(--ink-2); }
.ddos .openwith b { color: var(--ink); }
.ddos .rung {
  border-left: 2px solid rgba(76, 215, 246, 0.4); padding: 2px 0 2px 12px;
  font-size: 12.5px; color: var(--ink-2);
}
.ddos .rung b { color: var(--ink); font-weight: 600; }
.ddos .rung .mono { color: var(--ink-3); font-size: 11px; }
.dash-cta { text-align: center; margin-top: 36px; }
.dsample {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(38, 42, 52, 0.6); color: var(--amber);
  font: 600 10.5px/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
}

/* entrances */
.enter .part { opacity: 0; transform: translateY(18px); }
.enter.in .part { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s ease; }
.enter.in .part:nth-child(2) { transition-delay: 0.08s; }
.enter.in .part:nth-child(3) { transition-delay: 0.16s; }
.enter.in .part:nth-child(4) { transition-delay: 0.24s; }
.enter.in .part:nth-child(n) { }

/* ---------- static-hero gates (must mirror journey.js GATES exactly) ---------- */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce) {
  .jstage { height: auto; }
  .jstick { position: relative; height: 72vh; min-height: 480px; }
  .jstage video { display: none; }
  .jband { opacity: 1 !important; }
  .jband .jh, .jband .js, .jband .jk { transform: none; opacity: 1; }
  #boardfill { height: auto; }
  #boardfill .jstick { position: relative; height: auto; min-height: 0; padding: 64px 0; }
  .brow { opacity: 1; transform: none; }
  .hero-down i { animation: none; }
}
@media (max-width: 860px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dstats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-height: 560px) {
  .hero-down { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .brow, .enter .part, .jstage video { transition: none; }
  .enter .part { opacity: 1; transform: none; }
}

/* short screens: let the hero shrink rather than push its own copy off */
@media (max-height: 620px) {
  .hero { min-height: auto; padding: 92px 0 56px; }
  .hero > .hero-down { position: static; margin-top: 26px; }
}

/* ---------- industry tag on the mixed fill ---------- */
.brow .bco .btag {
  display: inline-block; margin-right: 8px; vertical-align: 1px;
  padding: 2px 7px; border-radius: 5px;
  background: rgba(76, 215, 246, 0.1); color: var(--cyan);
  border: 1px solid rgba(76, 215, 246, 0.22);
  font: 600 9px/1.5 var(--mono); letter-spacing: 0.1em;
}

/* ---------- vertical switcher on the finale ---------- */
.dtabs {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-bottom: 14px;
}
.dtab {
  border: 1px solid var(--line); background: rgba(15, 23, 42, 0.7);
  color: var(--ink-2); border-radius: 999px;
  padding: 10px 18px; min-height: 44px; cursor: pointer;
  font: 600 13px/1.3 var(--body);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.dtab:hover { color: var(--ink); border-color: rgba(249, 115, 22, 0.4); }
.dtab.on {
  border-color: var(--orange); color: var(--base);
  background: var(--orange); font-weight: 700;
}
.d-seller {
  text-align: center; margin: 0 0 22px;
  font: 600 11px/1.6 var(--mono); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
.brow .bst.s-contacted {
  background: rgba(76, 215, 246, 0.1); color: var(--cyan); border-color: rgba(76, 215, 246, 0.25);
}
.brow .bst.s-meeting {
  background: rgba(245, 158, 11, 0.1); color: var(--amber); border-color: rgba(245, 158, 11, 0.25);
}
@media (max-width: 700px) {
  .dtab { padding: 10px 14px; font-size: 12.5px; }
}