.card__video-hover{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity .4s ease;z-index:1;overflow:hidden}.card__hover-video{width:100%;height:100%;object-fit:cover}@media(hover:hover){.card:hover .card__video-hover,.card-wrapper:hover .card__video-hover{opacity:1}}@media(hover:none){.card__video-hover.is-playing{opacity:1}}.card__video-hover:before{content:"";position:absolute;top:50%;left:50%;width:3rem;height:3rem;margin:-1.5rem 0 0 -1.5rem;border:2px solid rgba(var(--color-foreground),.2);border-top-color:rgb(var(--color-foreground));border-radius:50%;opacity:0;transition:opacity .2s ease;animation:video-loading-spin .8s linear infinite;z-index:2;pointer-events:none}.card__video-hover.is-loading:before{opacity:1}.card__video-hover.is-ready:before{display:none}@keyframes video-loading-spin{to{transform:rotate(360deg)}}.card__video-hover .video-play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:5rem;height:5rem;background:rgba(var(--color-background),.9);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:3}.card__video-hover .video-play-icon svg{width:2rem;height:2rem;margin-left:.3rem;fill:rgb(var(--color-foreground))}@media(hover:none){.card__video-hover:not(.is-playing) .video-play-icon{opacity:1}}
/*# sourceMappingURL=/cdn/shop/t/30/assets/component-video-hover.css.map */