/**
 * Media Placeholders - Automatic loading states for all images and videos
 * Simple, performant placeholder system with shimmer animation
 */

/* ========== MEDIA LOADING PROGRESS BAR ========== */
/* Global progress bar at top of page */
.media-progress-container {
  /* Positioning */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;

  /* Dimensions */
  width: 100%;
  height: 2px;

  /* Interaction */
  pointer-events: none;

  /* Animation */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.media-progress-container.visible {
  opacity: 1;
}

/* Progress bar fill */
.media-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 adjustments */
[data-theme="dark"] .media-progress-bar {
  background-color: rgba(255, 255, 255, 0.8);
}

/* ========== MEDIA WRAPPER ========== */
.media-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-secondary);
  --placeholder-base-color: var(--bg-tertiary, #f5f5f5);
  --placeholder-highlight-color: var(--bg-secondary, #e8e8e8);
  transition: background-color var(--duration-theme) ease-out;
}

[data-theme="dark"] .media-wrapper {
  --placeholder-base-color: rgba(255, 255, 255, 0.05);
  --placeholder-highlight-color: rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.05);
}

/* ========== PLACEHOLDER ========== */
.media-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--placeholder-base-color);
  animation: placeholder-pulse 1.4s ease-in-out infinite;
  z-index: 1;
  will-change: background-color;
}

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

/* ========== MEDIA ELEMENT ========== */
.media-element {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: inherit;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Loaded state */
.media-loaded,
.media-element[style*="opacity: 1"] {
  opacity: 1 !important;
}

/* Hide placeholder when media is loaded */
/* Note: Placeholder is explicitly hidden via JS in MediaUtils.onMediaLoaded() */
/* This CSS provides a fallback using the :has() selector for modern browsers */
.media-wrapper[data-media-state="loaded"] .media-placeholder,
.media-wrapper[data-media-state="error"] .media-placeholder,
.media-wrapper:has(.media-element[style*="opacity: 1"]) .media-placeholder,
.media-wrapper:has(.media-loaded) .media-placeholder {
  display: none;
}

/* Make wrapper background transparent when media is loaded */
.media-wrapper[data-media-state="loaded"],
.media-wrapper[data-media-state="error"],
.media-wrapper:has(.media-element[style*="opacity: 1"]),
.media-wrapper:has(.media-loaded) {
  background-color: transparent !important;
}

/* ========== LAZY LOADING STATES ========== */
.lazy {
  opacity: 0;
}

.lazy.media-loading,
.lazy[data-media-state="loading"] {
  opacity: 0;
}

.lazy.media-loaded,
.lazy[data-media-state="loaded"] {
  opacity: 1;
}

/* ========== ERROR STATE ========== */
.media-error,
[data-media-state="error"] {
  opacity: 0.5 !important;
}

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

/* ========== DARK MODE ========== */
/* Dark theme handled via custom properties on wrapper */

/* ========== ACCESSIBILITY ========== */
@media (prefers-reduced-motion: reduce) {
  .media-placeholder {
    animation: none;
    background-color: var(--placeholder-highlight-color);
  }

  .media-element {
    transition: none;
  }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .media-placeholder {
    animation-duration: 2s;
  }
}

/* ========== ASPECT RATIO SUPPORT ========== */
.media-placeholder[style*="aspect-ratio"] {
  position: relative;
  width: 100%;
  height: auto;
}