/* Phase 3: approved Editorial pathway treatment, scoped to How PIN Works only. */
.pathway-motion-section {
  --pathway-red: #CE2E27;
  --pathway-charcoal: #455561;
  --pathway-steel: #8FA8BC;
  --pathway-path-duration: 800ms;
  --pathway-marker-duration: 260ms;
  --pathway-ease: cubic-bezier(.22, 1, .36, 1);
  --mobile-pathway-rail-x: -1.5rem;
}

.pathway-motion-section .section-heading { margin-bottom: 0; }
.pathway-motion-section .model-pathway-composition { position: relative; }
.pathway-motion-section .model-pathway-graphic {
  position: relative;
  height: clamp(9.5rem, 14vw, 11.875rem);
  margin: 1rem 0 -1.35rem;
  pointer-events: none;
}
.pathway-motion-section .pathway-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.pathway-motion-section .pathway-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pathway-motion-section .pathway-svg--mobile { display: none; }
.pathway-motion-section .pathway-dot-path {
  fill: none;
  stroke: rgba(143, 168, 188, .76);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1 7;
  vector-effect: non-scaling-stroke;
}
.pathway-motion-section .pathway-reveal {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 8;
  stroke-linecap: round;
}
.pathway-motion-section .pathway-marker { color: var(--pathway-steel); }
.pathway-motion-section .pathway-marker use { fill: currentColor; }
.pathway-motion-section .pathway-marker--charcoal { color: var(--pathway-charcoal); }
.pathway-motion-section .pathway-marker--red { color: var(--pathway-red); }
.pathway-motion-section .mobile-step-marker { display: none; }

/* Explicitly remove inherited directional language at every width. */
.pathway-motion-section .model-steps article::after {
  content: none;
  display: none;
}

/* Static is the default. Motion is enabled only after the script confirms support. */
.js:not(.pathway-motion-ready) .pathway-motion-section .pathway-reveal {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}
.pathway-motion-ready .pathway-motion-section .pathway-reveal {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.pathway-motion-ready .pathway-motion-section .pathway-marker { opacity: 0; }
.pathway-motion-ready .pathway-motion-section.is-pathway-visible .pathway-reveal {
  animation: pathway-draw var(--pathway-path-duration) var(--pathway-ease) forwards;
}
.pathway-motion-ready .pathway-motion-section.is-pathway-visible .pathway-marker {
  animation: pathway-marker-reveal var(--pathway-marker-duration) var(--pathway-ease) var(--pathway-delay, 460ms) forwards;
}

@keyframes pathway-draw { to { stroke-dashoffset: 0; } }
@keyframes pathway-marker-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes mobile-rail-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mobile-step-reveal {
  from { opacity: 0; transform: scale(.82); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 1020px) {
  .pathway-motion-section .model-pathway-graphic {
    height: 10.25rem;
    margin-bottom: -1rem;
  }
}

@media (max-width: 760px) {
  .pathway-motion-section .model-pathway-composition {
    margin-top: 2.25rem;
  }
  .pathway-motion-section .model-pathway-graphic {
    position: absolute;
    inset: 0 auto auto 0;
    width: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
  }
  .pathway-motion-section .pathway-svg--desktop { display: none; }
  .pathway-motion-section .pathway-svg--mobile { display: none; }
  .pathway-motion-section .model-steps {
    position: relative;
    grid-template-columns: 1fr;
    gap: .75rem;
    margin-top: 0;
    margin-left: 2.75rem;
    background: transparent;
  }
  .pathway-motion-section .model-steps::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 1.7rem;
    bottom: 1.7rem;
    left: var(--mobile-pathway-rail-x);
    width: 1px;
    background: repeating-linear-gradient(to bottom, rgba(143, 168, 188, .82) 0 2px, transparent 2px 8px);
    transform: scaleY(1);
    transform-origin: top;
  }
  .pathway-motion-section .model-steps article {
    position: relative;
    min-height: 7.25rem;
    padding: 1.15rem;
    border: 1px solid rgba(143, 168, 188, .5);
  }
  .pathway-motion-section .mobile-step-marker {
    display: block;
    position: absolute;
    z-index: 1;
    top: 1.15rem;
    left: var(--mobile-pathway-rail-x);
    width: 1.5rem;
    height: 1.125rem;
    overflow: visible;
    color: var(--pathway-steel);
    fill: currentColor;
    transform-origin: center;
  }
  .pathway-motion-section .mobile-step-marker--red {
    color: var(--pathway-red);
  }
  .pathway-motion-ready .pathway-motion-section .model-steps::before {
    transform: scaleY(0);
  }
  .pathway-motion-ready .pathway-motion-section .mobile-step-marker {
    opacity: 0;
    transform: scale(.82);
  }
  .pathway-motion-ready .pathway-motion-section.is-pathway-visible .model-steps::before {
    animation: mobile-rail-draw var(--pathway-path-duration) var(--pathway-ease) forwards;
  }
  .pathway-motion-ready .pathway-motion-section.is-pathway-visible .mobile-step-marker {
    animation: mobile-step-reveal var(--pathway-marker-duration) var(--pathway-ease) forwards;
  }
  .pathway-motion-ready .pathway-motion-section.is-pathway-visible article:nth-child(1) .mobile-step-marker { animation-delay: 180ms; }
  .pathway-motion-ready .pathway-motion-section.is-pathway-visible article:nth-child(2) .mobile-step-marker { animation-delay: 300ms; }
  .pathway-motion-ready .pathway-motion-section.is-pathway-visible article:nth-child(3) .mobile-step-marker { animation-delay: 420ms; }
  .pathway-motion-ready .pathway-motion-section.is-pathway-visible article:nth-child(4) .mobile-step-marker { animation-delay: 540ms; }
  .pathway-motion-ready .pathway-motion-section.is-pathway-visible article:nth-child(5) .mobile-step-marker { animation-delay: 660ms; }
}

@media (prefers-reduced-motion: reduce) {
  .pathway-motion-section .pathway-reveal {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  .pathway-motion-section .pathway-marker {
    opacity: 1 !important;
    animation: none !important;
  }
  .pathway-motion-section .model-steps::before {
    transform: scaleY(1) !important;
    animation: none !important;
  }
  .pathway-motion-section .mobile-step-marker {
    opacity: 1 !important;
    transform: scale(1) !important;
    animation: none !important;
  }
}