/**
 * Shared layer for product-block video surfaces.
 *
 * The DOM shape comes from template-parts/product-blocks/partials/video-image.php
 * and the runtime from js/product-blocks/shared/video-modes.js. This file
 * is ONLY responsible for:
 *
 *   - stacking the <img> (poster) on top of the <video> with matching fit
 *   - fading the overlay <img> in/out based on data-video-mode +
 *     data-video-hover-out + the .has-played marker class
 *
 * Block-specific CSS owns sizing, aspect-ratio, border-radius and any
 * custom transforms. Do not add those here.
 */

.bio-video-surface {
    position: relative;
}

/* GPU layer hints pin the <video> to a permanent composited layer so the
   browser's compositor does NOT discard and rebuild it during pin state
   toggles (position/transform changes ScrollTrigger applies on (de)activate).
   Without this, Chrome rebuilds the layer and the decoder paints its
   nearest-keyframe fallback (frame 0) for one tick before the last-seeked
   frame is promoted back — the "poster piscando no END" the user reported.
   Ref: Chromium Issue 617642; SO 23532690 (Rick Lancee accepted answer). */
.bio-video-surface.has-video .bio-video-surface__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

.bio-video-surface.has-video .bio-video-surface__image {
    position: relative;
    z-index: 1;
    transition: opacity 0.15s ease-out;
}

/* Single rule — every mode drives opacity through the .has-played marker
   the shared JS toggles (autoplay + scroll-scrub add it on wire; hover
   adds on enter and removes on leave only for hover_out === 'reset';
   scroll-enter adds on enter and removes on leaveBack). */
.bio-video-surface.has-video.has-played .bio-video-surface__image {
    opacity: 0;
}