/* ===== Fade-up utility ===== */
.u-fade{
  --fx-x: 0;                /* translateX ban đầu */
  --fx-y: 16px;             /* translateY ban đầu (fade-up) */
  --fx-scale: 1;
  --fx-dur: .6s;
  --fx-ease: cubic-bezier(.22,.61,.36,1);
  opacity: 0;
  transform: translate3d(var(--fx-x), var(--fx-y), 0) scale(var(--fx-scale));
  transition:
    opacity var(--fx-dur) ease,
    transform var(--fx-dur) var(--fx-ease);
  will-change: opacity, transform;
   transition-delay: var(--fx-delay-extra, 0ms);
}

.u-fade.is-inview{
  opacity: 1;
  transform: none;
}

/* Hướng hiệu ứng nhanh bằng data-fx */
.u-fade[data-fx="up"]    { --fx-x: 0;    --fx-y: 16px; }
.u-fade[data-fx="down"]  { --fx-x: 0;    --fx-y: -16px; }
.u-fade[data-fx="left"]  { --fx-x: 16px; --fx-y: 0; }
.u-fade[data-fx="right"] { --fx-x: -16px;--fx-y: 0; }

/* Nhóm stagger: đặt trên container */
.u-fade{transition-delay:var(--fx-delay-extra,0ms)}
[data-stagger-group] .u-fade{transition-delay:calc(var(--stagger-step,80ms)*var(--i,0) + var(--fx-delay-extra,0ms))}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .u-fade{
    transition: opacity .2s linear;
    transform: none;
  }
}