/* ============================================================
   FLEXYPRO AI — Unified skeleton / shimmer loaders.
   Goal: every async block has a visual placeholder BEFORE data
   arrives — no more "Загрузка…" text. Used across catalog,
   gallery, studio_gallery, admin, dealer, ceo_preview, studio
   result area.
   Link AFTER responsive.css in every page that does async fetches.
   ============================================================ */

/* === Base shimmer block ====================================== */
.skeleton {
  background: linear-gradient(90deg, #141414 0%, #1f1f1f 50%, #141414 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
  display: block;
  /* prevent text selection and ensure it lays out as a real block */
  color: transparent;
  user-select: none;
  pointer-events: none;
}
.skeleton.is-loaded {
  animation: none;
  background: none;
  color: inherit;
  user-select: auto;
  pointer-events: auto;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === Slot presets ============================================ */
.skeleton--card     { aspect-ratio: 4 / 5; width: 100%; min-height: 180px; }
.skeleton--card-sq  { aspect-ratio: 1 / 1; width: 100%; min-height: 160px; }
.skeleton--card-43  { aspect-ratio: 4 / 3; width: 100%; min-height: 160px; }
.skeleton--card-169 { aspect-ratio: 16 / 9; width: 100%; min-height: 120px; }
.skeleton--text     { height: 14px; margin: 6px 0; border-radius: 3px; }
.skeleton--text.is-short  { width: 60%; }
.skeleton--text.is-mid    { width: 80%; }
.skeleton--text.is-tiny   { height: 10px; width: 40%; }
.skeleton--text.is-num    { height: 36px; width: 60%; border-radius: 4px; }
.skeleton--circle   { aspect-ratio: 1 / 1; border-radius: 50%; }
.skeleton--chip     { height: 28px; width: 84px; border-radius: 999px; display: inline-block; margin-right: 8px; vertical-align: middle; }
.skeleton--row      { height: 56px; width: 100%; margin: 8px 0; border-radius: 6px; }
.skeleton--row-sm   { height: 32px; width: 100%; margin: 6px 0; border-radius: 4px; }
.skeleton--big      { aspect-ratio: 16 / 10; width: 100%; min-height: 260px; border-radius: 10px; }

/* Skeleton as a list of N rows, when JS not bound yet */
.skeleton-stack > * + * { margin-top: 8px; }

/* Skeleton card composition for catalog/gallery/sku tiles */
.skeleton-tile {
  background: #0E0E0E;
  border: 1px solid #1F1F1F;
  border-radius: 6px;
  overflow: hidden;
}
.skeleton-tile__img  { width: 100%; aspect-ratio: 4 / 5; }
.skeleton-tile__body { padding: 12px 14px; }

/* === Stagger-in for content arriving after skeleton ========== */
.fade-stagger { opacity: 0; transform: translateY(8px); will-change: opacity, transform; }
.fade-stagger.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .4s cubic-bezier(.22,1,.36,1),
              transform .4s cubic-bezier(.22,1,.36,1);
}

/* === Big animated skeleton (e.g. studio result while wan2 renders) === */
.skeleton--result {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 70vh;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(90deg, #0E0E0E 0%, #181818 50%, #0E0E0E 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 2s ease-in-out infinite;
  border: 1px solid #1F1F1F;
}
.skeleton--result__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(253, 97, 67, 0.15);
  overflow: hidden;
}
.skeleton--result__progress::after {
  content: "";
  position: absolute;
  left: -40%;
  top: 0;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent 0%, #FD6143 50%, transparent 100%);
  animation: skeleton-progress 1.8s linear infinite;
}
@keyframes skeleton-progress {
  0%   { left: -40%; }
  100% { left: 100%; }
}
.skeleton--result__label {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 241, 237, 0.45);
  text-align: center;
  pointer-events: none;
}
.skeleton--result__label b {
  display: block;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(245, 241, 237, 0.85);
  margin-top: 6px;
  font-weight: 500;
}

/* === Image shimmer behind <img>/<picture> until 'loaded' ===== */
/* Generic: any <img> with data-skel placeholder + .img-pending */
img.img-pending,
picture.img-pending img {
  background: linear-gradient(90deg, #141414 0%, #1f1f1f 50%, #141414 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
img.loaded,
picture img.loaded {
  background: none !important;
  animation: none !important;
}

/* Extra coverage for known image hosts that did not yet opt-in
   to onload .loaded handlers (press cases, ceo carousel, studio_gallery tiles) */
.case-row picture img,
.case-thumb picture img,
.hero-thumbs picture img,
#carousel-grid .carousel__item img,
.tile picture img,
.tile > img {
  background: linear-gradient(90deg, #141414 0%, #1f1f1f 50%, #141414 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.case-row picture img.loaded,
.case-thumb picture img.loaded,
.hero-thumbs picture img.loaded,
#carousel-grid .carousel__item img.loaded,
.tile picture img.loaded,
.tile > img.loaded {
  background: none;
  animation: none;
}

/* === Reduced motion ========================================== */
@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .skeleton--result,
  img.img-pending,
  picture.img-pending img,
  .case-row picture img,
  .case-thumb picture img,
  .hero-thumbs picture img,
  #carousel-grid .carousel__item img,
  .tile picture img,
  .tile > img {
    animation: none;
    background: #1a1a1a;
  }
  .skeleton--result__progress::after { animation: none; background: #FD6143; left: 0; width: 30%; }
  .fade-stagger { opacity: 1 !important; transform: none !important; transition: none !important; }
}