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

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

/* ---------- ATF Keyframe Animation Mode ---------- */
@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;
}

/* ---------- BTF Scroll-Triggered Transition Mode ---------- */
.animate.btf {
  opacity: 0;
  transform: var(--start-transform, none);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--anim-duration, 0.6s) var(--anim-ease, ease-out),
    transform var(--anim-duration, 0.6s) var(--anim-ease, ease-out);
}

.animate.btf.is-visible {
  opacity: 1;
  transform: var(--end-transform, none);
  visibility: visible;
  pointer-events: auto;
}

/* ---------- Animation Variants ---------- */

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

/* Zoom Fade Up */
.zoom-fade-up {
  --start-transform: scale(var(--zoomIn-scale, 0.95)) translateY(var(--fadeUp-distance, 24px));
  --end-transform: scale(1) translateY(0);
}

/* Slide In Right */
.slide-in-right {
  --start-transform: translateX(var(--slideRight-distance, 32px));
  --end-transform: none;
}

/* Slide In Left */
.slide-in-left {
  --start-transform: translateX(calc(-1 * var(--slideRight-distance, 32px)));
  --end-transform: none;
}

/* ---------- Mobile Adjustments ---------- */
@media (max-width: 768px) {
  .fade-up,
  .zoom-fade-up {
    --fadeUp-distance: 16px;
  }
  .zoom-fade-up {
    --zoomIn-scale: 0.975;
  }
  .slide-in-right {
    --slideRight-distance: 16px;
  }
  .slide-in-left {
    --slideRight-distance: 16px;
  }
}

/* ---------- Delay Utilities ---------- */
.delay-1 { --anim-delay: 0.1s; transition-delay: 0.1s; }
.delay-2 { --anim-delay: 0.2s; transition-delay: 0.2s; }
.delay-3 { --anim-delay: 0.3s; transition-delay: 0.3s; }
.delay-4 { --anim-delay: 0.4s; transition-delay: 0.4s; }
.delay-5 { --anim-delay: 0.5s; transition-delay: 0.5s; }

/* ---------- Accessibility: Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .animate {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    animation: none !important;
    transition: none !important;
  }
  .delay-1,
  .delay-2,
  .delay-3,
  .delay-4,
  .delay-5 {
    transition-delay: 0s !important;
  }
}