[data-anim] {
  --a-dur: .8s;
  /* duration */
  --a-delay: 0s;
  /* delay */
  --a-ease: cubic-bezier(.22, .61, .36, 1);
  /* easeOut */
  opacity: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

/* Variants */
[data-anim="up"] {
  transform: translateY(50px);
}

[data-anim="down"] {
  transform: translateY(-50px);
}

[data-anim="left"] {
  transform: translateX(-40px);
}

[data-anim="right"] {
  transform: translateX(40px);
}

[data-anim="scale"] {
  transform: scale(.96);
}

[data-anim="fade"] {
  transform: none;
}

/* Active state when in view */
.is-inview {
  opacity: 1 !important;
  transform: none !important;
  transition: transform var(--a-dur) var(--a-ease),
    opacity var(--a-dur) var(--a-ease);
  transition-delay: var(--a-delay);
}

/* Stagger container (áp cho children có [data-anim]) */
[data-stagger]>[data-anim] {
  --a-delay: calc(var(--stagger-i, 0) * var(--stagger-step, 90ms));
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  [data-anim] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===== Counter style (tùy chọn) */
.counter {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

[data-anim] {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}

@media (min-width:1024px) {
  [data-anim] {
    transform: translateY(32px);
  }
}

[data-anim].is-in {
  opacity: 1;
  transform: none;
}