/**
 * Bladevel — Slide Studio
 * Hiệu ứng chuyển slide "Zoom 3D" — xem file JS:
 * public/assets/js/slide-fx-3d-zoom.js
 *
 * File này CHỈ chứa CSS cần cho hiệu ứng này — không đụng tới slide-fx.css /
 * slide-studio.css sẵn có. Nạp SAU slide-fx.css, TRƯỚC slide-studio.js.
 * Mọi class ở đây đều do JS tự thêm lúc bắt đầu chạy và tự gỡ khi xong.
 *
 * NGUYÊN TẮC HIỆU NĂNG (giống hiệu ứng Điện ảnh): mọi thứ chuyển động chỉ dùng
 * transform/opacity (GPU). KHÔNG animate filter / box-shadow / mix-blend-mode.
 * Bóng đổ là 1 lớp RIÊNG có box-shadow cố định, chỉ bị dịch chuyển theo thẻ.
 */

/* ---------------------------------------------------------------------
   1) Khung chứa lúc đang chạy: cắt phần tràn (thẻ bay ra ngoài mép) và tạo
      stacking context riêng để z-index của nền/bóng/thẻ không lẫn ra ngoài.
      KHÔNG đặt perspective ở đây: mỗi thẻ đã mang sẵn phép chiếu phối cảnh
      trong ma trận của nó, để 2 thẻ luôn nhìn từ CÙNG 1 camera.
   --------------------------------------------------------------------- */
.tw-z3d-playing {
  overflow: hidden;
  isolation: isolate;
}

/* ---------------------------------------------------------------------
   2) "Căn phòng" phía sau các thẻ. Rộng hơn khung 160% (inset âm) để khi
      camera trượt/lùi và nền trôi lệch (parallax) nhẹ, mép nền không bao giờ lộ.
      Sáng/tối được JS chọn theo độ sáng nền của 2 slide.
   --------------------------------------------------------------------- */
.tw-z3d-bg {
  position: absolute;
  inset: -30%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}
.tw-z3d-light {
  background:
    radial-gradient(58% 52% at 50% 44%, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(158deg, #d9e0ee 0%, #b4c0d8 52%, #94a3c2 100%);
}
.tw-z3d-dark {
  background:
    radial-gradient(58% 52% at 50% 44%, rgba(88, 116, 204, .30) 0%, rgba(88, 116, 204, 0) 72%),
    linear-gradient(158deg, #151c30 0%, #0b101d 58%, #04060c 100%);
}

/* 2 vòng cung lớn mờ nhạt — cho căn phòng có chiều sâu, không phẳng. */
.tw-z3d-arc {
  position: absolute;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1.5px solid transparent;
  pointer-events: none;
}
.tw-z3d-arc-a { width: 44%; right: 8%; top: 2%; }
.tw-z3d-arc-b { width: 60%; left: -6%; bottom: -16%; }
.tw-z3d-light .tw-z3d-arc { border-color: rgba(255, 255, 255, .5); }
.tw-z3d-dark  .tw-z3d-arc { border-color: rgba(128, 156, 236, .16); }

/* ---------------------------------------------------------------------
   3) Bóng đổ = lớp RIÊNG nằm ngay dưới mỗi thẻ, cùng kích thước / cùng ma trận /
      cùng bo góc với thẻ (JS đặt width/height và animate transform + opacity).
      Thẻ phủ kín thân lớp này, nên chỉ phần box-shadow ló ra quanh mép thẻ.
   --------------------------------------------------------------------- */
.tw-z3d-shadow {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.tw-z3d-shadow-light {
  background: rgba(40, 54, 90, .5);
  box-shadow:
    0 36px 84px -12px rgba(36, 50, 86, .58),
    0 10px 28px rgba(36, 50, 86, .26);
}
.tw-z3d-shadow-dark {
  background: #000;
  box-shadow:
    0 36px 96px -12px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(140, 166, 240, .12),
    0 0 64px rgba(72, 102, 210, .2);
}

/* ---------------------------------------------------------------------
   4) Thẻ (slide cũ / slide mới) khi đang bay: giữ nguyên vị trí trong luồng
      (KHÔNG đổi position — khung chứa còn cần kích thước của thẻ), chỉ
      - ẩn mặt sau (để "lật thẻ 180°" chỉ thấy mặt đang quay về phía camera),
      - bỏ bóng riêng của khung trình chiếu (đã có lớp bóng ở trên, khỏi bị đè 2 lớp).
   --------------------------------------------------------------------- */
.tw-z3d-playing .tw-z3d-card {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
  box-shadow: none;
}

/* Vệt sáng lướt qua mặt thẻ lúc bay. Nằm TRONG thẻ (thẻ có overflow: hidden +
   bo góc nên tự bị cắt gọn). Rộng ~60% thẻ: JS trượt từ −130% sang +130% bề rộng
   của chính vệt, tâm vệt đi từ ngoài mép trái sang ngoài mép phải. */
.tw-z3d-shine {
  position: absolute;
  top: -12%;
  bottom: -12%;
  left: 0;
  width: 60%;
  z-index: 50;
  pointer-events: none;
  will-change: transform, opacity;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .10) 32%,
    rgba(255, 255, 255, .50) 50%,
    rgba(255, 255, 255, .10) 68%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Ghi chú: KHÔNG rút ngắn / tắt theo prefers-reduced-motion — đây là hiệu ứng
   giáo viên chủ động chọn cho bài giảng (xem ghi chú trong file JS). */