/* Shared hover previews: 10% grain, first-frame reveal and pause/resume. */
.figure:has(> .hover-preview) {
    isolation: isolate;
}
.hover-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    opacity: 0;
    transition: opacity 350ms ease-in-out;
}
.hover-preview.is-playing {
    opacity: 1;
}

.grain-figure { overflow: hidden; }
.grain-overlay {
    position: absolute;
    inset: -128px;
    z-index: 1;
    pointer-events: none;
    background-image: url('../img/thumbnails/trailers/preview-grain.png');
    background-repeat: repeat;
    background-size: 128px 128px;
    mix-blend-mode: soft-light;
    opacity: 0;
    animation: preview-grain-shift 200ms steps(1, end) infinite;
    animation-play-state: paused;
}
.hover-preview.is-playing + .grain-overlay {
    opacity: var(--preview-grain, 0.08);
    animation-play-state: running;
    will-change: transform;
}
@keyframes preview-grain-shift {
    0% { transform: translate3d(0, 0, 0); }
    20% { transform: translate3d(43px, -27px, 0); }
    40% { transform: translate3d(-19px, 61px, 0); }
    60% { transform: translate3d(71px, 13px, 0); }
    80% { transform: translate3d(-53px, -39px, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .grain-overlay { animation: none; }
}

/* All clickable preview tiles use the same hand cursor, with or without a GIF. */
.video-thumb { cursor: pointer; }