/* Estados iniciais da entrada do hero. Só valem com JS e sem redução de movimento;
   a animação de segurança revela tudo se o GSAP não carregar. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-hero],
  .js [data-hero-window],
  .js [data-hero-agent],
  .js [data-hero-card],
  .js [data-hero-zepp] {
    opacity: 0;
    animation: hero-safety 0s linear 2.5s forwards;
  }
  .js.motion-ready [data-hero],
  .js.motion-ready [data-hero-window],
  .js.motion-ready [data-hero-agent],
  .js.motion-ready [data-hero-card],
  .js.motion-ready [data-hero-zepp] { animation: none; }
}
@keyframes hero-safety { to { opacity: 1; } }

/* Peneira: etapa ainda não alcançada pela linha. */
.step.is-dim .step-dot:not(.step-dot-branch) {
  background: var(--color-ink);
  color: var(--color-on-ink-muted);
  border-color: var(--color-line-on-ink);
}