/* ===================================================== */
/* REVEAL ANIMATIONS                                     */
/* Hiệu ứng hiện dần khi scroll tới phần tử.             */
/* JavaScript sẽ thêm class .is-visible để chạy hiệu ứng. */
/* ===================================================== */

/* Trạng thái ban đầu: phần tử bị ẩn nhẹ và dịch xuống */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 720ms ease,
    transform 720ms ease;
}

/* Trạng thái sau khi JS thêm .is-visible */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Biến thể reveal từ bên trái */
.reveal-left {
  transform: translateX(-26px);
}

/* Biến thể reveal từ bên phải */
.reveal-right {
  transform: translateX(26px);
}

/* Khi visible, cả reveal-left và reveal-right trở về đúng vị trí */
.reveal-left.is-visible,
.reveal-right.is-visible {
  transform: translateX(0);
}


/* ===================================================== */
/* STEAM EFFECT                                          */
/* Hiệu ứng khói / hơi nóng bốc lên từ món ăn.           */
/* Dùng bằng cách tạo div.steam chứa nhiều span bên trong. */
/* ===================================================== */

/* Container của hiệu ứng khói.
   pointer-events: none để không chặn click vào nút/link bên dưới. */
.steam {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Mỗi span là một làn khói riêng */
.steam span {
  position: absolute;
  bottom: 28%;
  width: 86px;
  height: 150px;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.34),
      transparent 62%
    );
  filter: blur(10px);
  opacity: 0;
  animation: steamRise 7.5s ease-in-out infinite;
}

/* Vị trí và thời gian trễ khác nhau để khói nhìn tự nhiên hơn */
.steam span:nth-child(1) {
  left: 45%;
  animation-delay: 0s;
}

.steam span:nth-child(2) {
  left: 57%;
  animation-delay: 1.9s;
}

.steam span:nth-child(3) {
  left: 69%;
  animation-delay: 3.4s;
}


/* ===================================================== */
/* KEYFRAMES                                             */
/* Các animation dùng chung trong website.               */
/* ===================================================== */

/* Khói bay từ dưới lên, mờ dần khi lên cao */
@keyframes steamRise {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
  }

  24% {
    opacity: 0.42;
  }

  100% {
    opacity: 0;
    transform: translateY(-110px) scale(1.24);
  }
}

/* Hiệu ứng sóng lan ra, thường dùng cho nút hoặc điểm nhấn */
@keyframes ripple {
  0% {
    opacity: 0.42;
    transform: scale(0);
  }

  100% {
    opacity: 0;
    transform: scale(4.2);
  }
}

/* Hiệu ứng nổi nhẹ lên xuống, dùng cho card/icon trang trí */
@keyframes floatSoft {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}


/* ===================================================== */
/* REDUCED MOTION                                        */
/* Tôn trọng cài đặt giảm chuyển động của người dùng.    */
/* Nếu khách bật reduce motion, gần như tắt animation.   */
/* ===================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}