/* ===== Slide 1 anim ===== */

/* Stage: fills the .slide-anim mount, center-anchored */
#anim-1 .s1-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Central wordmark */
.s1-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  background: var(--mh-navy);
  padding: 14px 20px 12px;
  user-select: none;
}
.s1-logo-line {
  font-family: var(--mh-head);
  color: var(--mh-white);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
}
.s1-logo-line--top {
  font-size: clamp(22px, 3.5vw, 38px);
  font-weight: 700;
}
.s1-logo-line--bottom {
  font-size: clamp(13px, 2vw, 20px);
  font-weight: 400;
  letter-spacing: 0.3em;
  color: var(--mh-light);
  margin-top: 4px;
}

/* Content tiles */
.s1-tile {
  position: absolute;
  border-radius: 0;
  opacity: 0;
  width: 52px;
  height: 52px;
}
.s1-tile--navy  { background: var(--mh-navy); }
.s1-tile--mid   { background: var(--mh-mid); }
.s1-tile--light { background: var(--mh-light); }
.s1-tile--pale  { background: var(--mh-pale); border: 1px solid var(--mh-border); }
.s1-tile--wide  { width: 80px; height: 44px; }
.s1-tile--caption {
  display: flex;
  align-items: flex-end;
  padding: 4px 6px;
}
.s1-tile--caption span {
  font-family: var(--mh-head);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mh-navy);
  line-height: 1;
}
.s1-tile--img {
  background: var(--mh-pale);
  border: 1px solid var(--mh-light);
}

/* Tile positions (distributed around center 50%/50%) */
.s1-tile--1 { top: 14%; left: 10%; }
.s1-tile--2 { top: 10%; left: 50%; transform: translateX(-50%); }
.s1-tile--3 { top: 14%; right: 10%; }
.s1-tile--4 { top: 42%; left: 6%; transform: translateY(-50%); }
.s1-tile--5 { top: 42%; right: 6%; transform: translateY(-50%); }
.s1-tile--6 { bottom: 18%; left: 10%; }
.s1-tile--7 { bottom: 10%; left: 50%; transform: translateX(-50%); }
.s1-tile--8 { bottom: 18%; right: 10%; }

/* Platform chips */
.s1-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--mh-white);
  border: 1.5px solid var(--mh-navy);
  border-radius: 0;
  padding: 5px 10px;
  font-family: var(--mh-head);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mh-navy);
  opacity: 0;
  white-space: nowrap;
  z-index: 5;
}
.s1-chip-glyph {
  font-size: 10px;
  color: var(--mh-mid);
}

/* Chip positions (outer ring) */
.s1-chip--1 { top: 4%;    left: 6%; }
.s1-chip--2 { top: 4%;    right: 6%; }
.s1-chip--3 { bottom: 4%; left: 6%; }
.s1-chip--4 { bottom: 4%; right: 6%; }
.s1-chip--5 { top: 50%;   left: 50%; transform: translate(-50%, -50%) translateY(-90px); }

/* SVG connector lines */
.s1-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
}
.s1-line {
  stroke: var(--mh-light);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

/* ---- RUNNING STATE: CSS keyframe loops ---- */

/* Tiles drift inward and pulse in opacity */
@keyframes s1-tile-drift {
  0%   { opacity: 0;    transform: scale(0.7); }
  15%  { opacity: 0.85; transform: scale(1); }
  80%  { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0;    transform: scale(0.95); }
}

/* Wide tiles with their own translate baked in need separate kf */
@keyframes s1-tile-drift-tx {
  0%   { opacity: 0;    transform: translateX(-50%) scale(0.7); }
  15%  { opacity: 0.85; transform: translateX(-50%) scale(1); }
  80%  { opacity: 0.85; transform: translateX(-50%) scale(1); }
  100% { opacity: 0;    transform: translateX(-50%) scale(0.95); }
}
@keyframes s1-tile-drift-ty {
  0%   { opacity: 0;    transform: translateY(-50%) scale(0.7); }
  15%  { opacity: 0.85; transform: translateY(-50%) scale(1); }
  80%  { opacity: 0.85; transform: translateY(-50%) scale(1); }
  100% { opacity: 0;    transform: translateY(-50%) scale(0.95); }
}

@keyframes s1-chip-orbit {
  0%   { opacity: 0;    transform: scale(0.8) translateY(8px); }
  20%  { opacity: 1;    transform: scale(1) translateY(0); }
  75%  { opacity: 1;    transform: scale(1) translateY(0); }
  100% { opacity: 0;    transform: scale(0.9) translateY(-4px); }
}

@keyframes s1-chip-orbit-center {
  0%   { opacity: 0;    transform: translate(-50%, -50%) translateY(-82px) scale(0.8); }
  20%  { opacity: 1;    transform: translate(-50%, -50%) translateY(-90px) scale(1); }
  75%  { opacity: 1;    transform: translate(-50%, -50%) translateY(-90px) scale(1); }
  100% { opacity: 0;    transform: translate(-50%, -50%) translateY(-96px) scale(0.9); }
}

@keyframes s1-lines-fade {
  0%, 10% { opacity: 0; }
  30%, 70% { opacity: 0.5; }
  100%     { opacity: 0; }
}

/* Apply animations only when anim-running is present */
#anim-1.anim-running .s1-tile--1 { animation: s1-tile-drift 4.8s ease-in-out 0s    infinite; }
#anim-1.anim-running .s1-tile--2 { animation: s1-tile-drift-tx 4.8s ease-in-out 0.5s infinite; }
#anim-1.anim-running .s1-tile--3 { animation: s1-tile-drift 4.8s ease-in-out 1.0s  infinite; }
#anim-1.anim-running .s1-tile--4 { animation: s1-tile-drift-ty 4.8s ease-in-out 1.5s infinite; }
#anim-1.anim-running .s1-tile--5 { animation: s1-tile-drift-ty 4.8s ease-in-out 2.0s infinite; }
#anim-1.anim-running .s1-tile--6 { animation: s1-tile-drift 4.8s ease-in-out 2.5s  infinite; }
#anim-1.anim-running .s1-tile--7 { animation: s1-tile-drift-tx 4.8s ease-in-out 3.0s infinite; }
#anim-1.anim-running .s1-tile--8 { animation: s1-tile-drift 4.8s ease-in-out 3.5s  infinite; }

#anim-1.anim-running .s1-chip--1 { animation: s1-chip-orbit 5.6s ease-in-out 0.2s  infinite; }
#anim-1.anim-running .s1-chip--2 { animation: s1-chip-orbit 5.6s ease-in-out 1.2s  infinite; }
#anim-1.anim-running .s1-chip--3 { animation: s1-chip-orbit 5.6s ease-in-out 2.2s  infinite; }
#anim-1.anim-running .s1-chip--4 { animation: s1-chip-orbit 5.6s ease-in-out 3.2s  infinite; }
#anim-1.anim-running .s1-chip--5 { animation: s1-chip-orbit-center 5.6s ease-in-out 4.2s infinite; }

#anim-1.anim-running .s1-lines   { animation: s1-lines-fade 4.8s ease-in-out 0.8s  infinite; }

/* ---- STATIC STATE (reduced-motion): show assembled composition ---- */
#anim-1.anim-static .s1-tile { opacity: 0.85; }
#anim-1.anim-static .s1-tile--2 { transform: translateX(-50%); }
#anim-1.anim-static .s1-tile--4 { transform: translateY(-50%); }
#anim-1.anim-static .s1-tile--5 { transform: translateY(-50%); }
#anim-1.anim-static .s1-tile--7 { transform: translateX(-50%); }
#anim-1.anim-static .s1-chip { opacity: 1; }
#anim-1.anim-static .s1-chip--5 { transform: translate(-50%, -50%) translateY(-90px); }
#anim-1.anim-static .s1-lines { opacity: 0.4; }

/* ===== Slide 2 anim ===== */

#anim-2 .s2-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  gap: 8px;
}

/* ---- Source column (left) ---- */
.s2-source {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  width: 72px;
  position: relative;
  z-index: 2;
}

.s2-mover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.s2-mover-icon {
  width: 28px;
  height: 34px;
  color: var(--mh-mid);
  flex-shrink: 0;
}

.s2-mover-icon svg {
  width: 100%;
  height: 100%;
}

.s2-mover-label {
  font-family: var(--mh-head);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mh-mid);
  line-height: 1;
}

.s2-count-label {
  font-family: var(--mh-head);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mh-charcoal);
  text-align: center;
  margin-top: 4px;
  line-height: 1.2;
  border-top: 1px solid var(--mh-border);
  padding-top: 6px;
  width: 100%;
}

/* ---- Stream (center): traveling tiles ---- */
.s2-stream {
  flex: 1;
  position: relative;
  height: 100%;
  overflow: hidden;
  min-width: 0;
}

.s2-stream-label {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mh-head);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mh-charcoal);
  white-space: nowrap;
  z-index: 5;
}

/* Arrow spanning the stream */
.s2-arrow {
  position: absolute;
  top: 50%;
  left: 6%;
  right: 6%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 1;
  pointer-events: none;
}

.s2-arrow-line {
  flex: 1;
  height: 1px;
  background: var(--mh-light);
}

.s2-arrow-head {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--mh-light);
  flex-shrink: 0;
}

/* ---- Tiles: shared base ---- */
.s2-tile {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 0;
  opacity: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  padding: 3px 5px;
  box-sizing: border-box;
}

.s2-tile span {
  font-family: var(--mh-head);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--mh-navy);
  pointer-events: none;
}

.s2-tile--navy  { background: var(--mh-navy); }
.s2-tile--navy span { color: var(--mh-white); }
.s2-tile--mid   { background: var(--mh-mid); }
.s2-tile--mid span { color: var(--mh-white); }
.s2-tile--light { background: var(--mh-light); }
.s2-tile--pale  { background: var(--mh-pale); border: 1px solid var(--mh-border); }

/* Tiles travel left-to-right across the stream area.
   Three lanes (top, mid, bottom) x four stagger positions. */

/* Lane vertical offsets: top=28%, mid=50%, bottom=72% (transform centers tile) */
.s2-tile--1  { top: 22%; left: 0; }
.s2-tile--2  { top: 48%; left: 0; }
.s2-tile--3  { top: 70%; left: 0; }
.s2-tile--4  { top: 22%; left: 0; }
.s2-tile--5  { top: 48%; left: 0; }
.s2-tile--6  { top: 70%; left: 0; }
.s2-tile--7  { top: 22%; left: 0; }
.s2-tile--8  { top: 48%; left: 0; }
.s2-tile--9  { top: 70%; left: 0; }
.s2-tile--10 { top: 22%; left: 0; }
.s2-tile--11 { top: 48%; left: 0; }
.s2-tile--12 { top: 70%; left: 0; }

/* ---- Library (right) ---- */
.s2-library {
  flex-shrink: 0;
  width: 86px;
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}

.s2-library-inner {
  width: 100%;
  background: var(--mh-navy);
  border-radius: 0;
  padding: 10px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
}

.s2-library-header {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  border-bottom: 1px solid rgba(193, 222, 237, 0.3);
  padding-bottom: 6px;
}

.s2-library-title {
  font-family: var(--mh-head);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mh-white);
  text-align: center;
  line-height: 1.2;
}

.s2-library-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.s2-slot {
  height: 22px;
  border-radius: 0;
  background: rgba(193, 222, 237, 0.2);
  border: 1px solid rgba(193, 222, 237, 0.3);
}

.s2-slot--1 { background: rgba(39, 121, 167, 0.6); border-color: rgba(39, 121, 167, 0.8); }
.s2-slot--2 { background: rgba(193, 222, 237, 0.35); }
.s2-slot--3 { background: rgba(39, 121, 167, 0.4); border-color: rgba(39, 121, 167, 0.6); }
.s2-slot--4 { background: rgba(193, 222, 237, 0.25); }
.s2-slot--5 { background: rgba(39, 121, 167, 0.5); border-color: rgba(39, 121, 167, 0.7); }
.s2-slot--6 { background: rgba(193, 222, 237, 0.3); }

.s2-library-note {
  font-family: var(--mh-head);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mh-light);
  text-align: center;
  line-height: 1;
  padding-top: 2px;
}

/* ---- KEYFRAMES: tiles travel left to right ---- */
/* Tile starts off-screen left (or at 0%), travels full stream width and fades into the Library.
   --s2-stream-w is set from JS (offsetWidth) before anim-running is applied; 300px fallback
   covers the brief instant before the first measurement arrives. */
@keyframes s2-travel {
  0%   { opacity: 0;    transform: translateX(-10px); }
  8%   { opacity: 0.92; transform: translateX(0px); }
  82%  { opacity: 0.92; transform: translateX(calc(var(--s2-stream-w, 300px) - 50px)); }
  95%  { opacity: 0;    transform: translateX(calc(var(--s2-stream-w, 300px) - 8px)); }
  100% { opacity: 0;    transform: translateX(calc(var(--s2-stream-w, 300px) - 8px)); }
}

/* 12 tiles, 3 lanes, staggered so ~3-4 are visible at any time.
   Cycle duration: 3.2s; total spread: 12 * 0.8s = 9.6s so all stagger within 3 cycles. */
#anim-2.anim-running .s2-tile--1  { animation: s2-travel 3.2s ease-in-out 0.0s  infinite; }
#anim-2.anim-running .s2-tile--2  { animation: s2-travel 3.2s ease-in-out 0.4s  infinite; }
#anim-2.anim-running .s2-tile--3  { animation: s2-travel 3.2s ease-in-out 0.8s  infinite; }
#anim-2.anim-running .s2-tile--4  { animation: s2-travel 3.2s ease-in-out 1.2s  infinite; }
#anim-2.anim-running .s2-tile--5  { animation: s2-travel 3.2s ease-in-out 1.6s  infinite; }
#anim-2.anim-running .s2-tile--6  { animation: s2-travel 3.2s ease-in-out 2.0s  infinite; }
#anim-2.anim-running .s2-tile--7  { animation: s2-travel 3.2s ease-in-out 2.4s  infinite; }
#anim-2.anim-running .s2-tile--8  { animation: s2-travel 3.2s ease-in-out 2.8s  infinite; }
#anim-2.anim-running .s2-tile--9  { animation: s2-travel 3.2s ease-in-out 0.2s  infinite; }
#anim-2.anim-running .s2-tile--10 { animation: s2-travel 3.2s ease-in-out 0.6s  infinite; }
#anim-2.anim-running .s2-tile--11 { animation: s2-travel 3.2s ease-in-out 1.0s  infinite; }
#anim-2.anim-running .s2-tile--12 { animation: s2-travel 3.2s ease-in-out 1.4s  infinite; }

/* Library slots pulse gently when running to suggest content arriving */
@keyframes s2-slot-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

#anim-2.anim-running .s2-slot--1 { animation: s2-slot-pulse 2.1s ease-in-out 0.0s infinite; }
#anim-2.anim-running .s2-slot--2 { animation: s2-slot-pulse 2.1s ease-in-out 0.4s infinite; }
#anim-2.anim-running .s2-slot--3 { animation: s2-slot-pulse 2.1s ease-in-out 0.8s infinite; }
#anim-2.anim-running .s2-slot--4 { animation: s2-slot-pulse 2.1s ease-in-out 1.2s infinite; }
#anim-2.anim-running .s2-slot--5 { animation: s2-slot-pulse 2.1s ease-in-out 1.6s infinite; }
#anim-2.anim-running .s2-slot--6 { animation: s2-slot-pulse 2.1s ease-in-out 2.0s infinite; }

/* Mover icons pulse in running state */
@keyframes s2-mover-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

#anim-2.anim-running .s2-mover--1 .s2-mover-icon { animation: s2-mover-pulse 2.4s ease-in-out 0.0s infinite; }
#anim-2.anim-running .s2-mover--2 .s2-mover-icon { animation: s2-mover-pulse 2.4s ease-in-out 0.8s infinite; }
#anim-2.anim-running .s2-mover--3 .s2-mover-icon { animation: s2-mover-pulse 2.4s ease-in-out 1.6s infinite; }

/* ---- STATIC STATE (reduced-motion): tiles at mid-journey positions ---- */
#anim-2.anim-static .s2-tile { opacity: 0.88; }
/* Spread tiles across the stream at different X positions, all lanes visible */
#anim-2.anim-static .s2-tile--1  { transform: translateX(20px); }
#anim-2.anim-static .s2-tile--2  { transform: translateX(55px); }
#anim-2.anim-static .s2-tile--3  { transform: translateX(90px); }
#anim-2.anim-static .s2-tile--4  { transform: translateX(30px); }
#anim-2.anim-static .s2-tile--5  { transform: translateX(70px); }
#anim-2.anim-static .s2-tile--6  { transform: translateX(110px); }
#anim-2.anim-static .s2-tile--7  { opacity: 0; }
#anim-2.anim-static .s2-tile--8  { opacity: 0; }
#anim-2.anim-static .s2-tile--9  { opacity: 0; }
#anim-2.anim-static .s2-tile--10 { opacity: 0; }
#anim-2.anim-static .s2-tile--11 { opacity: 0; }
#anim-2.anim-static .s2-tile--12 { opacity: 0; }

/* ===== Slide 3 anim ===== */

/* Stage fills mount, vertical flow top-to-bottom */
#anim-3 .s3-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  gap: 0;
}

/* ---- Source node: 1 DAY ---- */
.s3-source {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.s3-source-inner {
  background: var(--mh-navy);
  border-radius: 0;
  padding: 10px 22px 8px;
  text-align: center;
}

.s3-source-label {
  font-family: var(--mh-head);
  font-size: clamp(18px, 2.8vw, 28px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mh-white);
  line-height: 1;
}

.s3-source-sub {
  font-family: var(--mh-head);
  font-size: clamp(9px, 1.2vw, 12px);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mh-light);
  margin-top: 3px;
  line-height: 1;
}

/* ---- Connectors: thin horizontal rules between tiers ---- */
.s3-connector {
  flex-shrink: 0;
  width: 1px;
  background: var(--mh-light);
  opacity: 0;
  height: 14px;
}

/* ---- Tier wrapper ---- */
.s3-tier {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  opacity: 0;
}

.s3-tier-label {
  font-family: var(--mh-head);
  font-size: clamp(9px, 1.3vw, 12px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mh-mid);
  line-height: 1;
}

/* ---- Episodes tier ---- */
.s3-episodes {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
  width: 100%;
}

.s3-ep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border-radius: 0;
  opacity: 0;
}

.s3-ep-bar {
  width: clamp(34px, 5.5vw, 52px);
  height: clamp(28px, 4.5vw, 42px);
  background: var(--mh-mid);
  border-radius: 0;
}

.s3-ep--2 .s3-ep-bar { background: var(--mh-navy); }
.s3-ep--3 .s3-ep-bar { background: var(--mh-mid); }
.s3-ep--4 .s3-ep-bar { background: var(--mh-navy); }
.s3-ep--5 .s3-ep-bar { background: var(--mh-mid); }

.s3-ep-label {
  font-family: var(--mh-head);
  font-size: clamp(8px, 1.1vw, 11px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mh-charcoal);
  line-height: 1;
}

/* ---- Clips tier ---- */
.s3-clips {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  width: 100%;
}

.s3-clip {
  height: clamp(22px, 3.5vw, 30px);
  border-radius: 0;
  display: flex;
  align-items: flex-end;
  padding: 2px 3px;
  opacity: 0;
}

.s3-clip span {
  font-family: var(--mh-head);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mh-navy);
  line-height: 1;
}

.s3-clip--col1 { background: var(--mh-light); }
.s3-clip--col2 { background: var(--mh-pale); border: 1px solid var(--mh-border); }
.s3-clip--col3 { background: var(--mh-mid); }
.s3-clip--col3 span { color: var(--mh-white); }
.s3-clip--col4 { background: var(--mh-light); }

/* ---- Quotes tier ---- */
.s3-quotes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  width: 100%;
}

.s3-quote {
  background: var(--mh-white);
  border: 1.5px solid var(--mh-navy);
  border-radius: 0;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  opacity: 0;
}

.s3-quote span {
  font-family: var(--mh-head);
  font-size: clamp(9px, 1.2vw, 12px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mh-navy);
  line-height: 1;
  white-space: nowrap;
}

/* ---- KEYFRAMES ---- */

/* Loop duration: 8s total
   Phase 1: source appears    0s-1.2s
   Phase 2: episodes appear   1.2s-2.8s
   Phase 3: clips spread      2.8s-4.5s
   Phase 4: quotes appear     4.5s-6s
   Hold:                      6s-7s
   Fade all:                  7s-8s
*/

@keyframes s3-source-cycle {
  0%    { opacity: 0;   transform: scale(0.8); }
  10%   { opacity: 1;   transform: scale(1); }
  80%   { opacity: 1;   transform: scale(1); }
  93%   { opacity: 0;   transform: scale(0.95); }
  100%  { opacity: 0;   transform: scale(0.8); }
}

@keyframes s3-connector-cycle {
  0%,  16% { opacity: 0; }
  22%       { opacity: 1; }
  80%       { opacity: 1; }
  93%       { opacity: 0; }
  100%      { opacity: 0; }
}

@keyframes s3-tier-cycle {
  0%,  17% { opacity: 0; transform: translateY(6px); }
  27%       { opacity: 1; transform: translateY(0); }
  80%       { opacity: 1; transform: translateY(0); }
  93%       { opacity: 0; transform: translateY(-4px); }
  100%      { opacity: 0; transform: translateY(6px); }
}

/* Episodes stagger in after the tier container appears */
@keyframes s3-ep-stagger {
  0%,  22% { opacity: 0; transform: scale(0.6) translateY(4px); }
  36%       { opacity: 1; transform: scale(1) translateY(0); }
  80%       { opacity: 1; transform: scale(1) translateY(0); }
  93%       { opacity: 0; transform: scale(0.9); }
  100%      { opacity: 0; transform: scale(0.6) translateY(4px); }
}

@keyframes s3-clip-stagger {
  0%,  37% { opacity: 0; transform: scaleY(0.4); }
  50%       { opacity: 0.92; transform: scaleY(1); }
  80%       { opacity: 0.92; transform: scaleY(1); }
  93%       { opacity: 0; transform: scaleY(0.6); }
  100%      { opacity: 0; transform: scaleY(0.4); }
}

@keyframes s3-quote-stagger {
  0%,  56% { opacity: 0; transform: translateY(5px); }
  68%       { opacity: 1; transform: translateY(0); }
  80%       { opacity: 1; transform: translateY(0); }
  93%       { opacity: 0; transform: translateY(-3px); }
  100%      { opacity: 0; transform: translateY(5px); }
}

/* ---- RUNNING STATE ---- */

#anim-3.anim-running .s3-source {
  animation: s3-source-cycle 8s ease-in-out 0s infinite;
}

#anim-3.anim-running .s3-connector {
  animation: s3-connector-cycle 8s ease-in-out 0s infinite;
}

#anim-3.anim-running .s3-tier--eps {
  animation: s3-tier-cycle 8s ease-in-out 0.1s infinite;
}

/* Episodes stagger: 5 nodes, 0.18s apart */
#anim-3.anim-running .s3-ep--1 { animation: s3-ep-stagger 8s ease-in-out 0.0s  infinite; }
#anim-3.anim-running .s3-ep--2 { animation: s3-ep-stagger 8s ease-in-out 0.18s infinite; }
#anim-3.anim-running .s3-ep--3 { animation: s3-ep-stagger 8s ease-in-out 0.36s infinite; }
#anim-3.anim-running .s3-ep--4 { animation: s3-ep-stagger 8s ease-in-out 0.54s infinite; }
#anim-3.anim-running .s3-ep--5 { animation: s3-ep-stagger 8s ease-in-out 0.72s infinite; }

#anim-3.anim-running .s3-tier--clips {
  animation: s3-tier-cycle 8s ease-in-out 0.2s infinite;
}

/* Clips stagger: 16 tiles, 0.1s apart */
#anim-3.anim-running .s3-clip--1  { animation: s3-clip-stagger 8s ease-in-out 0.0s  infinite; }
#anim-3.anim-running .s3-clip--2  { animation: s3-clip-stagger 8s ease-in-out 0.1s  infinite; }
#anim-3.anim-running .s3-clip--3  { animation: s3-clip-stagger 8s ease-in-out 0.2s  infinite; }
#anim-3.anim-running .s3-clip--4  { animation: s3-clip-stagger 8s ease-in-out 0.3s  infinite; }
#anim-3.anim-running .s3-clip--5  { animation: s3-clip-stagger 8s ease-in-out 0.4s  infinite; }
#anim-3.anim-running .s3-clip--6  { animation: s3-clip-stagger 8s ease-in-out 0.5s  infinite; }
#anim-3.anim-running .s3-clip--7  { animation: s3-clip-stagger 8s ease-in-out 0.6s  infinite; }
#anim-3.anim-running .s3-clip--8  { animation: s3-clip-stagger 8s ease-in-out 0.7s  infinite; }
#anim-3.anim-running .s3-clip--9  { animation: s3-clip-stagger 8s ease-in-out 0.8s  infinite; }
#anim-3.anim-running .s3-clip--10 { animation: s3-clip-stagger 8s ease-in-out 0.9s  infinite; }
#anim-3.anim-running .s3-clip--11 { animation: s3-clip-stagger 8s ease-in-out 1.0s  infinite; }
#anim-3.anim-running .s3-clip--12 { animation: s3-clip-stagger 8s ease-in-out 1.1s  infinite; }
#anim-3.anim-running .s3-clip--13 { animation: s3-clip-stagger 8s ease-in-out 1.2s  infinite; }
#anim-3.anim-running .s3-clip--14 { animation: s3-clip-stagger 8s ease-in-out 1.3s  infinite; }
#anim-3.anim-running .s3-clip--15 { animation: s3-clip-stagger 8s ease-in-out 1.4s  infinite; }
#anim-3.anim-running .s3-clip--16 { animation: s3-clip-stagger 8s ease-in-out 1.5s  infinite; }

#anim-3.anim-running .s3-tier--quotes {
  animation: s3-tier-cycle 8s ease-in-out 0.3s infinite;
}

/* Quote chips stagger: 6 chips, 0.15s apart */
#anim-3.anim-running .s3-quote--1 { animation: s3-quote-stagger 8s ease-in-out 0.0s  infinite; }
#anim-3.anim-running .s3-quote--2 { animation: s3-quote-stagger 8s ease-in-out 0.15s infinite; }
#anim-3.anim-running .s3-quote--3 { animation: s3-quote-stagger 8s ease-in-out 0.3s  infinite; }
#anim-3.anim-running .s3-quote--4 { animation: s3-quote-stagger 8s ease-in-out 0.45s infinite; }
#anim-3.anim-running .s3-quote--5 { animation: s3-quote-stagger 8s ease-in-out 0.6s  infinite; }
#anim-3.anim-running .s3-quote--6 { animation: s3-quote-stagger 8s ease-in-out 0.75s infinite; }

/* ---- STATIC STATE (reduced-motion): fully fanned-out final frame ---- */

#anim-3.anim-static .s3-source    { opacity: 1; transform: scale(1); }
#anim-3.anim-static .s3-connector { opacity: 1; }
#anim-3.anim-static .s3-tier      { opacity: 1; transform: translateY(0); }
#anim-3.anim-static .s3-ep        { opacity: 1; transform: scale(1) translateY(0); }
#anim-3.anim-static .s3-clip      { opacity: 0.92; transform: scaleY(1); }
#anim-3.anim-static .s3-quote     { opacity: 1; transform: translateY(0); }

/* ===== Slide 4 anim ===== */

/* Stage: fills #anim-4 */
#anim-4 .s4-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 12px 14px 8px;
  gap: 0;
}

/* ---- Pipeline row ---- */
.s4-pipeline {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 0;
  padding: 0 4px;
}

/* ---- Pipeline nodes ---- */
.s4-node {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  padding: 7px 10px 6px;
  min-width: 64px;
  position: relative;
  opacity: 0.35;
  transition: none;
}

.s4-node--navy  { background: var(--mh-navy); }
.s4-node--mid   { background: var(--mh-mid);  }

.s4-node-label {
  font-family: var(--mh-head);
  font-size: clamp(9px, 1.2vw, 12px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mh-white);
  line-height: 1;
  white-space: nowrap;
}

/* ---- Connectors between pipeline nodes ---- */
.s4-conn {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  min-width: 18px;
  max-width: 60px;
  height: 2px;
  flex-shrink: 0;
}

.s4-arrow-line {
  flex: 1;
  height: 1px;
  background: var(--mh-light);
}

.s4-arrow-head {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--mh-light);
  flex-shrink: 0;
}

/* ---- Packets traveling along pipeline connectors ---- */
.s4-packet--pipe {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--mh-mid);
  border-radius: 0;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  opacity: 0;
}

/* ---- Fan-out row (below pipeline) ---- */
.s4-fanout-row {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
}

/* Vertical spine dropping from PUBLISH node + horizontal spread */
.s4-fanout-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.s4-fanout-vline {
  width: 1px;
  height: 10px;
  background: var(--mh-light);
  opacity: 0.6;
}

.s4-fanout-hline {
  width: 90%;
  height: 1px;
  background: var(--mh-light);
  opacity: 0.6;
}

/* ---- Chips row ---- */
.s4-chips {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  width: 90%;
  gap: 4px;
}

.s4-chip-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

/* Short vertical line from hline down to chip */
.s4-fan-vline {
  width: 1px;
  height: 10px;
  background: var(--mh-light);
  opacity: 0.6;
  position: relative;
}

/* Platform chip */
.s4-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--mh-white);
  border: 1.5px solid var(--mh-navy);
  border-radius: 0;
  padding: 5px 6px 4px;
  opacity: 0.35;
}

.s4-chip-glyph {
  font-family: var(--mh-head);
  font-size: clamp(10px, 1.4vw, 14px);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--mh-navy);
  line-height: 1;
}

.s4-chip-label {
  font-family: var(--mh-head);
  font-size: clamp(7px, 0.9vw, 10px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mh-mid);
  line-height: 1;
  white-space: nowrap;
}

/* ---- Fan packets (traveling down the fan-vline) ---- */
.s4-packet--fan {
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--mh-navy);
  border-radius: 0;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  opacity: 0;
}

/* ---- Analytics feedback arc (SVG + label) ---- */
.s4-analytics-wrap {
  flex-shrink: 0;
  position: relative;
  width: 100%;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s4-analytics-svg {
  width: 100%;
  height: 48px;
  overflow: visible;
}

.s4-arc-path {
  stroke: var(--mh-mid);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  opacity: 0.5;
}

.s4-arc-arrow {
  fill: var(--mh-mid);
  opacity: 0.5;
}

.s4-arc-packet {
  fill: var(--mh-mid);
  opacity: 0;
}

.s4-analytics-label {
  font-family: var(--mh-head);
  font-size: clamp(8px, 1vw, 11px);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mh-mid);
  line-height: 1;
  margin-top: 1px;
}

/* ======================================================
   KEYFRAMES
   Total loop: 10s
   Phase 1 (0-6s):    nodes pulse in sequence (each 1s)
   Phase 2 (1-7s):    packets travel pipeline connectors
   Phase 3 (6-8s):    fan-out to 5 chips
   Phase 4 (7.5-9.5s):analytics packet travels arc
   Phase 5 (9.5-10s): reset (all fade back to dim)
   ====================================================== */

/* --- Node pulse: lit during its 1s window, dims back --- */
@keyframes s4-node-pulse {
  0%   { opacity: 0.35; }
  10%  { opacity: 1;    box-shadow: 0 0 0 3px rgba(39,121,167,0.35); }
  50%  { opacity: 1;    box-shadow: 0 0 0 3px rgba(39,121,167,0.1); }
  70%  { opacity: 0.7;  box-shadow: none; }
  100% { opacity: 0.35; box-shadow: none; }
}

/* --- Packet traveling a pipeline connector (left to right in 0.7s window) --- */
@keyframes s4-packet-pipe {
  0%   { opacity: 0;    left: 0%;   }
  10%  { opacity: 1;    left: 5%;   }
  80%  { opacity: 1;    left: 88%;  }
  100% { opacity: 0;    left: 100%; }
}

/* --- Chip light-up (fan-out) --- */
@keyframes s4-chip-light {
  0%   { opacity: 0.35; }
  15%  { opacity: 1;    border-color: var(--mh-mid); }
  60%  { opacity: 1;    border-color: var(--mh-mid); }
  100% { opacity: 0.35; border-color: var(--mh-navy); }
}

/* --- Fan packet drops down vline --- */
@keyframes s4-packet-fan {
  0%   { opacity: 0;   top: 0%;   }
  15%  { opacity: 1;   top: 15%;  }
  80%  { opacity: 1;   top: 90%;  }
  100% { opacity: 0;   top: 100%; }
}

/* --- Analytics SVG packet travels along the arc path (cx from 770 -> 30) --- */
@keyframes s4-arc-packet-move {
  0%   { cx: 770; opacity: 0; }
  5%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { cx: 30;  opacity: 0; }
}

/* ---- RUNNING STATE ---- */

/* Nodes pulse in sequence: 1s each, offset by 1s, cycle 10s */
#anim-4.anim-running .s4-node[data-s4-node="0"] { animation: s4-node-pulse 10s ease-in-out 0.0s infinite; }
#anim-4.anim-running .s4-node[data-s4-node="1"] { animation: s4-node-pulse 10s ease-in-out 1.0s infinite; }
#anim-4.anim-running .s4-node[data-s4-node="2"] { animation: s4-node-pulse 10s ease-in-out 2.0s infinite; }
#anim-4.anim-running .s4-node[data-s4-node="3"] { animation: s4-node-pulse 10s ease-in-out 3.0s infinite; }
#anim-4.anim-running .s4-node[data-s4-node="4"] { animation: s4-node-pulse 10s ease-in-out 4.0s infinite; }
#anim-4.anim-running .s4-node[data-s4-node="5"] { animation: s4-node-pulse 10s ease-in-out 5.0s infinite; }

/* Pipeline connector packets: travel in their window after the sending node lights */
#anim-4.anim-running .s4-packet--p0 { animation: s4-packet-pipe 10s linear 0.4s  infinite; }
#anim-4.anim-running .s4-packet--p1 { animation: s4-packet-pipe 10s linear 1.4s  infinite; }
#anim-4.anim-running .s4-packet--p2 { animation: s4-packet-pipe 10s linear 2.4s  infinite; }
#anim-4.anim-running .s4-packet--p3 { animation: s4-packet-pipe 10s linear 3.4s  infinite; }
#anim-4.anim-running .s4-packet--p4 { animation: s4-packet-pipe 10s linear 4.4s  infinite; }

/* Chips light up: fan-out after PUBLISH lights (offset ~5s) */
#anim-4.anim-running .s4-chip[data-s4-chip="0"] { animation: s4-chip-light 10s ease-in-out 6.0s  infinite; }
#anim-4.anim-running .s4-chip[data-s4-chip="1"] { animation: s4-chip-light 10s ease-in-out 6.25s infinite; }
#anim-4.anim-running .s4-chip[data-s4-chip="2"] { animation: s4-chip-light 10s ease-in-out 6.5s  infinite; }
#anim-4.anim-running .s4-chip[data-s4-chip="3"] { animation: s4-chip-light 10s ease-in-out 6.75s infinite; }
#anim-4.anim-running .s4-chip[data-s4-chip="4"] { animation: s4-chip-light 10s ease-in-out 7.0s  infinite; }

/* Fan packets drop to chips */
#anim-4.anim-running .s4-packet--f0 { animation: s4-packet-fan 10s linear 5.8s  infinite; }
#anim-4.anim-running .s4-packet--f1 { animation: s4-packet-fan 10s linear 6.05s infinite; }
#anim-4.anim-running .s4-packet--f2 { animation: s4-packet-fan 10s linear 6.3s  infinite; }
#anim-4.anim-running .s4-packet--f3 { animation: s4-packet-fan 10s linear 6.55s infinite; }
#anim-4.anim-running .s4-packet--f4 { animation: s4-packet-fan 10s linear 6.8s  infinite; }

/* Analytics arc packet travels right-to-left */
#anim-4.anim-running .s4-arc-packet { animation: s4-arc-packet-move 10s linear 7.5s infinite; }

/* ---- STATIC STATE (reduced-motion): all nodes + chips fully lit, packets placed ---- */
#anim-4.anim-static .s4-node     { opacity: 1; }
#anim-4.anim-static .s4-chip     { opacity: 1; border-color: var(--mh-mid); }

/* Packets placed at mid-journey */
#anim-4.anim-static .s4-packet--pipe { opacity: 1; left: 50%; }
#anim-4.anim-static .s4-packet--fan  { opacity: 1; top: 50%;  }
#anim-4.anim-static .s4-arc-packet   { opacity: 1; cx: 400;   }

/* ===== Slide 5 anim ===== */

/* Stage: fills #anim-5, centers content vertically */
#anim-5 .s5-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 28px 16px;
  gap: 0;
}

/* ---- Track wrapper: holds bg rail, fill line, and marker ---- */
.s5-track-wrap {
  position: relative;
  width: 100%;
  height: 6px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-bottom: 0;
}

/* Background rail */
.s5-track-bg {
  position: absolute;
  inset: 0;
  background: var(--mh-light);
  border-radius: 0;
}

/* Fill line that draws left-to-right */
.s5-track-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--mh-navy);
  border-radius: 0;
}

/* Square marker that travels along the track */
.s5-marker {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 18px;
  height: 18px;
  background: var(--mh-navy);
  border-radius: 0;
  transform: translate(-50%, -50%);
  z-index: 2;
  border: 3px solid var(--mh-white);
  box-shadow: 0 0 0 2px var(--mh-navy);
}

/* ---- Stops row ---- */
.s5-stops {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
  margin-top: 12px;
}

/* Each stop: dot + label + sub, centered under its track position */
.s5-stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  position: relative;
  border-radius: 0;
}

.s5-stop--0 { align-items: flex-start; }
.s5-stop--1 { align-items: center; }
.s5-stop--2 { align-items: flex-end; }

/* Dot indicator (small square) sitting on top of the track line */
.s5-stop-dot {
  width: 10px;
  height: 10px;
  background: var(--mh-light);
  border-radius: 0;
  flex-shrink: 0;
  transition: none;
}

/* Stop label */
.s5-stop-label {
  font-family: var(--mh-head);
  font-size: clamp(10px, 1.4vw, 14px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mh-charcoal);
  line-height: 1;
  white-space: nowrap;
  opacity: 0.4;
}

/* Stop sub-label */
.s5-stop-sub {
  font-family: var(--mh-head);
  font-size: clamp(8px, 1.1vw, 11px);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mh-mid);
  line-height: 1;
  white-space: nowrap;
  opacity: 0.4;
}

/* ---- Tagline ---- */
.s5-tagline {
  font-family: var(--mh-head);
  font-size: clamp(10px, 1.3vw, 13px);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mh-mid);
  line-height: 1;
  margin-top: 28px;
  opacity: 0;
  flex-shrink: 0;
}

/* ======================================================
   KEYFRAMES
   Total loop: 6s
   Phase 1 (0-2s):   fill draws from 0->50%, marker to 50%, stop 0 lights at 0%, stop 1 at ~33%
   Phase 2 (2-4s):   fill draws from 50->100%, marker to 100%, stop 2 lights at ~66%
   Phase 3 (4-5s):   all lit, tagline appears
   Phase 4 (5-6s):   fade/reset back to 0, loop
   ====================================================== */

/* Fill line draws from 0 to 100% */
@keyframes s5-fill-draw {
  0%   { width: 0%;    }
  33%  { width: 50%;   }
  66%  { width: 100%;  }
  85%  { width: 100%;  }
  95%  { width: 0%;    }
  100% { width: 0%;    }
}

/* Marker travels from left (0%) to right (100%) */
@keyframes s5-marker-travel {
  0%   { left: 0%;   }
  33%  { left: 50%;  }
  66%  { left: 100%; }
  85%  { left: 100%; }
  95%  { left: 0%;   }
  100% { left: 0%;   }
}

/* Stop 0 (START FAST) lights immediately, stays lit, dims at reset */
@keyframes s5-stop0-light {
  0%    { opacity: 0.4; }
  5%    { opacity: 1;   }
  85%   { opacity: 1;   }
  95%   { opacity: 0.4; }
  100%  { opacity: 0.4; }
}

/* Stop 0 dot color */
@keyframes s5-dot0-light {
  0%    { background: var(--mh-light); }
  5%    { background: var(--mh-navy);  }
  85%   { background: var(--mh-navy);  }
  95%   { background: var(--mh-light); }
  100%  { background: var(--mh-light); }
}

/* Stop 1 (SCALE) lights at ~33% of the cycle */
@keyframes s5-stop1-light {
  0%,  30%  { opacity: 0.4; }
  38%        { opacity: 1;   }
  85%        { opacity: 1;   }
  95%        { opacity: 0.4; }
  100%       { opacity: 0.4; }
}

@keyframes s5-dot1-light {
  0%,  30%  { background: var(--mh-light); }
  38%        { background: var(--mh-navy);  }
  85%        { background: var(--mh-navy);  }
  95%        { background: var(--mh-light); }
  100%       { background: var(--mh-light); }
}

/* Stop 2 (IT COMPOUNDS) lights at ~66% of cycle */
@keyframes s5-stop2-light {
  0%,  63%  { opacity: 0.4; }
  71%        { opacity: 1;   }
  85%        { opacity: 1;   }
  95%        { opacity: 0.4; }
  100%       { opacity: 0.4; }
}

@keyframes s5-dot2-light {
  0%,  63%  { background: var(--mh-light); }
  71%        { background: var(--mh-navy);  }
  85%        { background: var(--mh-navy);  }
  95%        { background: var(--mh-light); }
  100%       { background: var(--mh-light); }
}

/* Tagline fades in after all stops lit */
@keyframes s5-tagline-fade {
  0%,  70%  { opacity: 0; }
  80%        { opacity: 0.9; }
  85%        { opacity: 0.9; }
  95%        { opacity: 0; }
  100%       { opacity: 0; }
}

/* ---- RUNNING STATE ---- */

#anim-5.anim-running .s5-track-fill {
  animation: s5-fill-draw 6s ease-in-out 0s infinite;
}

#anim-5.anim-running .s5-marker {
  animation: s5-marker-travel 6s ease-in-out 0s infinite;
}

/* Stop 0 */
#anim-5.anim-running .s5-stop--0 .s5-stop-label,
#anim-5.anim-running .s5-stop--0 .s5-stop-sub {
  animation: s5-stop0-light 6s ease-in-out 0s infinite;
}
#anim-5.anim-running .s5-stop--0 .s5-stop-dot {
  animation: s5-dot0-light 6s ease-in-out 0s infinite;
}

/* Stop 1 */
#anim-5.anim-running .s5-stop--1 .s5-stop-label,
#anim-5.anim-running .s5-stop--1 .s5-stop-sub {
  animation: s5-stop1-light 6s ease-in-out 0s infinite;
}
#anim-5.anim-running .s5-stop--1 .s5-stop-dot {
  animation: s5-dot1-light 6s ease-in-out 0s infinite;
}

/* Stop 2 */
#anim-5.anim-running .s5-stop--2 .s5-stop-label,
#anim-5.anim-running .s5-stop--2 .s5-stop-sub {
  animation: s5-stop2-light 6s ease-in-out 0s infinite;
}
#anim-5.anim-running .s5-stop--2 .s5-stop-dot {
  animation: s5-dot2-light 6s ease-in-out 0s infinite;
}

/* Tagline */
#anim-5.anim-running .s5-tagline {
  animation: s5-tagline-fade 6s ease-in-out 0s infinite;
}

/* ---- STATIC STATE (reduced-motion): full path drawn, all 3 stops lit ---- */

#anim-5.anim-static .s5-track-fill {
  width: 100%;
}

#anim-5.anim-static .s5-marker {
  left: 100%;
}

#anim-5.anim-static .s5-stop-label,
#anim-5.anim-static .s5-stop-sub {
  opacity: 1;
}

#anim-5.anim-static .s5-stop-dot {
  background: var(--mh-navy);
}

#anim-5.anim-static .s5-tagline {
  opacity: 0.9;
}