/* TBMS Trader page: extra motion. Everything here is decorative and off for reduced-motion users. */

section[id] { scroll-margin-top: 84px; }

.nav a { transition: color 0.2s ease; }
.nav a[aria-current="true"] { color: var(--accent); }

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* Pipeline: a line draws across the five stages, and each stage number lights up in turn. */
.stage-grid--five .pipeline-line {
  grid-column: 1 / -1;
  height: 2px;
  background: var(--card-border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}
.stage-grid--five .pipeline-line span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(232, 184, 75, 0.2), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
html.mplus .stage-grid--five.is-live .pipeline-line span { transform: scaleX(1); }

html.mplus .stage-grid--five .stage-num { opacity: 0.35; transition: opacity 0.5s ease, color 0.5s ease; }
html.mplus .stage-grid--five.is-live .stage-num { opacity: 1; }
html.mplus .stage-grid--five.is-live .stage-card:nth-child(2) .stage-num { transition-delay: 0.3s; }
html.mplus .stage-grid--five.is-live .stage-card:nth-child(3) .stage-num { transition-delay: 0.7s; }
html.mplus .stage-grid--five.is-live .stage-card:nth-child(4) .stage-num { transition-delay: 1.1s; }
html.mplus .stage-grid--five.is-live .stage-card:nth-child(5) .stage-num { transition-delay: 1.5s; }
html.mplus .stage-grid--five.is-live .stage-card:nth-child(6) .stage-num { transition-delay: 1.9s; }

/* Icons draw themselves in when their card appears. */
html.mplus .reveal .risk-icon svg *, html.mplus .reveal .service-icon svg * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s ease 0.3s;
}
html.mplus .reveal.is-visible .risk-icon svg *,
html.mplus .reveal.is-visible .service-icon svg * { stroke-dashoffset: 0; }

/* Strategy cards: the spec rows slide in one after another. */
html.mplus .strategy-card.reveal .spec-row {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
html.mplus .strategy-card.reveal.is-visible .spec-row { opacity: 1; transform: none; }
html.mplus .strategy-card.reveal.is-visible .spec-row:nth-child(1) { transition-delay: 0.35s; }
html.mplus .strategy-card.reveal.is-visible .spec-row:nth-child(2) { transition-delay: 0.5s; }
html.mplus .strategy-card.reveal.is-visible .spec-row:nth-child(3) { transition-delay: 0.65s; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Hero card: the four stages light up in turn, again and again, and a faint scan line passes down. */
  .signal-card { position: relative; overflow: hidden; }
  .signal-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -35%;
    height: 35%;
    background: linear-gradient(to bottom, transparent, rgba(232, 184, 75, 0.07), transparent);
    animation: tbms-scan 7s linear infinite;
    pointer-events: none;
  }
  .signal-steps li .check { animation: tbms-tick 7s ease-in-out infinite; }
  .signal-steps li:nth-child(1) .check { animation-delay: 0s; }
  .signal-steps li:nth-child(2) .check { animation-delay: 0.7s; }
  .signal-steps li:nth-child(3) .check { animation-delay: 1.4s; }
  .signal-steps li:nth-child(4) .check { animation-delay: 2.1s; }

  /* "In demo testing" gets a small live dot. */
  .status-pill::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 8px;
    vertical-align: middle;
    animation: tbms-pulse 2s ease-in-out infinite;
  }
}

@keyframes tbms-scan {
  0% { transform: translateY(0); }
  100% { transform: translateY(450%); }
}
@keyframes tbms-tick {
  0%, 12%, 100% { box-shadow: 0 0 0 0 rgba(232, 184, 75, 0); }
  5% { box-shadow: 0 0 0 7px rgba(232, 184, 75, 0.28); }
}
@keyframes tbms-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}