/* ═══════════════════════════════════════════════
   VIDEO TILE — Image-to-Video Hover Crossfade
   Reusable component for illustration → video transitions
   ═══════════════════════════════════════════════ */

.video-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius, 4px);
  cursor: pointer;
}

.video-tile__image,
.video-tile__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-tile__image {
  z-index: 2;
  opacity: 1;
  transition: opacity 1800ms var(--ease-out, cubic-bezier(0.33, 1, 0.68, 1));
}

.video-tile__video {
  z-index: 1;
  opacity: 0;
  transition: opacity 1800ms var(--ease-out, cubic-bezier(0.33, 1, 0.68, 1));
  transform: scale(var(--video-scale, 1.05));
}

.video-tile--playing .video-tile__image {
  opacity: 0;
}

.video-tile--playing .video-tile__video {
  opacity: 1;
}

/* ── Panel integration — video sits between ::after (z:0) and .panel__inner (z:2) ── */
.panel.video-tile .video-tile__video { z-index: 1; }

/* Optional overlay content (speech bubbles, labels, etc.) */
.video-tile__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  pointer-events: none;
}

/* ── Reduced motion: instant swap, no crossfade ── */
@media (prefers-reduced-motion: reduce) {
  .video-tile__image,
  .video-tile__video {
    transition-duration: 0.01ms !important;
  }
}