/**
 * Filmlook.vn — Trạng thái Loading dùng chung cho khu vực ảnh.
 * Dùng cho ảnh trỏ qua CDN ngoài (Behance/Cloudinary/Unsplash/Supabase Storage)
 * để tránh mảng đen/trắng khi ảnh chưa tải xong.
 *
 * An toàn khi JS lỗi/chưa chạy: ảnh mặc định LUÔN hiển thị bình thường
 * (opacity 1) — chỉ khi JS chủ động thêm class "is-loading" thì ảnh mới
 * tạm ẩn hoàn toàn (opacity:0) và hiện hiệu ứng chờ thay thế; ảnh chỉ hiện
 * lại (mờ dần mượt) khi đã tải xong hẳn. Ẩn hẳn thay vì mờ 1 phần để tránh
 * icon "ảnh vỡ" mặc định của trình duyệt (đặc biệt Safari/iOS) lộ ra khi
 * ảnh còn đang tải — icon đó không bị mờ theo opacity của thẻ <img>.
 * Không có class nào ẩn ảnh hoàn toàn theo mặc định khi JS chưa chạy.
 *
 * 2 biến thể:
 *  .media-skel  → khối lớn (gallery chính, before/after, preview tài nguyên): shimmer quét sáng.
 *  .media-spin  → khối nhỏ (thumbnail lưới danh sách): spinner tròn nhỏ ở giữa.
 * Thêm modifier "--dark" khi nền khu vực là màu tối (#101010/#111/#0d0d0d).
 */

.media-skel,.media-spin{position:relative}
.media-skel img,.media-spin img{transition:opacity .22s ease}
.media-skel.is-loading img{opacity:0}
.media-spin.is-loading img{opacity:0}

/* ---- Skeleton shimmer (khối lớn) ---- */
.media-skel::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.42) 48%,transparent 72%);
  background-size:220% 100%;transition:opacity .18s ease;
}
.media-skel--dark::after{
  background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.16) 48%,transparent 72%);
  background-size:220% 100%;
}
.media-skel.is-loading::after{opacity:1;animation:media-skel-sweep 1.15s linear infinite}
@keyframes media-skel-sweep{to{background-position-x:-220%}}

/* ---- Spinner (khối nhỏ) ---- */
.media-spin::after{
  content:"";position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;
  border-radius:50%;border:2px solid rgba(0,0,0,.14);border-top-color:rgba(0,0,0,.55);
  opacity:0;pointer-events:none;
}
.media-spin--dark::after{border-color:rgba(255,255,255,.2);border-top-color:rgba(255,255,255,.8)}
.media-spin.is-loading::after{opacity:1;animation:media-spin-rotate .75s linear infinite}
@keyframes media-spin-rotate{to{transform:rotate(360deg)}}

/* ---- Trạng thái lỗi (ảnh chết/hotlink bị chặn): không icon vỡ mặc định ---- */
.media-skel.is-error img,.media-spin.is-error img{opacity:0}
.media-skel.is-error,.media-spin.is-error{background:#e2ded4}
.media-skel--dark.is-error,.media-spin--dark.is-error{background:#232323}
.media-skel.is-error::after,.media-spin.is-error::after{display:none}
.media-skel.is-error::before,.media-spin.is-error::before{
  content:"";position:absolute;inset:0;margin:auto;width:30px;height:30px;opacity:.38;
  background:currentColor;color:#9a9488;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>') center/28px no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>') center/28px no-repeat;
}
.media-skel--dark.is-error::before,.media-spin--dark.is-error::before{color:#6f6f6f}

@media(prefers-reduced-motion:reduce){
  .media-skel.is-loading::after{animation:none}
  .media-spin::after{animation:none}
}