/* ==========================================================================
   Tàu Hũ Tươi Phúc An — depth3d.css
   Hiệu ứng 3D/chiều sâu NHẸ, tập trung vào ảnh sản phẩm: tilt theo con trỏ
   (desktop), parallax nhẹ, micro-interaction khi bấm nút. Toàn bộ phần tilt
   chuột chỉ chạy trên thiết bị có chuột thật (xem tilt3d.js) — trên mobile,
   giao diện giữ nguyên đơn giản như cũ, KHÔNG thêm hiệu ứng chuột. Tất cả tự
   tắt khi khách bật prefers-reduced-motion.
   ========================================================================== */

/* ---------- Phối cảnh 3D cho khung ảnh (bật perspective ở phần tử cha) ---------- */
.hero__media {
  perspective: 900px;
}

.hero__media-frame {
  transform-style: preserve-3d;
  transition: transform 140ms ease-out, background-position 1.4s var(--ease-premium), box-shadow 240ms ease;
  will-change: transform;
}

.hero__media:hover .hero__media-frame {
  box-shadow: var(--shadow-lg), 0 30px 60px -20px rgba(0, 0, 0, 0.28);
}

.product-grid {
  perspective: 900px;
}

.product-card__media-frame {
  transform-style: preserve-3d;
  transition: transform 140ms ease-out, box-shadow var(--transition-base), background-position 900ms var(--ease-premium);
}

/* ---------- Micro-interaction khi bấm — phản hồi "chạm thật", giúp khách
   (đặc biệt khách lớn tuổi) biết chắc đã bấm trúng mà không cần nhìn kỹ. ---------- */
.btn,
.product-card__cta,
.account-toggle,
.theme-toggle,
.theme-fab,
.chat-fab,
.hamburger {
  transition: transform 120ms ease-out, background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.btn:active,
.account-toggle:active,
.theme-toggle:active,
.theme-fab:active,
.chat-fab:active,
.hamburger:active {
  transform: scale(0.94);
}

/* Nút CTA icon sản phẩm nhỏ hơn — nhấn sâu hơn 1 chút để phản hồi rõ ràng */
.product-card__cta:active {
  transform: scale(0.86);
}

@media (prefers-reduced-motion: reduce) {
  .hero__media-frame,
  .product-card__media-frame,
  .btn,
  .product-card__cta,
  .account-toggle,
  .theme-toggle,
  .theme-fab,
  .chat-fab,
  .hamburger {
    transition: none !important;
  }
}