/**
 * Reserved media loading states
 *
 * Every YouTube thumbnail keeps its final box size while downloading. The
 * quiet paper-and-sage shimmer sits behind the image and disappears only after
 * real pixels are ready, preventing blank cards and layout jumps.
 */

:where(
  .hero-media,
  .card-image-link,
  .village-image-clip,
  .short-card,
  .related-recipe-image,
  .detail-player,
  .shorts-player
) {
  isolation: isolate;
}

:where(
  .hero-media,
  .card-image-link,
  .village-image-clip,
  .short-card,
  .related-recipe-image
)::before,
.detail-player:has(iframe[data-media-state="loading"])::before,
.shorts-player:has(iframe[data-media-state="loading"])::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(
      105deg,
      transparent 30%,
      rgba(255, 253, 247, 0.58) 44%,
      rgba(255, 253, 247, 0.82) 50%,
      rgba(255, 253, 247, 0.58) 56%,
      transparent 70%
    ) -180% 0 / 250% 100% no-repeat,
    linear-gradient(145deg, rgba(222, 208, 184, 0.78), rgba(140, 152, 117, 0.42));
  opacity: 1;
  transition: opacity 320ms ease;
  animation: sim-media-shimmer 1.75s ease-in-out infinite;
}

:where(
  .hero-media,
  .card-image-link,
  .village-image-clip,
  .short-card,
  .related-recipe-image
):has(img[data-media-state="loaded"])::before,
:where(
  .hero-media,
  .card-image-link,
  .village-image-clip,
  .short-card,
  .related-recipe-image
):has(img[data-media-state="error"])::before {
  opacity: 0;
  animation: none;
}

img[data-media-state] {
  opacity: 0;
  transition-property: transform, opacity;
  transition-duration: 650ms, 380ms;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1), ease;
}

img[data-media-state="loaded"] {
  opacity: 1;
}

/* A failed primary and fallback image leaves a calm branded surface instead
   of a broken-image icon. Alt text remains available to assistive technology. */
img[data-media-state="error"] {
  opacity: 0;
}

.detail-player,
.shorts-player {
  position: relative;
}

.detail-player iframe,
.shorts-player iframe {
  position: relative;
  z-index: 1;
}

.detail-player iframe[data-media-state="loading"],
.shorts-player iframe[data-media-state="loading"] {
  opacity: 0;
}

.detail-player iframe[data-media-state="loaded"],
.shorts-player iframe[data-media-state="loaded"] {
  opacity: 1;
  transition: opacity 360ms ease;
}

.media-consent-gate {
  z-index: 2;
}

@keyframes sim-media-shimmer {
  0% { background-position: 180% 0, 0 0; }
  100% { background-position: -80% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .hero-media,
    .card-image-link,
    .village-image-clip,
    .short-card,
    .related-recipe-image
  )::before,
  .detail-player:has(iframe[data-media-state="loading"])::before,
  .shorts-player:has(iframe[data-media-state="loading"])::before {
    animation: none;
  }

  img[data-media-state],
  .detail-player iframe,
  .shorts-player iframe {
    transition-duration: 0.01ms !important;
  }
}