/**
 * Bladevel — Slide Studio
 * CSS cho hiệu ứng 3D của ẢNH lúc trình chiếu — vừa NGHIÊNG NỀN mặc định
 * (luôn bật, mỗi ảnh 1 góc riêng) + bóng đổ nhẹ phía sau, vừa nghiêng THÊM
 * theo chuột khi rê vào — xem file JS: public/assets/js/slide-hover-3d.js
 *
 * Cách hoạt động: JS chỉ đổi giá trị `transform`/`box-shadow`/`filter` bằng
 * inline style; phần MƯỢT (nội suy giữa 2 giá trị, kể cả lúc dựng slide lần
 * đầu — ảnh "nổi" nhẹ nhàng lên đúng góc nghiêng nền chứ không bật phựt ra)
 * hoàn toàn do CSS transition dưới đây đảm nhiệm — không cần vòng lặp
 * animate() nào ở JS, nhẹ máy và mượt tự nhiên theo chuyển động chuột thật.
 */

/* Chỉ cần áp dụng cho .tws-el-inner của phần tử ẢNH lúc TRÌNH CHIẾU — chọn
   theo cấu trúc DOM thật (.tws-el-image > .tws-el-inner) để không ảnh hưởng
   canvas soạn thảo (nơi có thể có class trùng nhưng không nằm trong
   .tws-present-stage). */
.tws-present-stage .tws-el-image > .tws-el-inner {
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, filter .35s ease;
  transform-style: preserve-3d;
  will-change: transform, box-shadow, filter;
}

@media (prefers-reduced-motion: reduce) {
  /* Đây là hiệu ứng TƯƠNG TÁC theo chuột thật (không phải chuyển động nền tự
     chạy), nên không tắt hẳn nghiêng 3D — ảnh vẫn nghiêng đúng theo vị trí
     chuột (và vẫn giữ nghiêng nền mặc định), chỉ bỏ bước "nội suy mượt" giữa
     các khung hình (tránh chuyển động dư thừa ngoài ý muốn của người xem),
     tôn trọng lựa chọn hạn chế chuyển động của họ mà vẫn giữ được hiệu ứng
     có ý nghĩa. */
  .tws-present-stage .tws-el-image > .tws-el-inner {
    transition: none;
  }
}