/**
 * Media Loader System Styles
 * Comprehensive loading states for all media assets
 * - Shimmer animation during load
 * - Progress bar for slow loads
 * - Smooth crossfade transitions
 * - Aspect ratio preservation
 */

/* ========== MEDIA WRAPPER ========== */
.media-loader-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
  background: transparent;
  --loader-base-color: rgba(0, 0, 0, 0.04);
  --loader-highlight-color: rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .media-loader-wrapper {
  --loader-base-color: rgba(255, 255, 255, 0.06);
  --loader-highlight-color: rgba(255, 255, 255, 0.18);
}

/* Preserve aspect ratio when specified */
.media-loader-wrapper[style*="aspect-ratio"] {
  display: block;
}

/* ========== LOADING STATE - SHIMMER ========== */
.media-loading,
[data-media-state="loading"] {
  position: relative;
  background-color: var(--loader-base-color, rgba(0, 0, 0, 0.04));
  animation: loader-pulse 1.4s ease-in-out infinite;
  border-radius: 0;
  overflow: visible;
  will-change: background-color;
}

@keyframes loader-pulse {
  0%, 100% {
    background-color: var(--loader-base-color, rgba(0, 0, 0, 0.04));
  }
  50% {
    background-color: var(--loader-highlight-color, rgba(0, 0, 0, 0.12));
  }
}

/* ========== MEDIA ELEMENTS ========== */
.media-loading img,
.media-loading video,
[data-media-state="loading"] img,
[data-media-state="loading"] video {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  /* Dimensions set dynamically in JavaScript based on aspect ratio */
  object-fit: contain;
}

.media-loaded img,
.media-loaded video,
[data-media-state="loaded"] img,
[data-media-state="loaded"] video {
  opacity: 1 !important;
}

/* Remove shimmer when loaded */
.media-loaded,
[data-media-state="loaded"] {
  background: transparent !important;
  animation: none !important;
}

/* ========== ERROR STATE ========== */
.media-error,
[data-media-state="error"] {
  background: var(--bg-tertiary, #e0e0e0);
  position: relative;
}

.media-error::before,
[data-media-state="error"]::before {
  display: none;
}

.media-error::after,
[data-media-state="error"]::after {
  content: '⚠';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: var(--text-tertiary, #999);
  z-index: 20;
}

/* ========== PER-ASSET PROGRESS BAR ========== */
/* Progress bar appears INSIDE each asset container after 2s */
/* Container - gray background track */
.asset-progress {
  /* Positioning */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;

  /* Dimensions */
  width: 60%;
  max-width: 250px;
  height: 3px;

  /* Visual */
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 2px;

  /* Clip child to rounded corners */
  overflow: hidden;

  /* Animation */
  opacity: 0;
  animation: fade-in 0.3s ease-in-out forwards;
  transition: background-color var(--duration-theme) ease-out;
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

/* Progress bar - black animated fill */
.asset-progress-bar {
  /* Reset all properties that could affect width */
  position: static;
  display: block;
  float: none;

  /* Box model - critical for correct sizing */
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;

  /* Dimensions */
  width: 0%;
  height: 100%;

  /* Visual */
  background-color: rgba(0, 0, 0, 0.8);

  /* Animation */
  transition:
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color var(--duration-theme) ease-out;
}

/* Dark mode progress bar */
[data-theme="dark"] .asset-progress {
  background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .asset-progress-bar {
  background-color: rgba(255, 255, 255, 0.8);
}

/* Indeterminate progress animation for images */
@keyframes indeterminate-progress {
  0% {
    transform: translateX(-100%);
    width: 30%;
  }
  50% {
    transform: translateX(50%);
    width: 50%;
  }
  100% {
    transform: translateX(200%);
    width: 30%;
  }
}

/* ========== ACCESSIBILITY ========== */
@media (prefers-reduced-motion: reduce) {
  .media-loading,
  [data-media-state="loading"] {
    animation: none;
    background-color: var(--loader-highlight-color, rgba(0, 0, 0, 0.12));
  }

  .media-loading img,
  .media-loading video,
  [data-media-state="loading"] img,
  [data-media-state="loading"] video,
  .media-loaded img,
  .media-loaded video,
  [data-media-state="loaded"] img,
  [data-media-state="loaded"] video {
    transition: none;
  }

  .media-loader-progress__fill {
    transition: none;
  }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .media-loader-progress {
    height: 2px;
  }
}

/* ========== COMPATIBILITY WITH EXISTING CLASSES ========== */
/* Support existing .media-shell class - override transparent background when loading */
.media-shell.media-loading,
.media-shell[data-media-state="loading"],
.media-shell:has([data-media-state="loading"]) {
  background: var(--loader-base-color, rgba(0, 0, 0, 0.04)) !important;
  animation: loader-pulse 1.4s ease-in-out infinite !important;
  /* min-height set dynamically in JavaScript based on each asset's aspect ratio */
}

[data-theme="dark"] .media-shell.media-loading,
[data-theme="dark"] .media-shell[data-media-state="loading"],
[data-theme="dark"] .media-shell:has([data-media-state="loading"]) {
  background: var(--loader-highlight-color, rgba(255, 255, 255, 0.12)) !important;
  animation: loader-pulse 1.4s ease-in-out infinite !important;
}

/* Support existing .device-item class */
.device-item[data-media-wrapper] {
  position: relative;
}

.device-item.media-loading,
.device-item[data-media-state="loading"] {
  /* min-height set dynamically in JavaScript based on each asset's aspect ratio */
}

/* Remove size constraints when loaded */
.media-shell.media-loaded,
.media-shell[data-media-state="loaded"],
.device-item.media-loaded,
.device-item[data-media-state="loaded"] {
  min-height: 0 !important;
  background: transparent !important;
  animation: none !important;
}

/* Ensure proper z-index layering */
.media-loading,
[data-media-state="loading"] {
  isolation: isolate;
}

.media-loading img,
.media-loading video,
[data-media-state="loading"] img,
[data-media-state="loading"] video {
  position: relative;
  z-index: 5;
}