/* =============================================================================
   BUSY / "LavaLoader" — cross-browser fix (loads AFTER zeal-ui.min.css to override).

   The original keyframes animate `background-image` between two SVG URLs (white -> gold).
   Safari / WebKit (Mac, iOS) DO NOT animate background-image URL swaps, so the lava looked
   broken on Apple.  Fix: keep each "z" white, and crossfade a GOLD overlay (::after) with
   OPACITY — which every browser animates smoothly.  No markup change required.
   ============================================================================= */

/* Turn OFF the URL-swap animation on the base "z" (stays white) and host the overlay. */
.zt-worker div div {
  position: relative;
  animation-name: none !important;
}

/* The gold overlay that fades in/out over each "z". */
.zt-worker div div::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/_content/Zeal.Razor.Ui/images/Zeal-Logo-ZOnly-Gold.svg) no-repeat;
  opacity: 0;
  pointer-events: none;
  animation-duration: 0.75s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* Stagger the peak left -> right for the "lava" sweep. */
.zt-worker div div:first-child::after  { animation-name: zgold1; }
.zt-worker div div:nth-child(2)::after { animation-name: zgold2; }
.zt-worker div div:nth-child(3)::after { animation-name: zgold3; }
.zt-worker div div:nth-child(4)::after { animation-name: zgold4; }
.zt-worker div div:nth-child(5)::after { animation-name: zgold5; }

@keyframes zgold1 { 0%, 100% { opacity: 0; } 15% { opacity: 1; } 40% { opacity: 0; } }
@keyframes zgold2 { 0%, 100% { opacity: 0; } 30% { opacity: 1; } 55% { opacity: 0; } }
@keyframes zgold3 { 0%, 100% { opacity: 0; } 45% { opacity: 1; } 70% { opacity: 0; } }
@keyframes zgold4 { 0%, 100% { opacity: 0; } 60% { opacity: 1; } 85% { opacity: 0; } }
@keyframes zgold5 { 0%, 100% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 0; } }