/* ==========================================================================
   Tàu Hũ Tươi Phúc An — animations.css
   Animation tinh tế: fade, reveal khi scroll, float nhẹ cho ảnh hero.
   ========================================================================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatSoft {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

.hero__content {
  animation: fadeInUp 850ms var(--ease-premium) both;
}

.hero__media {
  animation: fadeInUp 950ms 150ms var(--ease-premium) both, floatSoft 7s 1.2s ease-in-out infinite;
}

/* Scroll reveal: phần tử mờ + hạ nhẹ + hơi thu nhỏ, hiện lên êm khi vào khung nhìn */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition: opacity 900ms var(--ease-premium), transform 900ms var(--ease-premium);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

[data-reveal='fade'] {
  transform: scale(0.98);
}

[data-reveal='fade'].is-visible {
  transform: scale(1);
}

/* Stagger cho các item trong lưới — nhịp chậm rãi, có chủ đích hơn */
[data-reveal-group] > * {
  transition-delay: calc(var(--reveal-index, 0) * 110ms);
}

@media (prefers-reduced-motion: reduce) {
  .hero__content,
  .hero__media {
    animation: none;
  }
}