/* Lazy media — polished warm-dark load / reveal / error */

@keyframes lazySweep {
  0% { transform: translateX(-120%) skewX(-12deg); opacity: 0; }
  35% { opacity: 0.55; }
  100% { transform: translateX(220%) skewX(-12deg); opacity: 0; }
}

@keyframes lazyGlow {
  0%, 100% { opacity: 0.35; transform: scale(0.92); }
  50% { opacity: 0.7; transform: scale(1); }
}

@keyframes lazyReveal {
  from {
    opacity: 0;
    transform: scale(0.94);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes lazyErrorIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.86); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Hide raw bitmap until ready — no broken-icon flash */
img.lazy-img,
img.lazy-pending,
img.lazy-waiting,
img.lazy-error {
  opacity: 0 !important;
  transform: scale(0.96);
  filter: blur(2px);
  transition:
    opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

img.lazy-img.loaded,
img.lazy-loaded {
  opacity: 1 !important;
  transform: scale(1);
  filter: blur(0);
  animation: lazyReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

img.lazy-error {
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

/* Shells */
.lazy-shell,
.social-logo,
.website-logo,
.social-story-logo,
.website-story-logo,
.social-story-bg,
.website-story-bg,
.pill-img-wrap,
.image-shell {
  position: relative;
  isolation: isolate;
}

/* ── Loading surface ── */
.lazy-shell.is-loading,
.social-logo.lazy-pending,
.website-logo.lazy-pending,
.social-story-logo.lazy-pending,
.website-story-logo.lazy-pending,
.social-story-bg.lazy-pending,
.website-story-bg.lazy-pending,
.pill-img-wrap.lazy-pending,
.image-shell.is-pending,
.social-logo:has(img.lazy-pending),
.social-logo:has(img.lazy-waiting),
.website-logo:has(img.lazy-pending),
.website-logo:has(img.lazy-waiting),
.social-story-logo:has(img.lazy-pending),
.social-story-logo:has(img.lazy-waiting),
.website-story-logo:has(img.lazy-pending),
.website-story-logo:has(img.lazy-waiting),
.social-story-bg:has(img.lazy-pending),
.website-story-bg:has(img.lazy-pending),
.pill-img-wrap:has(img.lazy-pending),
.image-shell:has(img.lazy-pending) {
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 40%, rgba(204, 120, 92, 0.16), transparent 62%),
    linear-gradient(160deg, #2a2723 0%, #1f1d1a 100%) !important;
  animation: none !important;
  box-shadow: inset 0 0 0 1px rgba(250, 249, 245, 0.05);
}

/* Soft coral orb */
.lazy-shell.is-loading::before,
.social-logo.lazy-pending::before,
.website-logo.lazy-pending::before,
.social-story-logo:has(img.lazy-pending)::before,
.website-story-logo:has(img.lazy-pending)::before,
.pill-img-wrap.lazy-pending::before,
.image-shell.is-pending::before,
.social-logo:has(img.lazy-pending)::before,
.website-logo:has(img.lazy-pending)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 38%;
  height: 38%;
  min-width: 16px;
  min-height: 16px;
  max-width: 28px;
  max-height: 28px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(250, 249, 245, 0.35), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(204, 120, 92, 0.55), rgba(204, 120, 92, 0.08) 70%, transparent 72%);
  animation: lazyGlow 1.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* Light sweep */
.lazy-shell.is-loading::after,
.social-logo.lazy-pending::after,
.website-logo.lazy-pending::after,
.social-story-logo:has(img.lazy-pending)::after,
.website-story-logo:has(img.lazy-pending)::after,
.pill-img-wrap.lazy-pending::after,
.image-shell.is-pending::after,
.social-logo:has(img.lazy-pending)::after,
.website-logo:has(img.lazy-pending)::after,
.social-story-bg:has(img.lazy-pending)::after,
.website-story-bg:has(img.lazy-pending)::after {
  content: "";
  position: absolute;
  inset: -10% -30%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(250, 249, 245, 0.02) 35%,
    rgba(232, 180, 140, 0.18) 50%,
    rgba(250, 249, 245, 0.02) 65%,
    transparent 100%
  );
  animation: lazySweep 1.55s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  z-index: 2;
}

/* Story backgrounds: quieter wash, no center orb */
.social-story-bg.lazy-pending::before,
.website-story-bg.lazy-pending::before,
.social-story-bg:has(img.lazy-pending)::before,
.website-story-bg:has(img.lazy-pending)::before {
  display: none !important;
}

.social-story-bg.lazy-pending,
.website-story-bg.lazy-pending,
.social-story-bg:has(img.lazy-pending),
.website-story-bg:has(img.lazy-pending) {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(204, 120, 92, 0.14), transparent 55%),
    linear-gradient(165deg, #2c2925 0%, #1c1b18 100%) !important;
}

/* Ready shells — clear loading chrome */
.lazy-shell.is-ready::before,
.lazy-shell.is-ready::after,
.social-logo.loaded-ok::before,
.social-logo.loaded-ok::after,
.website-logo.loaded-ok::before,
.website-logo.loaded-ok::after,
.pill-img-wrap.loaded-ok::before,
.pill-img-wrap.loaded-ok::after,
.image-shell.is-ready::before,
.image-shell.is-ready::after,
.social-logo:has(img.loaded)::before,
.social-logo:has(img.loaded)::after,
.website-logo:has(img.loaded)::before,
.website-logo:has(img.loaded)::after,
.social-story-logo:has(img.loaded)::before,
.social-story-logo:has(img.loaded)::after,
.website-story-logo:has(img.loaded)::before,
.website-story-logo:has(img.loaded)::after {
  display: none !important;
  animation: none !important;
}

.social-logo.loaded-ok,
.website-logo.loaded-ok,
.pill-img-wrap.loaded-ok,
.image-shell.is-ready,
.lazy-shell.is-ready {
  background: transparent !important;
  box-shadow: none;
}

/* ── Error placeholder ── */
.lazy-shell.has-error,
.social-logo.has-error,
.website-logo.has-error,
.pill-img-wrap.has-error,
.image-shell.is-failed,
.social-story-logo.has-error,
.website-story-logo.has-error {
  background:
    radial-gradient(circle at 50% 42%, rgba(204, 120, 92, 0.1), transparent 60%),
    linear-gradient(160deg, #26231f 0%, #1c1b18 100%) !important;
  animation: none !important;
  box-shadow: inset 0 0 0 1px rgba(250, 249, 245, 0.06);
}

.lazy-shell.has-error::after,
.social-logo.has-error::after,
.website-logo.has-error::after,
.pill-img-wrap.has-error::after,
.image-shell.is-failed::after,
.social-story-logo.has-error::after,
.website-story-logo.has-error::after {
  content: none !important;
  animation: none !important;
}

.lazy-shell.has-error::before,
.social-logo.has-error::before,
.website-logo.has-error::before,
.pill-img-wrap.has-error::before,
.image-shell.is-failed::before,
.social-story-logo.has-error::before,
.website-story-logo.has-error::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  height: 30%;
  min-width: 16px;
  min-height: 16px;
  max-width: 24px;
  max-height: 24px;
  transform: translate(-50%, -50%);
  z-index: 2;
  background-color: rgba(224, 164, 141, 0.78);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d='M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16Zm0 16v96.69l-26.34-26.35a8 8 0 0 0-11.32 0L128 176.69l-26.34-26.35a8 8 0 0 0-11.32 0L40 200.69V56ZM40 209.31l56-56 26.34 26.35a8 8 0 0 0 11.32 0L160 153.31l56 56ZM96 120a16 16 0 1 1 16-16 16 16 0 0 1-16 16Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d='M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16Zm0 16v96.69l-26.34-26.35a8 8 0 0 0-11.32 0L128 176.69l-26.34-26.35a8 8 0 0 0-11.32 0L40 200.69V56ZM40 209.31l56-56 26.34 26.35a8 8 0 0 0 11.32 0L160 153.31l56 56ZM96 120a16 16 0 1 1 16-16 16 16 0 0 1-16 16Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: lazyErrorIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  opacity: 0.9;
}

.social-story-bg.has-error,
.website-story-bg.has-error {
  background:
    radial-gradient(ellipse at 40% 30%, rgba(204, 120, 92, 0.08), transparent 55%),
    #1c1b18 !important;
}

.social-story-bg.has-error::before,
.website-story-bg.has-error::before,
.social-story-bg.has-error::after,
.website-story-bg.has-error::after {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  img.lazy-img,
  img.lazy-pending,
  img.lazy-img.loaded,
  img.lazy-loaded {
    transition: opacity 0.2s ease !important;
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }

  .lazy-shell.is-loading::before,
  .social-logo.lazy-pending::before,
  .website-logo.lazy-pending::before,
  .lazy-shell.is-loading::after,
  .social-logo.lazy-pending::after,
  .website-logo.lazy-pending::after,
  .social-logo:has(img.lazy-pending)::before,
  .social-logo:has(img.lazy-pending)::after,
  .website-logo:has(img.lazy-pending)::before,
  .website-logo:has(img.lazy-pending)::after {
    animation: none !important;
    opacity: 0.55;
  }
}