/**
 * Hero motion — Design System V3
 * opacity + translateY ≤ 8px · tokens only · sem bounce
 */

:root {
  --hero-duration: var(--duration-normal);
  --hero-ease: var(--ease-out);
  --hero-stagger: 45ms;
}

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes hero-scroll-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.35;
  }

  50% {
    transform: scale(1.12);
    opacity: 0.12;
  }
}

/* Initial — above-the-fold starts quiet, then enters */
.hero:not(.animate-ready) .hero__title-primary,
.hero:not(.animate-ready) .hero__title-secondary,
.hero:not(.animate-ready) .hero__title-line,
.hero:not(.animate-ready) .hero__subtitle,
.hero:not(.animate-ready) .hero__actions,
.hero:not(.animate-ready) .hero__diagram {
  opacity: 0;
}

.hero:not(.animate-ready) .hero__title-primary,
.hero:not(.animate-ready) .hero__title-secondary,
.hero:not(.animate-ready) .hero__title-line,
.hero:not(.animate-ready) .hero__subtitle,
.hero:not(.animate-ready) .hero__actions {
  transform: translateY(10px);
}

@media (prefers-reduced-motion: reduce) {
  .hero:not(.animate-ready) .hero__title-primary,
  .hero:not(.animate-ready) .hero__title-secondary,
  .hero:not(.animate-ready) .hero__title-line,
  .hero:not(.animate-ready) .hero__subtitle,
  .hero:not(.animate-ready) .hero__actions,
  .hero:not(.animate-ready) .hero__diagram {
    opacity: 1;
    transform: none;
  }
}

.animate-ready .hero__title-primary {
  animation: hero-enter var(--hero-duration) var(--hero-ease) both;
}

.animate-ready .hero__title-secondary {
  animation: hero-enter var(--hero-duration) var(--hero-ease) calc(var(--hero-stagger) * 1) both;
}

.animate-ready .hero__subtitle {
  animation: hero-enter var(--hero-duration) var(--hero-ease) calc(var(--hero-stagger) * 2) both;
}

.animate-ready .hero__actions {
  animation: hero-enter var(--hero-duration) var(--hero-ease) calc(var(--hero-stagger) * 4) both;
}

.animate-ready .hero__diagram {
  animation: hero-fade var(--duration-slow) var(--hero-ease) calc(var(--hero-stagger) * 5) both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-ready .hero__title-primary,
  .animate-ready .hero__title-secondary,
  .animate-ready .hero__title-line,
  .animate-ready .hero__subtitle,
  .animate-ready .hero__actions,
  .animate-ready .hero__diagram {
    animation: none;
    opacity: 1;
    transform: none;
  }
}