/**
 * Card Hover Animation Styles
 * Handles fade transitions between static image and animated video on hover
 */

/* Ensure card-front-1 has positioning context for absolute elements */
.card-front-1 {
  position: relative;
}

/* Container for image/video overlay - must fill card height */
.card-image-container {
  position: relative;
  width: 100%;
  height: 100%; /* Fill the full card height */
  line-height: 0; /* Prevent extra space below inline elements */
  z-index: 0; /* Keep container behind overlays */
}

/* Static image - default visible, maintain original card-img-top behavior */
.card-static-image {
  display: block;
  width: 100%;
  height: 100%;  /* Fill card height like original */
  opacity: 1;
  transition: opacity var(--card-hover-transition-speed, 0.3s) ease-in-out;
  position: relative;
  z-index: 0;  /* Keep it behind the athlete info */
  object-fit: cover;  /* Crop to fit card */
  object-position: center;  /* Center the image */
}

/* Animated video - default hidden, below athlete info overlay */
.card-video-animated {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--card-hover-transition-speed, 0.3s) ease-in-out;
  z-index: 0;  /* Below athlete-info which is typically z-index: 1000 */
  pointer-events: none;
  background: transparent;
}

/* Only show video on hover if it's loaded (not in loading state) */
.card-front-1:hover .card-image-container .card-video-animated:not([data-loading="true"]) {
  opacity: 1;
}

/* Hide static image on hover only if video is loaded */
.card-front-1:hover .card-image-container:has(.card-video-animated:not([data-loading="true"])) .card-static-image {
  opacity: 0;
}

/* Ensure smooth transitions on all states */
.card-image-container * {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Ensure athlete info stays on top of both image and video */
.athlete-info-1 {
  z-index: 1000 !important;
}

/* Ensure school logo and other overlays stay on top */
.athlete-image-1,
.favorite-icon,
.info-icon {
  z-index: 1001 !important;
}

/* Optional: Add a subtle loading state for video */
.card-video-animated[data-loading="true"] {
  background-color: rgba(0, 0, 0, 0.05);
}