/* ====================================================================
   VISUAL SENTINEL - Progressive Image Loading Pipeline
   Used with visual-sentinel.js for recipe image integrity
   ==================================================================== */

/* ── Shimmer Animation ────────────────────────────────────────── */
@keyframes vs-shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* ── Base: All sentinel-managed images ────────────────────────── */
.vs-image {
  transition: opacity 0.4s ease, filter 0.4s ease;
}

/* ── Stage 1: Color scaffold (instant, before image loads) ───── */
.vs-image.vs-scaffolded {
  object-fit: cover;
  background-size: cover;
}

/* ── Stage 2: Shimmer while loading ──────────────────────────── */
.vs-image.vs-shimmer {
  background-image: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 40%,
      rgba(255, 255, 255, 0.6) 50%,
      rgba(255, 255, 255, 0.4) 60%,
      transparent 100%);
  background-size: 200% 100%;
  animation: vs-shimmer 1.8s ease-in-out infinite;
}

/* ── Stage 3: Image loaded — smooth reveal ───────────────────── */
.vs-image.vs-loaded {
  opacity: 1;
  background-image: none;
  animation: none;
}

/* ── Stage 4: Fallback placeholder ───────────────────────────── */
.vs-image.vs-fallback {
  object-fit: contain;
  opacity: 0.85;
  background-image: none;
  animation: none;
  padding: var(--ssk-space-4, 1rem);
}

/* ── Skeleton placeholder (for containers before img exists) ─── */
.vs-skeleton {
  background: var(--ssk-bg-subtle, #f5f8f2);
  background-image: linear-gradient(90deg,
      var(--ssk-bg-subtle, #f5f8f2) 0%,
      var(--ssk-bg-light, #f8faf6) 40%,
      var(--ssk-white, #ffffff) 50%,
      var(--ssk-bg-light, #f8faf6) 60%,
      var(--ssk-bg-subtle, #f5f8f2) 100%);
  background-size: 200% 100%;
  animation: vs-shimmer 1.8s ease-in-out infinite;
  border-radius: var(--ssk-radius-md, 0.5rem);
}

/* Skeleton variants for different contexts */
.vs-skeleton--card {
  width: 100%;
  height: 200px;
}

.vs-skeleton--hero {
  width: 100%;
  height: 400px;
  border-radius: var(--ssk-radius-lg, 0.75rem);
}

.vs-skeleton--thumbnail {
  width: 80px;
  height: 80px;
  border-radius: var(--ssk-radius-sm, 0.25rem);
}

/* ── Recipe card image integration ───────────────────────────── */
.recipe-card__image.vs-scaffolded {
  min-height: 200px;
}

.recipe-card__image.vs-loaded {
  min-height: auto;
}

/* ── Reduced motion: respect user preferences ────────────────── */
@media (prefers-reduced-motion: reduce) {

  .vs-image.vs-shimmer,
  .vs-skeleton {
    animation: none;
    background-image: none;
  }

  .vs-image {
    transition: none;
  }
}