/* ==========================================================================
   NetrAI — Homepage Story Layer
   Adds the scroll-driven storytelling chrome (chapter rail, threads,
   sticky feature showcase, device mockups, finale) on top of the base
   "Iris" design system in style.css. Homepage only.
   ========================================================================== */

:root {
  --chapter-rail-w: 46px;
}

/* --------------------------------------------------------------------
   Scroll cue (hero)
   -------------------------------------------------------------------- */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
  color: var(--mist-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.scroll-cue .cue-track {
  width: 22px;
  height: 34px;
  border-radius: 999px;
  border: 1.5px solid var(--line-strong);
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.scroll-cue .cue-dot {
  width: 4px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent-fill);
  animation: cueScroll 1.8s ease-in-out infinite;
}
@keyframes cueScroll {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  80% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 0; transform: translateY(12px); }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue .cue-dot { animation: none; opacity: 1; } }
@media (max-width: 700px) { .scroll-cue { display: none; } }

/* --------------------------------------------------------------------
   Chapter rail — fixed vertical nav tracking scroll position
   -------------------------------------------------------------------- */
.chapter-rail {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.chapter-rail .rail-dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  cursor: pointer;
  padding: 0;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.chapter-rail .rail-dot::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: transparent;
  transition: background var(--transition), box-shadow var(--transition);
}
.chapter-rail .rail-dot:hover { border-color: var(--accent); transform: none; }
.chapter-rail .rail-dot.active {
  border-color: var(--accent);
  transform: scale(1.25);
}
.chapter-rail .rail-dot.active::before {
  background: var(--accent-fill);
  box-shadow: none;
}
.chapter-rail .rail-label {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 5px 10px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.chapter-rail .rail-dot:hover .rail-label { opacity: 1; }
@media (max-width: 960px) { .chapter-rail { display: none; } }

/* --------------------------------------------------------------------
   Shared chapter scaffolding
   -------------------------------------------------------------------- */
.chapter { position: relative; }
.chapter-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--mist-dim);
  letter-spacing: 0.1em;
}
.accent-italic { font-style: italic; font-family: var(--font-display); }

/* --------------------------------------------------------------------
   Chapter 01 — Problem
   -------------------------------------------------------------------- */
.problem-thread { max-width: 900px; margin: 0 auto 12px; opacity: 0.7; }
.thread-line { width: 100%; height: 44px; display: block; }
.thread-line path {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.28, 0.11, 0.32, 1);
}
.problem-thread.in-view .thread-line path { stroke-dashoffset: 0; }

.problem-grid .card-icon.warn {
  background: var(--accent-tint-strong);
  border: 1px solid rgba(0, 113, 227, 0.28);
}
.problem-grid .card-icon.warn svg { color: var(--accent); }
.problem-grid .reveal:nth-child(1) { transition-delay: 0s; }
.problem-grid .reveal:nth-child(2) { transition-delay: 0.12s; }
.problem-grid .reveal:nth-child(3) { transition-delay: 0.24s; }

.problem-blob {
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  filter: blur(90px);
  background: var(--ember);
  opacity: 0.13;
  top: 10%;
  left: -6%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* --------------------------------------------------------------------
   Chapter 02 — How We Work (major visual showcase)
   -------------------------------------------------------------------- */
.how-we-work .section-head { max-width: 760px; }

.timeline-showcase {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 64px;
  align-items: start;
}

/* ---- Track: steps + scroll-linked progress line ---- */
.solution-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 76px;
}

.timeline-progress-track {
  position: absolute;
  left: 37px;
  top: 34px;
  bottom: 34px;
  width: 6px;
  border-radius: 999px;
  background: var(--surface-canvas);
  overflow: hidden;
  z-index: 0;
}
.timeline-progress-fill {
  position: absolute;
  left: 0; top: 0; width: 100%;
  height: 0%;
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--iris-cyan), var(--iris-violet) 40%, var(--iris-blue) 70%, var(--iris-indigo));
  box-shadow: none;
  transition: height 0.15s linear;
}
@media (prefers-reduced-motion: reduce) { .timeline-progress-fill { transition: none; } }

.timeline-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 28px;
  align-items: start;
  padding: 30px 0 34px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.solution-timeline > .timeline-step:last-child { border-bottom: 1px solid var(--line); }

/* The node column is no longer a node. The step number is set as large quiet
   display type that resolves from Pebble to Carbon as the row arrives — the
   number is the marker, so there is no circle to fill and nothing to track
   the scrollbar with. */
.timeline-node-col {
  width: auto;
  flex-shrink: 0;
  display: block;
}
.timeline-node {
  position: static;
  width: auto; height: auto;
  border-radius: 0;
  display: block;
  background: none;
  border: none;
  box-shadow: none;
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(30px, 3.4vw, var(--text-heading));
  line-height: 1;
  letter-spacing: var(--tracking-heading);
  color: var(--surface-pebble);
  transition: color 0.6s var(--ease-apple) 0.1s;
}
.timeline-step.in-view .timeline-node {
  color: var(--ink);
  background: none;
  border: none;
}

.timeline-step-body { flex: 1; padding-top: 4px; }
.timeline-step-body .step-tag {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--mist);
  letter-spacing: 0.06em;
  line-height: var(--leading-caption);
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}
.timeline-step-body h3 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  margin-bottom: 10px;
}
.timeline-step-body p {
  color: var(--mist);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  max-width: 54ch;
}
.timeline-step-body .fixes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-body-sm);
  color: var(--mist-dim);
}
.timeline-step-body .fixes::before { content: "\2713"; color: var(--accent); }

/* ---- Sticky visual panel ---- */
.timeline-visual-wrap { position: sticky; top: 120px; height: 620px; }
.timeline-visual {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.94) translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.28, 0.11, 0.32, 1);
  box-shadow: none;
}
.timeline-visual.active { opacity: 1; transform: scale(1) translateY(0); z-index: 2; }
.timeline-visual:not(.active) { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .timeline-visual { transition: opacity 0.3s ease; transform: none !important; } }

.tv-glow {
  position: absolute;
  inset: -20%;
  z-index: 0;
  opacity: 0.55;
  filter: blur(70px);
  pointer-events: none;
  background: radial-gradient(circle at 50% 38%, var(--glow-color, var(--iris-cyan)) 0%, transparent 62%);
}
.tv-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.tv-label {
  position: relative; z-index: 1;
  margin-top: 36px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
}

/* Stage 1 — Discover: radar scan */
.tv-radar { position: relative; width: 170px; height: 170px; display: flex; align-items: center; justify-content: center; }
.tv-radar-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--iris-cyan);
  opacity: 0;
  animation: radarPulse 3s ease-out infinite;
}
.tv-radar-ring.r1 { animation-delay: 0s; }
.tv-radar-ring.r2 { animation-delay: 1s; }
.tv-radar-ring.r3 { animation-delay: 2s; }
@keyframes radarPulse {
  0% { width: 64px; height: 64px; opacity: 0.75; }
  100% { width: 170px; height: 170px; opacity: 0; }
}
.tv-radar-core {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--gradient-iris);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: none;
}
.tv-radar-core svg { width: 32px; height: 32px; }
.tv-tag-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 280px; }
.tv-tag {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--surface-canvas);
  border: 1px solid var(--line-strong);
  padding: 9px 18px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(10px);
  animation: tvTagIn 0.6s ease forwards;
  animation-delay: var(--d, 0s);
}
@keyframes tvTagIn { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .tv-radar-ring { animation: none; opacity: 0; }
  .tv-tag { animation: none; opacity: 1; transform: none; }
}

/* Stage 2 — Design: layered wireframes + cursor */
.tv-design { position: relative; width: 230px; height: 200px; }
.tv-frame {
  position: absolute;
  width: 190px;
  border-radius: var(--radius);
  background: var(--void-2);
  border: 1px solid var(--line-strong);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: none;
}
.tv-frame-back { top: 0; left: 0; opacity: 0.55; transform: none; }
.tv-frame-front { top: 40px; left: 30px; transform: none; }
.tv-frame-bar { height: 8px; border-radius: 4px; background: var(--surface-pebble); }
.tv-frame-bar.w60 { width: 60%; }
.tv-frame-bar.w40 { width: 40%; }
.tv-frame-bar.w70 { width: 70%; }
.tv-frame-block { height: 46px; border-radius: 8px; background: var(--gradient-iris-soft); }
.tv-frame-row { display: flex; gap: 8px; }
.tv-frame-card { flex: 1; height: 38px; border-radius: 8px; background: var(--surface-canvas); }
.tv-cursor {
  position: absolute;
  bottom: -8px; right: -18px;
  width: 28px; height: 28px;
  color: var(--accent);
  animation: cursorFloat 2.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px rgba(41, 151, 255, 0.5));
}
@keyframes cursorFloat {
  0%, 100% { transform: translate(0,0); }
  50% { transform: translate(-10px,-12px); }
}
@media (prefers-reduced-motion: reduce) { .tv-cursor { animation: none; } }

/* Stage 3 — Build: typing terminal */
.tv-terminal {
  width: 270px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--void-2);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
.tv-terminal-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface-canvas);
  border-bottom: 1px solid var(--line);
}
.tv-terminal-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.tv-terminal-bar span:nth-child(1) { background: #FF5F57; }
.tv-terminal-bar span:nth-child(2) { background: #FEBC2E; }
.tv-terminal-bar span:nth-child(3) { background: #28C840; }
.tv-terminal-body {
  padding: 20px 18px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tv-code-line {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: typeLine 0.5s steps(18,end) forwards;
}
.tv-code-line.l1 { animation-delay: 0.2s; }
.tv-code-line.l2 { animation-delay: 0.85s; }
.tv-code-line.l3 { animation-delay: 1.5s; }
.tv-code-line.l4 { animation-delay: 2.15s; }
.tv-code-line.l5 { animation-delay: 2.8s; }
@keyframes typeLine { to { width: var(--w, 100%); } }
.tv-dim { color: var(--mist-dim); }
.tv-accent { color: var(--accent); }
.tv-cursor-blink { color: var(--accent); animation: cursorBlink 1s step-end infinite; }
@media (prefers-reduced-motion: reduce) {
  .tv-code-line { width: var(--w, 100%); animation: none; }
}

/* Stage 4 — Launch: live browser + sparkline */
.tv-launch-browser { width: 270px; }
.tv-live-dot {
  margin-left: auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent-fill);
  box-shadow: none;
  position: relative;
}
.tv-live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent-fill);
  animation: tvPulseDot 1.8s ease-out infinite;
}
@keyframes tvPulseDot { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.8); opacity: 0; } }
.tv-sparkline { width: 100%; height: 120px; padding: 14px 8px; }
.tv-sparkline path {
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
}
.timeline-visual.active .tv-sparkline path { animation: drawSpark 1.6s 0.3s cubic-bezier(0.28, 0.11, 0.32, 1) forwards; }
@keyframes drawSpark { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tv-live-dot::after { animation: none; display: none; }
  .tv-sparkline path { stroke-dashoffset: 0; }
  .timeline-visual.active .tv-sparkline path { animation: none; }
}

@media (max-width: 1100px) {
  .timeline-visual-wrap { height: 520px; }
}
@media (max-width: 900px) {
  .timeline-showcase { grid-template-columns: 1fr; gap: 40px; }
  .timeline-visual-wrap { position: relative; top: 0; height: 420px; }
  .solution-timeline { gap: 0; }
  .timeline-node-col { width: auto; }
  .timeline-step { grid-template-columns: 64px 1fr; gap: 22px; }
}


/* --------------------------------------------------------------------
   Chapter 04 — Demo / device mockups
   -------------------------------------------------------------------- */
.demo-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  min-height: 520px;
  padding-top: 20px;
}
.mockup {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.28, 0.11, 0.32, 1), transform 0.9s cubic-bezier(0.28, 0.11, 0.32, 1);
  will-change: transform;
}
.mockup-browser {
  width: min(560px, 62vw);
  transform: translateY(24px);
  z-index: 1;
}
.mockup-browser.in-view { opacity: 1; transform: none; }
.mockup-phone {
  width: min(190px, 30vw);
  margin-left: -60px;
  margin-bottom: -18px;
  transform: translateY(24px);
  z-index: 2;
}
.mockup-phone.in-view { opacity: 1; transform: none; transition-delay: 0.12s; }

.browser-chrome {
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom: none;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.browser-chrome .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.browser-chrome .url {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--mist-dim);
  background: var(--surface);
  border-radius: 6px;
  padding: 4px 10px;
  flex: 1;
}
.browser-screen {
  background: var(--void-2);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  aspect-ratio: 16/10;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.browser-screen .bs-bar { height: 12px; border-radius: 6px; background: var(--surface-canvas); }
.browser-screen .bs-bar.w60 { width: 60%; }
.browser-screen .bs-bar.w40 { width: 40%; }
.browser-screen .bs-row { display: flex; gap: 12px; margin-top: auto; }
.browser-screen .bs-card { flex: 1; height: 90px; border-radius: var(--radius); background: var(--gradient-iris-soft); opacity: 0.8; }

.phone-shell {
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: none;
}
.phone-screen {
  background: var(--void-2);
  border-radius: var(--radius);
  aspect-ratio: 9/18.5;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.phone-screen .ps-bar { height: 9px; border-radius: 5px; background: var(--surface-canvas); }
.phone-screen .ps-bar.w70 { width: 70%; }
.phone-screen .ps-tile { height: 54px; border-radius: var(--radius); background: var(--gradient-iris-soft); margin-top: 6px; }

.demo-caption {
  text-align: center;
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--mist-dim);
  font-style: italic;
}

/* --------------------------------------------------------------------
   Chapter 05 — Social proof counters
   -------------------------------------------------------------------- */
.stat-card .stat-num.counting::after { content: ""; }

/* --------------------------------------------------------------------
   Chapter 06 — Finale
   -------------------------------------------------------------------- */
.finale {
  position: relative;
  overflow: hidden;
  padding: clamp(140px, 16vw, 210px) 0 clamp(150px, 17vw, 220px);
  text-align: center;
}

/* The page closes on a warm horizon rather than fading out on black — the
   same single-light-source treatment the hero opens with, mirrored. */
.finale::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 88% at 18% 118%, rgba(0, 113, 227, 0.34), transparent 64%),
    radial-gradient(56% 84% at 82% 116%, rgba(0, 113, 227, 0.28), transparent 66%),
    radial-gradient(40% 60% at 50% 128%, var(--fill-hover), transparent 62%);
  filter: blur(40px);
}
.finale-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.finale-aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.18;
  animation: floatBlob 20s ease-in-out infinite;
}
.finale-aurora .f1 { width: 420px; height: 420px; background: var(--iris-violet); top: -10%; left: 10%; }
.finale-aurora .f2 { width: 360px; height: 360px; background: var(--iris-blue); bottom: -15%; right: 8%; animation-delay: -6s; }
.finale-aurora .f3 { width: 300px; height: 300px; background: var(--iris-cyan); top: 30%; right: 30%; animation-delay: -12s; }

.finale > .container { position: relative; z-index: 1; }
.finale .chapter-num { display: block; margin-bottom: 18px; }
.finale h2 { max-width: 16ch; margin: 0 auto 20px; }
.finale p.lead { margin: 0 auto 40px; text-align: center; }
.finale .hero-actions { justify-content: center; margin-bottom: 0; }
.finale-tag {
  margin-top: 56px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--mist-dim);
  letter-spacing: 0.04em;
}

@media (max-width: 700px) {
  .finale { padding: 100px 0 110px; }
}

/* ==========================================================================
   Unified premium glass finish — matches the nav "Get Started" button.
   ========================================================================== */
.timeline-visual {
  border-top-color: var(--glass-border-top);
  border-left-color: var(--glass-border-left);
}