@charset "utf-8";
/* CSS Document */

/* Base Animation Setup */
.animate {
  opacity: 0;
  visibility: hidden;
  transform: var(--start-transform, none);
  will-change: opacity, transform;
}

/* ATF Keyframes */
@keyframes animateIn {
  from {
    opacity: 0;
    transform: var(--start-transform, none);
    visibility: hidden;
  }
  to {
    opacity: 1;
    transform: var(--end-transform, none);
    visibility: visible;
  }
}

.animate.atf {
  animation: animateIn var(--anim-duration, 0.6s) var(--anim-ease, ease-out) var(--anim-delay, 0s) forwards;
}

/* Fade In Animation */
.fade-in {
  --start-transform: none;
  --end-transform: none;
}

/* Fade Up Animation */
.fade-up {
  --start-transform: translateY(var(--fadeUp-distance, 24px));
  --end-transform: none;
}

/* Mobile Adjustment */
@media (max-width: 768px) {
  .fade-up {
    --fadeUp-distance: 16px;
  }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .animate {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    animation: none !important;
    transition: none !important;
  }
}