/**
 * KTC performance — skeletons + lazy media reveal
 */
@keyframes ktc-skel-shine {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.ktc-skel {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      110deg,
      rgba(10, 61, 50, 0.06) 0%,
      rgba(194, 145, 137, 0.18) 45%,
      rgba(10, 61, 50, 0.06) 90%
    );
  background-size: 200% 100%;
  animation: ktc-skel-shine 1.35s ease-in-out infinite;
}

.ktc-skel--map {
  border-radius: inherit;
  background:
    linear-gradient(165deg, #0a3d32 0%, #145c4a 42%, #0a3d32 100%),
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(212, 160, 144, 0.16) 48%,
      transparent 100%
    );
  background-blend-mode: normal, soft-light;
  background-size: 100% 100%, 220% 100%;
  animation: ktc-skel-shine 1.6s ease-in-out infinite;
}

.ktc-skel--map::after {
  content: 'Loading map…';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 243, 241, 0.72);
  white-space: nowrap;
}

.map-shell.is-map-ready .ktc-skel--map,
.ktc-skel.is-done {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.map-shell {
  position: relative;
}

.card-media,
.strip-card {
  position: relative;
  background: linear-gradient(135deg, #e8f2ef, #ebe4e1);
}

/* Skeleton wash only — do NOT set position (brand.css keeps this absolute for overlay) */
.home-ai__media {
  background: linear-gradient(135deg, #062820, #0a3d32);
}

.card-media::before,
.strip-card::before,
.home-ai__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(
      110deg,
      rgba(10, 61, 50, 0.05) 0%,
      rgba(194, 145, 137, 0.2) 48%,
      rgba(10, 61, 50, 0.05) 100%
    );
  background-size: 200% 100%;
  animation: ktc-skel-shine 1.4s ease-in-out infinite;
  pointer-events: none;
}

.card-media.is-media-ready::before,
.strip-card.is-media-ready::before,
.home-ai__media.is-media-ready::before {
  opacity: 0;
  animation: none;
  transition: opacity 0.35s ease;
}

.card-media img,
.home-ai__media img {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* Strip cards: keep images visible — opacity:0 broke taps/clicks visually */
.strip-card img {
  position: absolute;
  z-index: 0;
  opacity: 1;
  transition: transform 0.7s ease, opacity 0.35s ease;
}

.card-media img.is-loaded,
.home-ai__media img.is-loaded,
.card-media.is-media-ready img,
.home-ai__media.is-media-ready img {
  opacity: 1;
}

.strip-card img.is-loaded,
.strip-card.is-media-ready img {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ktc-skel,
  .card-media::before,
  .strip-card::before,
  .home-ai__media::before {
    animation: none;
  }
  .card-media img,
  .strip-card img,
  .home-ai__media img {
    opacity: 1;
  }
}