/* Shared effect styles (see js/fx.js) */

.fx-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.fx-bubble {
  position: absolute;
  bottom: -20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.85) 0 18%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.05) 70%);
  animation: fx-rise var(--dur, 7s) linear var(--delay, 0s) infinite;
}

.fx-sparkle {
  position: absolute;
  height: auto;
  animation: fx-twinkle var(--dur, 2.4s) ease-in-out var(--delay, 0s) infinite;
}

.fx-confetti {
  position: absolute;
  will-change: transform, opacity;
}

.fx-bat {
  position: absolute;
  left: 0;
  top: 0;
}
.fx-bat img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center 30%;
  animation: fx-flap 0.22s ease-in-out infinite alternate;
}

@keyframes fx-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 0.9; }
  50% { transform: translate(calc(var(--drift, 0px) * -0.5), calc(var(--rise, 900px) * -0.5)); }
  90% { opacity: 0.8; }
  100% { transform: translate(var(--drift, 0px), calc(var(--rise, 900px) * -1)); opacity: 0; }
}

@keyframes fx-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.6) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.1) rotate(45deg); }
}

@keyframes fx-flap {
  from { transform: scaleY(1); }
  to { transform: scaleY(0.45); }
}