/* DMDC entrance animations — kích hoạt khi cuộn tới (IntersectionObserver).
   Graceful degradation: chỉ ẩn phần tử KHI JS đã sẵn sàng (html.dmdc-anim-ready),
   nên nếu JS lỗi/không tải, nội dung vẫn hiển thị bình thường. */

.dmdc-anim-ready .dmdc-anim[data-anim] {
  opacity: 0;
  will-change: transform, opacity;
}

/* Trạng thái ban đầu theo từng kiểu */
.dmdc-anim-ready .dmdc-anim[data-anim="fade-up"]    { transform: translateY(40px); }
.dmdc-anim-ready .dmdc-anim[data-anim="fade-down"]  { transform: translateY(-40px); }
.dmdc-anim-ready .dmdc-anim[data-anim="fade-left"]  { transform: translateX(-40px); }
.dmdc-anim-ready .dmdc-anim[data-anim="fade-right"] { transform: translateX(40px); }
.dmdc-anim-ready .dmdc-anim[data-anim="zoom-in"]    { transform: scale(0.9); }
/* GĐ3 (05/07/2026): các kiểu mới */
.dmdc-anim-ready .dmdc-anim[data-anim="zoom-out"]   { transform: scale(1.08); }
.dmdc-anim-ready .dmdc-anim[data-anim="blur-in"]    { filter: blur(10px); }
.dmdc-anim-ready .dmdc-anim[data-anim="flip-up"]    { transform: perspective(600px) rotateX(14deg) translateY(24px); }
.dmdc-anim-ready .dmdc-anim[data-anim="slide-big"]  { transform: translateY(80px); }

/* Khi vào viewport */
.dmdc-anim.dmdc-anim-in {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Tôn trọng người dùng tắt hiệu ứng chuyển động */
@media (prefers-reduced-motion: reduce) {
  .dmdc-anim-ready .dmdc-anim[data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ============================================================
   MỞ RỘNG cho trang chi tiết sản phẩm (editorial / Drunk Elephant)
   Tất cả tôn trọng prefers-reduced-motion, nhẹ CPU (chỉ transform/opacity).
   ============================================================ */

/* ---- STAGGER: khối cha .dmdc-stagger, con .dmdc-stagger-item hiện lần lượt ---- */
.dmdc-anim-ready .dmdc-stagger .dmdc-stagger-item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: transform, opacity;
}
.dmdc-stagger.dmdc-anim-in .dmdc-stagger-item { opacity: 1; transform: none; }
.dmdc-stagger.dmdc-anim-in .dmdc-stagger-item:nth-child(1)  { transition-delay: .05s; }
.dmdc-stagger.dmdc-anim-in .dmdc-stagger-item:nth-child(2)  { transition-delay: .13s; }
.dmdc-stagger.dmdc-anim-in .dmdc-stagger-item:nth-child(3)  { transition-delay: .21s; }
.dmdc-stagger.dmdc-anim-in .dmdc-stagger-item:nth-child(4)  { transition-delay: .29s; }
.dmdc-stagger.dmdc-anim-in .dmdc-stagger-item:nth-child(5)  { transition-delay: .37s; }
.dmdc-stagger.dmdc-anim-in .dmdc-stagger-item:nth-child(6)  { transition-delay: .45s; }
.dmdc-stagger.dmdc-anim-in .dmdc-stagger-item:nth-child(7)  { transition-delay: .53s; }
.dmdc-stagger.dmdc-anim-in .dmdc-stagger-item:nth-child(8)  { transition-delay: .61s; }
.dmdc-stagger.dmdc-anim-in .dmdc-stagger-item:nth-child(9)  { transition-delay: .69s; }
.dmdc-stagger.dmdc-anim-in .dmdc-stagger-item:nth-child(10) { transition-delay: .77s; }
.dmdc-stagger.dmdc-anim-in .dmdc-stagger-item:nth-child(11) { transition-delay: .85s; }
.dmdc-stagger.dmdc-anim-in .dmdc-stagger-item:nth-child(12) { transition-delay: .93s; }

/* ---- PARALLAX: JS đặt transform theo cuộn (data-parallax="0.35") ---- */
.dmdc-parallax { will-change: transform; }

/* ---- STICKY COLUMN: ghim cột. Mặc định (sticky_on='desktop'): ghim ≥992px, tắt <992px. ---- */
@media (max-width: 991.98px) {
  .dmdc-sticky-col { position: static !important; top: auto !important; }
  /* sticky_on='all': giữ ghim cả trên mobile (offset từ --dmdc-sticky-top do engine đặt) */
  .dmdc-sticky-col.dmdc-sticky-all { position: sticky !important; top: var(--dmdc-sticky-top, 24px) !important; }
}
@media (min-width: 992px) {
  /* sticky_on='mobile': chỉ ghim trên mobile → bỏ ghim ở desktop */
  .dmdc-sticky-col.dmdc-sticky-mobile { position: static !important; top: auto !important; }
}

/* ---- MŨI TÊN CUỘN XUỐNG (hero) ---- */
@keyframes dmdc-bounce-arrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(10px); }
}
.dmdc-bounce-arrow { animation: dmdc-bounce-arrow 1.6s ease-in-out infinite; }

/* ---- CHẤM HOTSPOT THÀNH PHẦN (pulse) ---- */
@keyframes dmdc-hotspot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--dmdc-pulse-rgb, 26,95,171), .55); }
  70%  { box-shadow: 0 0 0 16px rgba(var(--dmdc-pulse-rgb, 26,95,171), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--dmdc-pulse-rgb, 26,95,171), 0); }
}
.dmdc-hotspot-dot--pulse { animation: dmdc-hotspot-pulse 2.1s ease-out infinite; }

/* ---- SPRITE 360° (widget đặt --dmdc-frames + steps qua inline style/animation) ---- */
.dmdc-sprite-360 { background-repeat: no-repeat; background-position: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .dmdc-anim-ready .dmdc-stagger .dmdc-stagger-item { opacity: 1 !important; transform: none !important; }
  .dmdc-parallax { transform: none !important; }
  .dmdc-bounce-arrow, .dmdc-hotspot-dot--pulse, .dmdc-sprite-360 { animation: none !important; }
}