/* Shared image loading, skeleton, and motion-reduction states. */

.race-card.is-loading .race-card__img-wrap::after,
.recent-race-card.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.075) 42%,
      rgba(255,255,255,0.18) 50%,
      rgba(255,255,255,0.075) 58%,
      rgba(255,255,255,0) 100%);
  opacity: 0.55;
  mix-blend-mode: normal;
  transform: translateX(-120%);
  animation: sftlThumbShimmer 1.25s ease-in-out infinite;
}

@keyframes sftlThumbShimmer {
  to { transform: translateX(120%); }
}

@media (max-width: 900px), (pointer: coarse) {
  .race-card {
    --race-card-thumb-transition: opacity 0.22s ease;
  }

  .race-card.is-loading .race-card__img-wrap::after,
  .recent-race-card.is-loading::after {
    animation: none;
    opacity: 0.18;
  }

  .race-card > .race-card__img-wrap > img.race-card__thumb.is-loaded {
    opacity: 1;
  }
}

.race-card.is-loading .race-card__img-wrap {
  background:
    radial-gradient(circle at 50% 18%, rgba(222,216,198,0.045), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.025), rgba(255,255,255,0.004) 48%, rgba(0,0,0,0.10)),
    rgba(14,14,24,0.92);
}

.race-card.has-image-error .race-card__img-wrap {
  background:
    radial-gradient(circle at 50% 18%, rgba(222,216,198,0.035), transparent 34%),
    rgba(10,10,18,0.95);
}

.race-card__thumb.is-loaded,
.recent-race-card img.is-loaded {
  animation: sftlThumbFadeIn 260ms ease-out both;
}

@keyframes sftlThumbFadeIn {
  from { opacity: 0.72; filter: brightness(0.92); }
  to { opacity: 1; filter: blur(0) brightness(1); }
}

.race-card.is-deferred-thumb .race-card__img-wrap {
  background:
    radial-gradient(circle at 50% 28%, rgba(200,191,176,0.08), transparent 46%),
    linear-gradient(180deg, rgba(24,24,36,0.86), rgba(10,10,18,0.96));
}

.race-card.is-deferred-thumb .race-card__thumb {
  opacity: 0;
}

@media (max-width: 760px) {
  .race-card,
  .recent-race-card,
  .gallery-item {
    content-visibility: auto;
    contain-intrinsic-size: 280px 390px;
  }

  img.sftl-mobile-img-loading,
  .race-card > .race-card__img-wrap > img.sftl-mobile-img-loading {
    opacity: 0.46;
    filter: brightness(0.86);
    transform: translateZ(0);
  }

  img.sftl-mobile-img-ready,
  .race-card > .race-card__img-wrap > img.sftl-mobile-img-ready {
    opacity: 1;
    filter: none;
    transition: opacity 0.28s ease, filter 0.28s ease;
  }

  .sftl-img-shell {
    position: relative;
    overflow: hidden;
    background:
      linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)),
      rgba(18,18,28,0.42);
  }

  .sftl-img-shell.is-image-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
      linear-gradient(
        100deg,
        rgba(255,255,255,0) 0%,
        rgba(226,214,194,0.08) 42%,
        rgba(226,214,194,0.16) 50%,
        rgba(226,214,194,0.08) 58%,
        rgba(255,255,255,0) 100%
      );
    transform: translateX(-140%);
    animation: sftlSkeletonSweep 1.35s ease-in-out infinite;
    mix-blend-mode: screen;
  }

  @media (max-width: 760px), (pointer: coarse) {
    .sftl-img-shell.is-image-loading::after {
      transform: none;
      animation: none;
      mix-blend-mode: normal;
      opacity: 0.24;
    }
  }

  .sftl-img-shell.is-image-ready::after {
    display: none;
  }

  .gallery-carousel__main.sftl-img-shell.is-image-ready {
    background: transparent;
  }

  .hero.sftl-img-shell,
  .race-hero.sftl-img-shell {
    background:
      radial-gradient(circle at 50% 20%, rgba(211,198,176,0.05), rgba(7,7,13,0.0) 42%),
      rgba(8,8,14,0.86);
  }

  .hero.sftl-img-shell.is-image-loading::after,
  .race-hero.sftl-img-shell.is-image-loading::after {
    opacity: 0.55;
  }
}

@keyframes sftlSkeletonSweep {
  0% { transform: translateX(-140%); }
  100% { transform: translateX(140%); }
}

@media (prefers-reduced-motion: reduce) {
  .sftl-img-shell.is-image-loading::after {
    animation: none !important;
    opacity: 0.28;
  }

  img.sftl-mobile-img-ready {
    transition: none !important;
  }
}