/* ============================================================
   Added 2026-09-28 — moving previews (preview-tiles.js).
   Moved out of gallery.css so the gallery (index.html) and the four
   landing pages (film, tabletop, vfx, wallpaper) share one source.
   ============================================================ */

/* The preview clip on a first-wave browse tile or a featured tile
   (data-preview). The script inserts it as the tile's first child, so it
   sits over the still but under the browse label scrim (::before, z 1), the
   model chip (::after, z 1) and the label (z 2; featured tiles have no scrim).
   Hidden until it is really playing. Quick fade on hover; a slow one (.slow)
   when phones turn tiles on row by row and on the always-on featured tiles. */
.browse-tile > .preview-clip,
.featured-tile > .preview-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.browse-tile > .preview-clip.on,
.featured-tile > .preview-clip.on { opacity: 1; }
.browse-tile > .preview-clip.slow,
.featured-tile > .preview-clip.slow { transition-duration: 600ms; }
.featured-tile > .featured-tile-label { z-index: 2; }
/* The second featured four keep an <img> still (gallery.css). The clip is
   inserted before it, so it is lifted over the picture, under the label. */
.featured-tile-second > .preview-clip { z-index: 1; }