/**
 * Filmlook.vn — Cụm thẻ 3D khối "Giới thiệu": chờ đủ ảnh rồi mới hiện.
 *
 * Vì sao cả cụm phải ẩn chứ không hiện từng thẻ: ảnh nằm ở CDN ngoài, ba thẻ
 * về không cùng lúc. Hiện khung trước thì khách thấy ba ô sọc rỗng rồi ảnh mới
 * lần lượt nhảy vào — đúng cảnh người dùng phàn nàn. Ở đây cả cụm giữ ẩn, khi
 * đủ ba ảnh báo tải xong (hoặc quá mốc an toàn 2,5 giây) mới mờ dần vào một
 * lượt, ảnh đã sẵn sàng nên không còn ô trống nào.
 *
 * Để không phải nhìn mảng đen trong lúc chờ, ba ảnh này dùng ngưỡng lazy rộng
 * hơn (900px thay vì 320px — xem `MARGIN_EARLY` trong js/lazy-media.js): bắt
 * đầu tải khi cụm còn cách hơn một màn hình, nên lúc khách cuộn tới thì thường
 * đã xong.
 *
 * Mọi quy tắc ẩn đều nằm dưới `:root.reveal-on` (lớp do js/reveal.js gắn), nên
 * JS hỏng thì cụm hiện bình thường chứ không biến mất.
 */

:root.reveal-on .intro3d-stage-wrap {
  opacity: 0;
  transition: opacity .5s ease;
}

:root.reveal-on .intro3d-stage-wrap.is-shots-ready { opacity: 1; }

/* Từng ảnh: dùng khi ảnh về SAU lúc cụm đã hiện (mạng chậm, quá mốc an toàn). */
@keyframes intro3d-photo-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.intro3d-card.is-revealed .intro3d-img {
  animation: intro3d-photo-in .5s ease both;
}

@media (prefers-reduced-motion: reduce) {
  :root.reveal-on .intro3d-stage-wrap { opacity: 1; transition: none; }
  .intro3d-card.is-revealed .intro3d-img { animation: none; }
}