/* =============================================================
   Hover Play — the moving preview layer

   The layer sits inside .post-thumbnail-inner, the box Kadence
   has already sized to the tile's ratio, so it lines up with the
   still whether or not the hover overlay is on. Above the image,
   below .entry-content-wrap — the veil and the title stay on top.

   Timing is not owned here: --pf-fade comes from the hover
   (pf-portfolio-controls) so the site keeps one number. The value
   below is only the fallback for a grid with the hover switched off.

   Selectors carry ".entry.loop-entry" for the same reason pf-grid.css
   does: Kadence prints its block CSS after plugin CSS, and at equal
   specificity Kadence wins. Don't simplify them out.

   No border-radius anywhere in this file. The tile clips, and the
   radius is pf-consistency's to set — see CLAUDE.md.
   ============================================================= */

.pf-play {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pf-fade, 150ms) ease;
}

.pf-play.is-playing,
.pf-play.is-static {
  opacity: 1;
}

/* Transparent while it loads on purpose: the still underneath shows
   through until the first frame paints, instead of a flash of canvas. */
.entry.loop-entry .pf-play__video,
.entry.loop-entry .pf-play__slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  background: transparent;
}

/* The diaporama cross-fades on the same curve as everything else. */
.entry.loop-entry .pf-play__slide {
  opacity: 0;
  transition: opacity var(--pf-fade, 150ms) ease;
}

.entry.loop-entry .pf-play__slide.is-current {
  opacity: 1;
}

/* Opt-in: the clip rides the still's zoom instead of holding steady.
   Off by default — the clip is already moving, and two motions at once
   read as a wobble rather than as one gesture. */
.pf-play--zoom {
  transition: opacity var(--pf-fade, 150ms) ease, transform var(--pf-fade, 150ms) ease;
}

.entry.loop-entry:hover .pf-play--zoom,
.entry.loop-entry:focus-within .pf-play--zoom {
  transform: scale(var(--pf-zoom, 1));
}

/* Motion off means motion off: the tile falls back to its still, which is
   the whole point of building the grid on stills in the first place. */
@media (prefers-reduced-motion: reduce) {
  .pf-play { display: none; }
}

/* The thumbnail becomes its own stacking context, so the layer inside it can
   never rise above the hover veil — .entry-content-wrap follows in the DOM and
   has to stay on top. Without this the clip covers the title. */
.entry.loop-entry .post-thumbnail {
  z-index: 0;
}