/* =============================================================================
   Phase 151C — Global theme image loading / skeleton reveal system.
   Scoped to theme-owned frames only. Do not target raw global img elements.
   ========================================================================== */

.mht-image-frame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --mht-image-skeleton-base: rgba(27, 22, 32, 0.78);
  --mht-image-skeleton-mid: rgba(197, 166, 211, 0.16);
  --mht-image-skeleton-glow: rgba(183, 140, 255, 0.12);
  --mht-image-failed-color: rgba(221, 214, 227, 0.58);
  background-color: var(--mht-image-skeleton-base);
  background-image:
    radial-gradient(circle at 24% 22%, var(--mht-image-skeleton-glow), transparent 34%),
    linear-gradient(110deg,
      transparent 0%,
      transparent 31%,
      var(--mht-image-skeleton-mid) 44%,
      transparent 58%,
      transparent 100%);
  background-size: 140% 140%, 240% 100%;
  background-position: center, 180% 0;
}

html[data-mht-theme-effective="light"] .mht-image-frame,
html[data-mht-theme="light"] .mht-image-frame {
  --mht-image-skeleton-base: rgba(246, 242, 247, 0.78);
  --mht-image-skeleton-mid: rgba(183, 140, 255, 0.18);
  --mht-image-skeleton-glow: rgba(197, 166, 211, 0.28);
  --mht-image-failed-color: rgba(76, 52, 93, 0.58);
}

.mht-image-frame.mht-image-loading {
  animation: mhtImageSkeleton 1.45s ease-in-out infinite;
}

.mht-image-frame.mht-image-loaded,
.mht-image-frame.mht-image-failed {
  animation: none;
  background-image: none;
}

.mht-image-frame.mht-image-loaded {
  background-color: transparent;
}

.mht-image-frame .mht-image-media {
  opacity: 1;
  backface-visibility: hidden;
}

.js-enabled .mht-image-frame.mht-image-loading .mht-image-media {
  opacity: 0;
}

.js-enabled .mht-image-frame.mht-image-loaded .mht-image-media {
  opacity: 1;
  animation: mhtImageReveal 560ms var(--ease-soft, cubic-bezier(.22, 1, .36, 1)) both;
}

.js-enabled .mht-image-frame.mht-image-failed .mht-image-media {
  opacity: 0;
  visibility: hidden;
}

.mht-image-frame.mht-image-failed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(183, 140, 255, 0.08), transparent 52%),
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(197, 166, 211, 0.08) 10px 11px);
}

.mht-image-frame.mht-image-failed::after {
  content: "Image unavailable";
  position: absolute;
  inset: auto 14px 14px 14px;
  z-index: 2;
  color: var(--mht-image-failed-color);
  font-family: var(--font-body, var(--mht-font-body, system-ui, sans-serif));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
  pointer-events: none;
}

.mht-image-frame--avatar.mht-image-failed::after,
.mht-image-frame--avatar-small.mht-image-failed::after,
.mht-image-frame--hero-portrait.mht-image-failed::after,
.mht-image-frame--story.mht-image-failed::after {
  content: "";
}

/* Keep existing absolute-cover image patterns working inside the loading frame. */
.mht-image-frame--project-card .mht-image-media,
.mht-image-frame--thought-card .mht-image-media,
.mht-image-frame--thinking-card .mht-image-media,
.mht-image-frame--post-cover .mht-image-media,
.mht-image-frame--post-reel .mht-image-media,
.mht-image-frame--project-cover .mht-image-media,
.mht-image-frame--hero-portrait .mht-image-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mht-image-frame--avatar .mht-image-media,
.mht-image-frame--avatar-small .mht-image-media {
  position: relative;
  z-index: 1;
}

.mht-image-frame--project-gallery .mht-image-media,
.mht-image-frame--resource .mht-image-media,
.mht-image-frame--storefront .mht-image-media,
.mht-image-frame--about-hero .mht-image-media,
.mht-image-frame--story .mht-image-media {
  position: relative;
  z-index: 1;
}

/* Preserve the approved portrait fade. Loading system only controls reveal opacity. */
.mht-image-frame--hero-portrait.mht-image-loaded .mht-image-media,
.mht-image-frame--hero-portrait.mht-image-loading .mht-image-media {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0,0,0,.88) 66%, rgba(0,0,0,.46) 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0,0,0,.88) 66%, rgba(0,0,0,.46) 84%, transparent 100%);
}

@keyframes mhtImageSkeleton {
  0% { background-position: center, 180% 0; }
  100% { background-position: center, -80% 0; }
}

@keyframes mhtImageReveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mht-image-frame.mht-image-loading,
  .js-enabled .mht-image-frame.mht-image-loaded .mht-image-media {
    animation: none !important;
  }
}