/**
 * Bladevel — Slide Studio
 * Hiệu ứng chuyển slide "Điện ảnh — Match & Move" — xem file JS:
 * public/assets/js/slide-fx-cinematic-match-move.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.
 *
 * NGUYÊN TẮC HIỆU NĂNG của bản nâng cấp: mọi thứ chuyển động ở đây chỉ dùng
 * transform/opacity (GPU). KHÔNG dùng mix-blend-mode trên lớp phủ lớn (buộc
 * trình duyệt trộn màu cả màn hình ở mỗi khung hình) và KHÔNG animate
 * filter/box-shadow (buộc vẽ lại từng khung hình). KHÔNG có lớp phủ tối/hạt phim.
 */

/* ---------------------------------------------------------------------
   1) Khung chứa lúc đang chạy hiệu ứng: chỉ bật khung nhìn 3D. Class này được
      JS tự thêm vào lúc bắt đầu chạy và tự gỡ khi xong.
      CỐ Ý KHÔNG có lớp phủ hạt phim / viền tối 4 góc (vignette): lớp đó làm mép
      trên, dưới và 2 bên slide tối đi trong lúc chuyển rồi "bật" sáng lại ở cuối,
      trông như bị đổ bóng — slide phải luôn sạch, đúng màu nền.
   --------------------------------------------------------------------- */
.tw-cinematic-playing {
  overflow: hidden;
  perspective: 1600px;
}

/* ---------------------------------------------------------------------
   2) Bản "bay" (clone) của ảnh / khối — chỉ khai will-change: transform (chỉ
      transform được animate; left/top/width/height đặt cố định).
   --------------------------------------------------------------------- */
.tw-cine-floater {
  will-change: transform;
  backface-visibility: hidden;
}

/* Bóng đổ = lớp RIÊNG nằm sau ảnh (z-index -1 trong stacking context của bản
   bay), animate transform/opacity để "nhấc lên rồi hạ xuống". box-shadow của
   lớp này KHÔNG đổi nên chỉ vẽ 1 lần rồi GPU dịch chuyển. */
.tw-cine-lift {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Vệt sáng lướt qua — nằm TRONG .tws-el-inner (overflow: hidden) nên tự bị cắt
   đúng khung ảnh. Trộn màu bình thường (không mix-blend-mode: screen) — vẫn
   sáng nhờ màu trắng ấm + độ đục cao ở giữa vệt. */
.tw-cine-glare {
  position: absolute;
  inset: -45% -80%;
  z-index: 6;
  pointer-events: none;
  will-change: transform, opacity;
  background: linear-gradient(
    105deg,
    rgba(255, 250, 225, 0) 36%,
    rgba(255, 250, 225, .10) 43%,
    rgba(255, 250, 225, .62) 50%,
    rgba(255, 250, 225, .10) 57%,
    rgba(255, 250, 225, 0) 64%
  );
}

/* Chữ/bảng khi bay: KHÔNG scale — bản sao chữ cũ chỉ trượt (translate) + mờ đi,
   chữ mới (phần tử thật) trượt vào + mờ hiện, cả hai luôn đúng cỡ chữ thật.
   Chỉ animate transform/opacity bằng JS (WAAPI), không cần class CSS riêng. */

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