/* Animate the photographed flames using small crops of the same original.
   The unchanged full image remains the fallback, including without JS. */
.hero__flames{position:absolute;z-index:2;top:0;left:0;width:1672px;height:941px;max-width:none;transform-origin:0 0;pointer-events:none}
.hero__flame-patch{position:absolute;background-image:url("hero-cakes-collection.webp");background-size:1672px 941px;background-repeat:no-repeat;transform-origin:50% 100%;animation:hero-photo-flame var(--flame-duration,1.4s) ease-in-out var(--flame-delay,0s) infinite alternate;will-change:transform;-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent),linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent),linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);mask-composite:intersect}
@keyframes hero-photo-flame{
  0%{transform:skewX(-1.8deg) scale(.94,.94)}
  26%{transform:skewX(1.2deg) scale(1.05,1.035)}
  53%{transform:skewX(-.8deg) scale(.98,1.06)}
  78%{transform:skewX(2.2deg) scale(1.06,.97)}
  100%{transform:skewX(-1.2deg) scale(.96,1.02)}
}
.hero__flames.is-paused .hero__flame-patch{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hero__flame-patch{animation:none;will-change:auto}}