/* FuegoFranny warped SVG image loader */

.ff-img-wrap {
  position: relative;
  overflow: hidden;
  background: #070403;
  isolation: isolate;
  border-radius: inherit;
}

.ff-img-wrap > img {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 520ms ease, transform 720ms cubic-bezier(.2,.8,.2,1);
}

.ff-img-wrap.is-loaded > img {
  opacity: 1;
  transform: scale(1);
}

.ff-loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: var(--ff-loader-art, url("../ff-squiggle-flame.svg"));
  background-size: 140% 120%;
  background-position: center;
  animation: ff-warp 1.15s infinite linear alternate, ff-pan 3.2s infinite ease-in-out;
  filter: saturate(1.4) contrast(1.1);
  transition: opacity 360ms ease, transform 500ms ease;
  pointer-events: none;
}

.ff-img-wrap.is-loaded .ff-loader {
  opacity: 0;
  transform: scale(1.2);
}

@keyframes ff-warp {
  0%   { transform: scaleX(1.25) scaleY(.72) skewX(-10deg); border-radius: 18% 82% 71% 29%; }
  35%  { transform: scaleX(.75) scaleY(1.35) skewY(8deg); border-radius: 72% 28% 23% 77%; }
  70%  { transform: scaleX(1.55) scaleY(.82) skewX(14deg); border-radius: 42% 58% 69% 31%; }
  100% { transform: scaleX(.95) scaleY(1.12) skewY(-12deg); border-radius: 77% 23% 39% 61%; }
}

@keyframes ff-pan {
  0% { background-position: 20% 50%; }
  50% { background-position: 80% 42%; }
  100% { background-position: 35% 65%; }
}

/* Optional variants */
.ff-loader.blob { --ff-loader-art: url("../ff-house-fire-blob.svg"); }
.ff-loader.lines { --ff-loader-art: url("../ff-warp-lines.svg"); }

@media (prefers-reduced-motion: reduce) {
  .ff-loader { animation: none; }
  .ff-img-wrap > img { transition: opacity 250ms ease; transform: none; }
}