/* Animation Fallback for sections (on-scroll)
   - Chỉ chạy khi vào viewport (class .in-view)
   - Hỗ trợ .wow / .perch-* / .fadeIn*
   - Tôn trọng prefers-reduced-motion
   - Chỉ ẩn trước khi vào viewport nếu JS đã bật (html.scroll-anim-enabled)
*/

/* Trạng thái trước khi vào viewport - Giảm specificity */
.scroll-anim-enabled .wow,
.scroll-anim-enabled .perch-fadeInUp,
.scroll-anim-enabled .perch-fadeInRight,
.scroll-anim-enabled .perch-fadeInLeft,
.scroll-anim-enabled .fadeInUp,
.scroll-anim-enabled .fadeInRight,
.scroll-anim-enabled .fadeInLeft {
  opacity: 0;
  transform: translate3d(0, var(--spacing-lg), 0);
  transition: opacity var(--transition-slow) ease-out, transform var(--transition-slow) ease-out;
}

/* Fade In Up khi vào viewport */
.scroll-anim-enabled .fadeInUp.in-view,
.scroll-anim-enabled .perch-fadeInUp.in-view,
.scroll-anim-enabled .wow.fadeInUp.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Fade In Right khi vào viewport */
.scroll-anim-enabled .fadeInRight.in-view,
.scroll-anim-enabled .perch-fadeInRight.in-view,
.scroll-anim-enabled .wow.fadeInRight.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Fade In Left khi vào viewport */
.scroll-anim-enabled .fadeInLeft.in-view,
.scroll-anim-enabled .perch-fadeInLeft.in-view,
.scroll-anim-enabled .wow.fadeInLeft.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Tắt animation nếu người dùng chọn giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  .scroll-anim-enabled .wow,
  .scroll-anim-enabled .perch-fadeInUp,
  .scroll-anim-enabled .perch-fadeInRight,
  .scroll-anim-enabled .perch-fadeInLeft,
  .scroll-anim-enabled .fadeInUp,
  .scroll-anim-enabled .fadeInRight,
  .scroll-anim-enabled .fadeInLeft {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .scroll-anim-enabled .wow,
  .scroll-anim-enabled .perch-fadeInUp,
  .scroll-anim-enabled .perch-fadeInRight,
  .scroll-anim-enabled .perch-fadeInLeft,
  .scroll-anim-enabled .fadeInUp,
  .scroll-anim-enabled .fadeInRight,
  .scroll-anim-enabled .fadeInLeft {
    opacity: 0.9;
  }
}

/* Print Styles */
@media print {
  .scroll-anim-enabled .wow,
  .scroll-anim-enabled .perch-fadeInUp,
  .scroll-anim-enabled .perch-fadeInRight,
  .scroll-anim-enabled .perch-fadeInLeft,
  .scroll-anim-enabled .fadeInUp,
  .scroll-anim-enabled .fadeInRight,
  .scroll-anim-enabled .fadeInLeft {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}