/* Vextra AI — chapters: cinematic pinned horizontal gallery (#modules).
   Markup: section.chapters > .chapters-viewport > .chapters-track > 3× article.chapter
   Desktop: js/gallery.js pins the viewport and scrubs the track horizontally.
   Mobile <900px / reduced motion: chapters stack vertically, no pin.
   Nothing here hides content — JS applies entrance states only when it will animate. */

.chapters { position: relative; }

.chapters-viewport {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.chapters-track {
  display: flex;
  width: 300%;
  height: 100%;
  will-change: transform;
}

.chapter {
  /* ponytail: calc(100%/3) not 100vw — 100vw includes the scrollbar gutter and
     would drift the xPercent math ~17px per panel on Windows */
  flex: 0 0 calc(100% / 3);
  height: 100%;
  position: relative;
  overflow: hidden; /* parallax art must not bleed into neighbor panels */
  display: grid;
  align-items: center;
  justify-items: start;
  padding-inline: clamp(28px, 9vw, 150px) clamp(20px, 5vw, 64px);
}

/* layering: numeral (0) < art (1) < copy (2) */
.chapter-num {
  position: absolute;
  z-index: 0;
  left: 24vw;
  top: 50%;
  translate: 0 -50%; /* CSS translate stays independent of GSAP's transform x */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26vw;
  line-height: 1;
  letter-spacing: -0.04em;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px currentColor;
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.chapter-art {
  position: absolute;
  z-index: 1;
  right: clamp(10px, 4vw, 80px);
  top: 50%;
  transform: translateY(-50%) rotate(-1deg);
  width: min(44vw, 440px);
  height: 290px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  will-change: transform;
  pointer-events: auto; /* enable interaction */
}

/* Chapter Art Mockups styling */
.chapter-art-mockup {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  box-shadow: var(--shadow-lg), 0 1px 3px rgba(0,0,0,0.02);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.chapter-art:hover .chapter-art-mockup {
  transform: translateY(-4px) rotate(0deg) scale(1.02);
}

.mockup-header {
  height: 40px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding-inline: 16px;
  gap: 12px;
}

.mockup-dots {
  display: flex;
  gap: 6px;
}
.mockup-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.mockup-dots span:nth-child(1) { background: oklch(65% 0.15 30); }
.mockup-dots span:nth-child(2) { background: oklch(75% 0.15 80); }
.mockup-dots span:nth-child(3) { background: oklch(62% 0.15 140); }

.mockup-title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
}

.mockup-body {
  flex: 1;
  padding: 24px;
  background: var(--surface);
  position: relative;
}

/* Timeline details */
.m-timeline {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  justify-content: center;
}

.m-step {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.m-step::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 24px;
  height: 18px;
  width: 1.5px;
  background: var(--border);
}
.m-step:last-child::before { display: none; }

.m-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  z-index: 2;
}

.m-step.done .m-dot {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal-deep);
}
.m-step.done::before {
  background: var(--teal);
}

.m-step.active .m-dot {
  background: var(--orange-deep);
  border-color: var(--orange-deep);
  color: white;
  box-shadow: 0 0 10px oklch(70% 0.16 48 / 0.3);
}

.m-label {
  font-size: 13px;
  font-weight: 550;
  color: var(--fg);
}
.m-badge {
  font-size: 9px;
  font-family: var(--font-mono);
  background: var(--orange-soft);
  color: var(--orange-deep);
  padding: 2px 6px;
  border-radius: 99px;
  margin-left: 6px;
  font-weight: 700;
}

/* AI dashboard mockup styling */
.m-ai-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  justify-content: center;
}

.m-ai-pulse {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.m-ai-waves {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 18px;
}
.m-ai-waves span {
  width: 2px;
  height: 100%;
  background: var(--teal);
  border-radius: 1px;
  animation: barScale 1s ease-in-out infinite alternate;
}
.m-ai-waves span:nth-child(2) { animation-delay: 0.15s; }
.m-ai-waves span:nth-child(3) { animation-delay: 0.3s; }
.m-ai-waves span:nth-child(4) { animation-delay: 0.45s; }
.m-ai-waves span:nth-child(5) { animation-delay: 0.6s; }

@keyframes barScale {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1.2); }
}

.m-ai-feedback {
  font-size: 12px;
  font-weight: 550;
  color: var(--fg);
  text-align: right;
  flex: 1;
}

.m-ai-scores {
  display: flex;
  gap: 24px;
  justify-content: center;
}

.m-ai-gauge {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.m-ai-gauge strong {
  position: absolute;
  left: 14px;
  font-size: 11px;
  font-weight: 750;
  color: var(--fg);
}
.m-ai-gauge span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.progress-ring-bar {
  transform: rotate(-90deg);
  transform-origin: 30px 30px;
  stroke-linecap: round;
}

/* Custom Software Blueprint Mockup */
.m-blueprint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: 10px;
}

.bp-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 80px;
  text-align: center;
}

.bp-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.bp-node:hover .bp-icon {
  border-color: var(--orange);
  box-shadow: 0 0 12px var(--orange-soft);
}

.bp-node span {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
}

.bp-line {
  flex: 1;
  height: 2px;
  background: var(--border-strong);
  position: relative;
}

.bp-pulse {
  position: absolute;
  top: -2px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulseFlow 2s linear infinite;
}

@keyframes pulseFlow {
  0% { left: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.chapter-inner {
  position: relative;
  z-index: 2;
  max-width: 560px;
}
.chapter-title {
  font-size: clamp(44px, 5.6vw, 84px);
  line-height: 0.98;
  margin-top: 18px;
}
.chapter-inner > p {
  color: var(--muted);
  font-size: clamp(15px, 1.3vw, 17px);
  max-width: 44ch;
  margin: 18px 0 0;
}
/* .module-tags / .module-link inherit from style.css */

/* per-chapter layered premium washes — base tone + white lift + deep anchor */
.ch-erp {
  background:
    radial-gradient(ellipse 55% 60% at 22% 18%, oklch(100% 0 0 / 0.55), transparent 65%),
    radial-gradient(ellipse 45% 50% at 85% 88%, oklch(38% 0.085 196 / 0.07), transparent 65%),
    var(--teal-soft);
}
.ch-erp .chapter-art,
.ch-erp .chapter-num { color: var(--teal-deep); }

/* AI chapter: dark mode — distinct from the light teal/orange chapters either side */
.ch-ai {
  background:
    radial-gradient(ellipse 55% 60% at 78% 15%, oklch(45% 0.09 196 / 0.4), transparent 65%),
    radial-gradient(ellipse 45% 50% at 15% 92%, oklch(45% 0.15 48 / 0.16), transparent 65%),
    linear-gradient(160deg, oklch(16% 0.024 196) 0%, oklch(11% 0.02 196) 100%);
}
.ch-ai .chapter-art,
.ch-ai .chapter-num { color: var(--teal-soft); }
.ch-ai .chapter-title { color: oklch(97% 0.006 196); }
.ch-ai .chapter-inner > p { color: oklch(72% 0.015 196); }
.chapters .ch-ai .module-tags span { background: oklch(100% 0 0 / 0.08); border-color: oklch(100% 0 0 / 0.14); color: oklch(85% 0.01 196); box-shadow: none; }
.ch-ai .module-link { color: oklch(97% 0.006 196); }
.ch-ai .chapter-art-mockup { background: oklch(13% 0.022 196); border-color: oklch(28% 0.02 196); }
.ch-ai .mockup-header { background: oklch(17% 0.024 196); border-bottom-color: oklch(28% 0.02 196); }
.ch-ai .mockup-title { color: oklch(62% 0.02 196); }
.ch-ai .mockup-body { background: oklch(13% 0.022 196); }
.ch-ai .m-ai-pulse { background: oklch(17% 0.024 196); border-color: oklch(28% 0.02 196); }
.ch-ai .m-ai-feedback, .ch-ai .m-ai-gauge strong { color: oklch(94% 0.008 196); }
.ch-ai .m-ai-gauge span { color: oklch(62% 0.02 196); }
.ch-ai .progress-ring-bg { stroke: oklch(100% 0 0 / 0.1); }

.ch-custom {
  background:
    radial-gradient(ellipse 55% 60% at 20% 82%, oklch(100% 0 0 / 0.5), transparent 65%),
    radial-gradient(ellipse 45% 50% at 88% 15%, oklch(56% 0.17 40 / 0.08), transparent 65%),
    var(--orange-soft);
}
.ch-custom .chapter-art,
.ch-custom .chapter-num { color: var(--orange-deep); }

/* numerals read embossed, art gets brand-tinted depth */
.chapter-num { text-shadow: 0 2px 24px oklch(40% 0.08 196 / 0.12); }
.chapter-art svg { filter: drop-shadow(0 8px 24px oklch(40% 0.08 196 / 0.18)); }

/* soft blend edge where panels meet during the slide */
.chapter::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 7vw;
  pointer-events: none;
  background: linear-gradient(90deg, oklch(100% 0 0 / 0.28), transparent);
}

/* tags float on the washes */
.chapter .module-tags span {
  background: oklch(100% 0 0 / 0.9);
  box-shadow: 0 3px 10px -3px oklch(40% 0.06 196 / 0.18);
}

/* progress bar — bottom-center of the pinned viewport */
.chapters-progress {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: clamp(22px, 4vh, 40px);
  translate: -50% 0;
  width: min(320px, 34vw);
  height: 3px;
  border-radius: 999px;
  background: oklch(40% 0.02 196 / 0.16);
  overflow: hidden;
}
.chapters-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--orange));
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* ---------- stacked fallback: small screens or reduced motion ---------- */
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .chapters-viewport { height: auto; overflow: visible; }
  .chapters-track { display: block; width: auto; height: auto; }
  .chapter {
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    align-items: flex-start !important;
    padding: clamp(64px, 14vw, 110px) clamp(20px, 5vw, 64px) !important;
  }
  .chapter-inner {
    max-width: 100% !important;
    transform: none !important;
  }
  .chapter-num {
    font-size: 120px !important;
    left: auto !important;
    right: 10px !important;
    top: 12px !important;
    translate: none !important;
    transform: none !important;
  }
  .chapter-art {
    position: relative !important;
    width: 100% !important;
    max-width: 380px !important;
    height: 220px !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important; /* Clear desktop translate/rotate transform! */
    translate: none !important;
    margin-top: 0 !important; /* Let flex gap handle spacing */
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .mockup-body {
    padding: 16px;
  }
  .m-timeline, .m-ai-dashboard, .m-blueprint {
    scale: 0.9;
    transform-origin: center;
  }
  .chapter-title { font-size: clamp(34px, 9vw, 48px); }
  .chapters-progress { display: none; }
}