.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard);
}

.reveal--visible {
  opacity: 1;
  transform: none;
}

/* Broad, fading ribbons replace the moving dashed paths. */
.hero__light-band { animation: light-band-drift 18s ease-in-out infinite; }
.hero__light-band--b { animation-delay: -6s; animation-duration: 22s; }
.hero__light-band--c { animation-delay: -12s; animation-duration: 26s; }
@keyframes light-band-drift {
  0%, 100% { opacity: 0; transform: translate3d(-8%, 10px, 0) rotate(-12deg); }
  35% { opacity: .3; }
  65% { opacity: .16; }
  90% { opacity: 0; transform: translate3d(8%, -24px, 0) rotate(-12deg); }
}

.hero__glow {
  animation: glow-drift 12s ease-in-out infinite alternate;
}

.hero__glow--b {
  animation-duration: 16s;
}

@keyframes glow-drift {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-16px, 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero__light-band,
  .hero__glow {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) { .hero__light-band { animation: none !important; opacity: .12; } }