/* portfolio-hover.css — animated WebP overlay on Elementor Portfolio cards.
   Scope: only inside widgets opted in via `js-portfolio-hover` CSS class. */

.elementor-widget-portfolio.js-portfolio-hover .elementor-portfolio-item {
    position: relative;
    overflow: hidden;
}

.elementor-widget-portfolio.js-portfolio-hover .elementor-portfolio-item__img {
    position: relative;
    overflow: hidden;
}

.feat-portfolio-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    background: transparent;
    transition: opacity 200ms var(--ch-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.elementor-widget-portfolio.js-portfolio-hover
    .elementor-portfolio-item[data-preview-state="playing"]
    .feat-portfolio-preview {
    opacity: 1;
}

@media (hover: none), (pointer: coarse) {
    .feat-portfolio-preview { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .feat-portfolio-preview { display: none !important; }
}