/* ==========================================================================
   ANIMATIONS — shared keyframes & parallax/motion utility classes
   ========================================================================== */

.parallax {
  will-change: transform;
}

.magnetic-btn {
  transition: transform 350ms var(--ease-out);
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fade-in var(--dur-slow) var(--ease-out) both;
}

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

.rise {
  animation: rise var(--dur-slow) var(--ease-out) both;
}

@keyframes grow-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.grow-line {
  transform-origin: left;
  animation: grow-line 900ms var(--ease-out) both;
}

/* Sequential reveal-group children fade in with an index-based delay set via inline --stagger-index */
.reveal-group > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

.reveal-group.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-group > *,
  .hero__title .line span,
  .hero__copy,
  .hero__actions,
  .hero__meta,
  .mobile-menu__list a,
  .mobile-menu__cta,
  .mobile-menu__rule,
  .preloader__inner,
  .preloader__mark,
  .preloader__ring,
  .preloader__ring--2,
  .page-mask__inner,
  .page-mask__mark,
  .page-mask__ring,
  .page-mask__ring--2,
  .pillar.reveal::before,
  .pillar__index,
  .rams-step,
  .rams-step::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .parallax {
    transform: none !important;
  }

  .rams-step__inner {
    transition-duration: 1ms !important;
  }
}