/* Finite motion, native scrolling and visible content in every fallback. */
@keyframes echo-enter {
  from { opacity: .15; transform: translate3d(0,18px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes echo-photo {
  from { transform: scale(1.035); }
  to { transform: scale(1); }
}
@keyframes echo-ring {
  0% { border-color: #6fa5d142; opacity: .5; }
  45% { border-color: #9fcfff; opacity: 1; }
  100% { border-color: #6fa5d142; opacity: 1; }
}
@keyframes echo-icon {
  0%,100% { transform: scale(1); }
  45% { transform: scale(1.12); }
}
.motion-enhanced .hero-content { animation: none; }
.motion-enhanced .hero-content > * {
  animation: echo-enter .65s cubic-bezier(.16,1,.3,1) both;
}
.motion-enhanced .hero-content .hero-eyebrow { animation-delay: 0ms; }
.motion-enhanced .hero-content h1 { animation-delay: 90ms; }
.motion-enhanced .hero-content .hero-subtitle { animation-delay: 160ms; }
.motion-enhanced .hero-content .hero-actions { animation-delay: 230ms; }
.motion-enhanced .hero-content .hero-status { animation-delay: 300ms; }
.motion-enhanced .hero-picture img {
  animation: echo-photo 1.8s cubic-bezier(.16,1,.3,1) both;
}
.motion-enhanced .reveal.is-visible {
  animation: echo-enter .68s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms) both;
}
.steps-grid .step { position: relative; }
.steps-grid .step::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s linear;
}
.steps-grid .step.is-active::before,
.steps-grid .step.is-complete::before { transform: scaleX(1); }
.steps-grid .step.is-active .step-number { color: var(--blue); }
.motion-enhanced .steps-grid .step.is-active .step-top .icon {
  animation: echo-icon .8s ease-out;
}
.process-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 36px;
}
.process-replay {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  font-size: .77rem;
  font-weight: 600;
  color: var(--blue);
  background: #e9f1fa;
  border: 1px solid #d1e1f2;
  border-radius: 6px;
  transition: background .2s;
}
.process-replay:hover { background: #dbe9f9; }
.process-replay-mark {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  position: relative;
}
.process-replay-mark::after {
  content: "";
  width: 4px;
  height: 4px;
  border-bottom: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  position: absolute;
  right: -1px;
  top: -1px;
}
.steps-grid.is-playing + .process-controls .process-replay-mark {
  border: 0;
  border-radius: 0;
  width: 9px;
  height: 9px;
  background: currentColor;
}
.steps-grid.is-playing + .process-controls .process-replay-mark::after { display: none; }
.process-note { color: var(--muted); font-size: .75rem; }
.motion-enhanced .signal-intro .radar-ring,
.motion-enhanced .signal-visual.is-changing .radar-ring {
  animation: echo-ring .65s ease-out both;
}
.motion-enhanced .signal-intro .ring-two,
.motion-enhanced .signal-visual.is-changing .ring-two { animation-delay: .12s; }
.motion-enhanced .signal-intro .ring-three,
.motion-enhanced .signal-visual.is-changing .ring-three { animation-delay: .24s; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }
  .resource-link .circle-arrow { transition: transform .25s,background .2s,color .2s; }
  .resource-link:hover .circle-arrow { transform: rotate(8deg); }
}
@media (max-width:760px) {
  .process-controls { gap: 12px; margin-top: 24px; }
  .process-note { width: 100%; font-size: .73rem; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; }
  .hero-picture img { transform: none !important; }
}