/* ═══════════════════════════════════════════════════════════
   LITASO.COM — fire.css
   GOO fire animation (bottom of hero)
═══════════════════════════════════════════════════════════ */

#fw {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 44%;
  overflow: hidden; z-index: 2; pointer-events: none;
  contain: strict;
}

#ft {
  position: absolute; width: 100%; height: 100%; bottom: 0;
  animation: tide 8s ease-in-out infinite;
  will-change: transform;
}
@keyframes tide {
  0%,100% { transform: translateY(0); }
  30%      { transform: translateY(-45px); }
  60%      { transform: translateY(-16px); }
  80%      { transform: translateY(-60px); }
}

#fg {
  filter: url(#goo);
  position: absolute; width: 100%; height: 100%;
  will-change: transform;
  transform: translateZ(0);
}

#fb {
  position: absolute; left: 0; bottom: -260px;
  width: 100%; height: 310px;
  background: #fff;
}

#fg figure {
  position: absolute; bottom: 0;
  background: #fff; border-radius: 50%; margin: 0;
  will-change: transform, opacity;
}