/**
 * woo-video-player.css  v3.0
 * - Transparent backgrounds everywhere (no black, no grey fills)
 * - Smooth crossfade + slide flash animation on slot switch
 * - Fast paint: contain, will-change, transform-based animations (GPU)
 */

:root {
  --wvp-accent        : #2563eb;
  --wvp-radius        : 4px;
  --wvp-thumb-size    : 100px;
  --wvp-thumb-gap     : 8px;
  --wvp-ease          : cubic-bezier(0.4, 0, 0.2, 1);
  --wvp-speed         : 0.38s;
  --wvp-flash-color   : rgba(255,255,255,0.72);
}

/* ── Wrapper ─────────────────────────────────────────────────────── */
.woocommerce-product-gallery--with-video {
  position  : relative;
  overflow  : visible !important;
  height    : auto !important;
  min-height: 0 !important;
  max-height: none !important;
  /* GPU layer for child animations */
  contain   : layout style;
}

/* ── Main display area ───────────────────────────────────────────── */
.wvp-main {
  position      : relative;
  width         : 100%;
  aspect-ratio  : 1 / 1;
  overflow      : hidden;
  background    : transparent;
  border        : 1px solid #e8e8e8;
  border-radius : var(--wvp-radius);
  margin-bottom : var(--wvp-thumb-gap);
  /* Hardware-accelerated clipping */
  transform     : translateZ(0);
}

/* ── Flash overlay — sits above all slots, triggered by JS ───────── */
.wvp-flash {
  position      : absolute;
  inset         : 0;
  z-index       : 10;
  background    : var(--wvp-flash-color);
  opacity       : 0;
  pointer-events: none;
  will-change   : opacity;
}

.wvp-flash.run {
  animation: wvp-flash-anim var(--wvp-speed) var(--wvp-ease) forwards;
}

@keyframes wvp-flash-anim {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Slots — stacked, GPU composited ────────────────────────────── */
.wvp-slot {
  position   : absolute;
  inset      : 0;
  /* Start: invisible + slightly scaled down */
  opacity    : 0;
  visibility : hidden;
  transform  : scale(1.03);
  transition :
    opacity    var(--wvp-speed) var(--wvp-ease),
    transform  var(--wvp-speed) var(--wvp-ease),
    visibility 0s linear var(--wvp-speed);
  will-change: opacity, transform;
  /* No background — fully transparent */
  background : transparent;
}

.wvp-slot.is-active {
  opacity    : 1;
  visibility : visible;
  transform  : scale(1);
  transition :
    opacity   var(--wvp-speed) var(--wvp-ease),
    transform var(--wvp-speed) var(--wvp-ease);
}

/* Outgoing slot slides/fades out to opposite direction */
.wvp-slot.is-leaving {
  opacity   : 0;
  transform : scale(0.97);
  transition:
    opacity   calc(var(--wvp-speed) * 0.7) var(--wvp-ease),
    transform calc(var(--wvp-speed) * 0.7) var(--wvp-ease);
}

/* ── Gallery image — transparent bg, contain fit ────────────────── */
.wvp-full-img {
  width      : 100%;
  height     : 100%;
  object-fit : contain;
  display    : block;
  background : transparent;
}

/* ── YouTube / Vimeo facade ─────────────────────────────────────── */
.wvp-slot--video { cursor: pointer; }

.wvp-iframe-facade {
  position       : relative;
  width          : 100%;
  height         : 100%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : transparent;
  cursor         : pointer;
}

.wvp-facade-thumb {
  position  : absolute;
  inset     : 0;
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  display   : block;
  /* Fade in fast once decoded */
  opacity   : 1;
  transition: opacity 0.2s ease;
}

/* Play button — white circle with triangle, no black bg */
.wvp-facade-play {
  position  : relative;
  z-index   : 2;
  display   : flex;
  will-change: transform;
  transition: transform 0.2s var(--wvp-ease);
}

.wvp-facade-play svg {
  width : 72px;
  height: 72px;
}

.wvp-iframe-facade:hover .wvp-facade-play {
  transform: scale(1.1);
}

/* Pulse ring on hover */
.wvp-facade-play::after {
  content      : '';
  position     : absolute;
  inset        : -6px;
  border-radius: 50%;
  border       : 2px solid rgba(255,255,255,0.5);
  opacity      : 0;
  transform    : scale(0.85);
  transition   : opacity 0.2s ease, transform 0.2s ease;
}

.wvp-iframe-facade:hover .wvp-facade-play::after {
  opacity  : 1;
  transform: scale(1);
}

/* Real iframe injected after click */
.wvp-iframe-facade iframe {
  position: absolute;
  inset   : 0;
  width   : 100%;
  height  : 100%;
  border  : 0;
  /* Fade in smoothly */
  animation: wvp-fadein 0.3s ease forwards;
}

@keyframes wvp-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Native MP4 video — transparent bg ──────────────────────────── */
.wvp-native-video {
  width      : 100%;
  height     : 100%;
  object-fit : contain;
  display    : block;
  border     : 0;
  outline    : 0;
  background : transparent;
}

/* ── Thumbnail strip ─────────────────────────────────────────────── */
.wvp-thumbs {
  display   : flex;
  flex-wrap : wrap;
  gap       : var(--wvp-thumb-gap);
  padding   : 0;
  margin    : 0;
  list-style: none;
}

.wvp-thumb {
  position     : relative;
  width        : var(--wvp-thumb-size);
  height       : var(--wvp-thumb-size);
  padding      : 0;
  border       : 2px solid #e8e8e8;
  border-radius: var(--wvp-radius);
  overflow     : hidden;
  cursor       : pointer;
  background   : transparent;
  flex-shrink  : 0;
  outline      : none;
  /* GPU-composited transitions */
  transition   :
    border-color 0.18s ease,
    opacity      0.18s ease,
    transform    0.18s ease;
  will-change  : transform;
}

.wvp-thumb:hover {
  border-color: #aaa;
  opacity     : 0.82;
  transform   : translateY(-2px);
}

.wvp-thumb:focus-visible {
  border-color: var(--wvp-accent);
  box-shadow  : 0 0 0 2px rgba(37,99,235,.3);
}

.wvp-thumb.is-active {
  border-color: var(--wvp-accent);
  opacity     : 1;
  transform   : translateY(0);
}

/* Thumbnail image */
.wvp-thumb-img {
  width         : 100%;
  height        : 100%;
  object-fit    : cover;
  display       : block;
  pointer-events: none;
}

/* Play badge on video thumb */
.wvp-play-badge {
  position       : absolute;
  inset          : 0;
  display        : flex;
  align-items    : center;
  justify-content: center;
  pointer-events : none;
}

.wvp-play-badge svg {
  width     : 28px;
  height    : 28px;
  transition: transform 0.18s ease;
}

.wvp-thumb--video:hover .wvp-play-badge svg {
  transform: scale(1.18);
}

/* ── Dark mode ──────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root { --wvp-flash-color: rgba(255,255,255,0.12); }
  .wvp-main  { border-color: rgba(255,255,255,0.1); }
  .wvp-thumb { border-color: rgba(255,255,255,0.1); }
}
body.ct-dark {
  --wvp-flash-color: rgba(255,255,255,0.12);
}
body.ct-dark .wvp-main  { border-color: rgba(255,255,255,0.1); }
body.ct-dark .wvp-thumb { border-color: rgba(255,255,255,0.1); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) { :root { --wvp-thumb-size: 78px; } }
@media (max-width: 480px) { :root { --wvp-thumb-size: 62px; --wvp-thumb-gap: 6px; } }

/* ── Blocksy overrides ──────────────────────────────────────────── */
.woocommerce-product-gallery--with-video .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery--with-video figure {
  height    : auto !important;
  min-height: 0 !important;
}
.woocommerce-product-gallery--with-video .woocommerce-product-gallery__trigger {
  display: none !important;
}

/* ── Print ──────────────────────────────────────────────────────── */
@media print {
  .wvp-iframe-facade, .wvp-native-video, .wvp-thumbs, .wvp-flash { display: none !important; }
}