/* ==========================================================================
   Animations
   - Hero: CSS entrance on page load (no flash above the fold).
   - Everything below: AOS (vendor/aos), attributes are added from js/main.js.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero entrance. Runs only with JS ("js" class is set in <head> before paint)
   -------------------------------------------------------------------------- */
@keyframes lati-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
}

@keyframes lati-fade-scale {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

.js .hero__main > *,
.js .hero__disclaimer {
  animation: lati-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.js .hero__main > :nth-child(1) { animation-delay: 0.05s; }
.js .hero__main > :nth-child(2) { animation-delay: 0.15s; }
.js .hero__main > :nth-child(3) { animation-delay: 0.25s; }
.js .hero__main > :nth-child(4) { animation-delay: 0.35s; }
.js .hero__main > :nth-child(5) { animation-delay: 0.45s; }
.js .hero__disclaimer { animation-delay: 0.55s; }

.js .hero-slider {
  animation: lati-fade-scale 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both;
}

/* --------------------------------------------------------------------------
   AOS keeps its own transition on animated elements, which would replace the
   hover / highlight transitions of interactive cards. Put both back together.
   -------------------------------------------------------------------------- */
.learn-card[data-aos].aos-animate,
.fw-card[data-aos].aos-animate,
.faq-item[data-aos].aos-animate {
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    color 0.35s var(--ease);
}

.payoff-step[data-aos].aos-animate {
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.3s var(--ease);
}

.speaker__link[data-aos].aos-animate {
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    color 0.2s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .js .hero__main > *,
  .js .hero__disclaimer,
  .js .hero-slider {
    animation: none;
  }
}