/* ═══ MAYKAGRUP Motion Chapters V2 — cinematic scroll timelines ═══ */

:root {
  --mg-chapter-p: 0;
  --mg-tech-phase-p: 0;
  --mg-hero-chapter-p: 0;
}

[data-mg-scene] {
  --mg-chapter-p: var(--mg-scene-p, 0);
}

/* ─── Chapter pin wrappers ─── */
.mg-chapter-pin {
  position: relative;
}

.mg-chapter-pin--consulting {
  min-height: 100vh;
}

/* ─── Chapter viz container ─── */
.mg-chapter-viz {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.mg-chapter-viz__label {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%) translateY(calc((1 - var(--mg-chapter-p, 0)) * 24px));
  font-size: clamp(0.55rem, 1.2vw, 0.72rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 230, 168, 0.85);
  opacity: calc(max(0, (var(--mg-chapter-p, 0) - 0.68) * 3.2));
  white-space: nowrap;
}

.mg-chapter-viz__label--gtos {
  color: rgba(126, 200, 255, 0.9);
}

.mg-chapter-viz__label--agents {
  color: rgba(212, 181, 255, 0.9);
}

.mg-chapter-viz__label--materials {
  color: rgba(143, 223, 168, 0.9);
}

/* Hero chapter stages */
.mg-chapter-viz--hero .mg-chapter-viz__stage {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: none;
}

.mg-chapter-viz--hero .mg-chapter-viz__stage--port {
  opacity: calc(1 - min(1, var(--mg-hero-chapter-p, 0) * 2.5));
}

.mg-chapter-viz--hero .mg-chapter-viz__stage--routes {
  opacity: calc(clamp(0, (var(--mg-hero-chapter-p, 0) - 0.15) * 2.2, 1) * (1 - clamp(0, (var(--mg-hero-chapter-p, 0) - 0.65) * 2.5, 1)));
  background: radial-gradient(circle at 50% 55%, rgba(232, 197, 71, 0.08), transparent 62%);
}

.mg-chapter-viz--hero .mg-chapter-viz__stage--network {
  opacity: calc(clamp(0, (var(--mg-hero-chapter-p, 0) - 0.4) * 2.2, 1) * (1 - clamp(0, (var(--mg-hero-chapter-p, 0) - 0.85) * 4, 1)));
  background:
    radial-gradient(circle at 30% 40%, rgba(52, 152, 219, 0.12), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(232, 197, 71, 0.1), transparent 40%);
}

.mg-chapter-viz--hero .mg-chapter-viz__stage--data {
  opacity: calc(clamp(0, (var(--mg-hero-chapter-p, 0) - 0.72) * 3.5, 0.85));
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 18px,
    rgba(52, 152, 219, 0.04) 18px,
    rgba(52, 152, 219, 0.04) 19px
  );
}

/* Consulting map nodes */
.mg-chapter-viz--consulting .mg-chapter-viz__map-node {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(232, 197, 71, 0.55);
  box-shadow: 0 0 12px rgba(232, 197, 71, 0.35);
  transform: translate(-50%, -50%) scale(calc(0.2 + var(--node-p, 0) * 1));
  opacity: var(--node-p, 0);
}

.mg-chapter-viz--consulting .mg-chapter-viz__map-node:nth-child(1) { left: 22%; top: 42%; --node-p: clamp(0, (var(--mg-chapter-p, 0) - 0.05) * 4, 1); }
.mg-chapter-viz--consulting .mg-chapter-viz__map-node:nth-child(2) { left: 38%; top: 28%; --node-p: clamp(0, (var(--mg-chapter-p, 0) - 0.18) * 4, 1); }
.mg-chapter-viz--consulting .mg-chapter-viz__map-node:nth-child(3) { left: 55%; top: 48%; --node-p: clamp(0, (var(--mg-chapter-p, 0) - 0.32) * 4, 1); }
.mg-chapter-viz--consulting .mg-chapter-viz__map-node:nth-child(4) { left: 72%; top: 35%; --node-p: clamp(0, (var(--mg-chapter-p, 0) - 0.45) * 4, 1); }
.mg-chapter-viz--consulting .mg-chapter-viz__map-node:nth-child(5) { left: 48%; top: 62%; --node-p: clamp(0, (var(--mg-chapter-p, 0) - 0.58) * 4, 1); }

.mg-chapter-viz--consulting .mg-chapter-viz__map-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: calc(clamp(0, (var(--mg-chapter-p, 0) - 0.35) * 2.5, 0.75));
}

.mg-chapter-viz--consulting .mg-chapter-viz__map-lines path {
  fill: none;
  stroke: rgba(232, 197, 71, 0.35);
  stroke-width: 1;
  stroke-dasharray: 120;
  stroke-dashoffset: calc(120 - var(--mg-chapter-p, 0) * 120);
}

/* Materials / HammaddeMatch flow */
.mg-chapter-viz--materials {
  top: 8%;
  height: 55%;
}

.mg-chapter-viz__flow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: min(14rem, 42vw);
}

.mg-chapter-viz__flow-node {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(143, 223, 168, 0.35);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(143, 223, 168, 0.85);
  opacity: calc(clamp(0, (var(--mg-chapter-p, 0) - var(--step-delay, 0)) * 3.5, 1));
  transform: translateY(calc((1 - clamp(0, (var(--mg-chapter-p, 0) - var(--step-delay, 0)) * 3.5, 1)) * 16px));
  background: rgba(7, 9, 13, 0.45);
}

.mg-chapter-viz__flow-node[data-step="0"] { --step-delay: 0; }
.mg-chapter-viz__flow-node[data-step="1"] { --step-delay: 0.12; }
.mg-chapter-viz__flow-node[data-step="2"] { --step-delay: 0.24; }
.mg-chapter-viz__flow-node[data-step="3"] { --step-delay: 0.36; }
.mg-chapter-viz__flow-node[data-step="4"] { --step-delay: 0.48; }

.mg-chapter-viz__flow-connector {
  width: 1px;
  height: 0.65rem;
  background: linear-gradient(180deg, rgba(143, 223, 168, 0.5), transparent);
  opacity: calc(clamp(0, (var(--mg-chapter-p, 0) - 0.08) * 2.5, 0.8));
}

/* GTOS data pipeline */
.mg-chapter-viz--gtos .mg-chapter-viz__pipeline {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 28rem;
}

.mg-chapter-viz__pipe-step {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.5rem;
  border: 1px solid rgba(126, 200, 255, 0.25);
  border-radius: 0.25rem;
  color: rgba(126, 200, 255, 0.75);
  opacity: calc(clamp(0, (var(--mg-chapter-p, 0) - var(--pipe-delay, 0)) * 3, 1));
  transform: scale(calc(0.85 + clamp(0, (var(--mg-chapter-p, 0) - var(--pipe-delay, 0)) * 3, 1) * 0.15));
}

.mg-chapter-viz__pipe-step[data-pipe="0"] { --pipe-delay: 0; }
.mg-chapter-viz__pipe-step[data-pipe="1"] { --pipe-delay: 0.15; }
.mg-chapter-viz__pipe-step[data-pipe="2"] { --pipe-delay: 0.3; }
.mg-chapter-viz__pipe-step[data-pipe="3"] { --pipe-delay: 0.45; }
.mg-chapter-viz__pipe-step[data-pipe="4"] { --pipe-delay: 0.6; }

.mg-chapter-viz--gtos .mg-chapter-viz__grid {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 32px, rgba(52, 152, 219, 0.03) 32px, rgba(52, 152, 219, 0.03) 33px),
    repeating-linear-gradient(90deg, transparent, transparent 32px, rgba(52, 152, 219, 0.03) 32px, rgba(52, 152, 219, 0.03) 33px);
  opacity: calc(0.1 + var(--mg-chapter-p, 0) * 0.55);
  transform: scale(calc(1 + var(--mg-chapter-p, 0) * 0.12));
}

/* MAYKOPS agent orchestration */
.mg-chapter-viz--agents {
  opacity: calc(clamp(0, (var(--mg-tech-phase-p, 0)), 1));
  transition: opacity 0.15s linear;
}

[data-mg-tech-phase="gtos"] .mg-chapter-viz--agents {
  opacity: 0;
  pointer-events: none;
}

[data-mg-tech-phase="agents"] .mg-chapter-viz--gtos-phase {
  opacity: calc(1 - var(--mg-tech-phase-p, 0));
}

.mg-chapter-viz--agents .mg-chapter-viz__orchestrator {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  width: min(20rem, 50vw);
  height: min(16rem, 40vw);
}

.mg-chapter-viz__agent-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(calc(0.4 + var(--mg-tech-phase-p, 0) * 0.6));
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(212, 181, 255, 0.45);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(212, 181, 255, 0.9);
  background: rgba(7, 9, 13, 0.55);
  opacity: calc(clamp(0, var(--mg-tech-phase-p, 0) * 2, 1));
}

.mg-chapter-viz__agent-node {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(212, 181, 255, 0.65);
  box-shadow: 0 0 10px rgba(155, 89, 182, 0.35);
  opacity: calc(clamp(0, (var(--mg-tech-phase-p, 0) - 0.15) * 2.5, 1));
  transform: translate(-50%, -50%) scale(calc(0.3 + var(--mg-tech-phase-p, 0) * 0.7));
}

.mg-chapter-viz__agent-node--n { left: 50%; top: 8%; }
.mg-chapter-viz__agent-node--e { left: 88%; top: 50%; }
.mg-chapter-viz__agent-node--s { left: 50%; top: 92%; }
.mg-chapter-viz__agent-node--w { left: 12%; top: 50%; }

.mg-chapter-viz__agent-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: calc(18% + var(--mg-tech-phase-p, 0) * 28%);
  background: linear-gradient(180deg, rgba(212, 181, 255, 0.45), transparent);
  transform-origin: 50% 0;
  opacity: calc(clamp(0, (var(--mg-tech-phase-p, 0) - 0.2) * 2.5, 0.75));
}

.mg-chapter-viz__agent-line--n { transform: translate(-50%, -100%) rotate(0deg); }
.mg-chapter-viz__agent-line--e { transform: translate(0, -50%) rotate(90deg); }
.mg-chapter-viz__agent-line--s { transform: translate(-50%, 0) rotate(180deg); }
.mg-chapter-viz__agent-line--w { transform: translate(-100%, -50%) rotate(270deg); }

/* Burst V2 — chapter-driven */
.mg-data-burst {
  opacity: calc(var(--mg-burst-p, 0) * 0.95);
  filter: brightness(calc(0.85 + var(--mg-burst-p, 0) * 0.3));
}

.mg-data-burst__core {
  animation: mgBurstPulse 3s ease-in-out infinite;
  animation-play-state: calc(var(--mg-burst-p, 0) > 0.2 ? running : paused);
}

@keyframes mgBurstPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

.is-chapter-active .mg-scene__layer--bg {
  opacity: calc(0.25 + var(--mg-chapter-p, 0) * 0.55);
}

/* Customs partner — minimal motion */
.mg-scene--customs-partner .mg-chapter-viz,
#customs-kol[data-mg-scene="customs-partner"] .mg-data-burst {
  display: none;
}

#customs-kol[data-mg-scene="customs-partner"] .mg-scene__layer--bg {
  opacity: calc(0.15 + var(--mg-chapter-p, 0) * 0.25);
}

/* Mobile simplification */
@media (max-width: 719px) {
  .mg-chapter-viz__flow,
  .mg-chapter-viz--gtos .mg-chapter-viz__pipeline {
    transform: translateX(-50%) scale(0.85);
  }

  .mg-chapter-viz--consulting .mg-chapter-viz__map-node {
    width: 6px;
    height: 6px;
  }

  .mg-chapter-viz__label {
    bottom: 8%;
    font-size: 0.5rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mg-chapter-pin--consulting {
    min-height: 0;
  }

  .mg-chapter-viz__flow-node,
  .mg-chapter-viz__pipe-step,
  .mg-chapter-viz__map-node {
    opacity: 0.65 !important;
    transform: none !important;
  }

  .mg-data-burst__core {
    animation: none !important;
  }

  .mg-scene__foreground,
  .uc-reliability__content {
    opacity: 1 !important;
    transform: none !important;
  }
}

html.mg-chapters-v2-reduced .mg-chapter-viz {
  opacity: 0.35;
}

html.mg-chapters-v2-reduced [data-mg-scene] .mg-scene__foreground {
  opacity: 1;
  transform: none;
}