@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* Duas luzes ambiente, com períodos diferentes (52s e 71s) para o trajeto nunca repetir de forma óbvia */
@keyframes light-a {
  0%, 100% { --l1x: 74%; --l1y: 36%; }
  25% { --l1x: 52%; --l1y: 16%; }
  50% { --l1x: 90%; --l1y: 70%; }
  75% { --l1x: 60%; --l1y: 88%; }
}

@keyframes light-b {
  0%, 100% { --l2x: 24%; --l2y: 80%; }
  33% { --l2x: 12%; --l2y: 34%; }
  66% { --l2x: 44%; --l2y: 22%; }
}

.hero-copy > * { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: 0.08s; }
.hero-copy > :nth-child(3) { animation-delay: 0.16s; }
.hero-copy > :nth-child(4) { animation-delay: 0.24s; }
.hero-copy > :nth-child(5) { animation-delay: 0.32s; }

.showcase { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }

.hero-bg { animation: light-a 52s ease-in-out infinite, light-b 71s ease-in-out infinite; }
.hero.is-idle .hero-bg { animation-play-state: paused; }

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--delay, 0ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}