.halloween-boo-splash {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2000;
  width: min(82vw, 560px);
  height: min(96vw, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: center center;
  animation: halloween-boo-grow 1.05s cubic-bezier(0.16, 1.15, 0.32, 1) forwards;
  opacity: 1;
  transition: opacity 0.45s ease;
}

.halloween-boo-splash.is-leaving {
  opacity: 0;
}

.halloween-boo-splash__image {
  height: 185%;
  width: auto;
  max-width: none;
  flex-shrink: 0;
}

@keyframes halloween-boo-grow {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.business-banner {
  position: relative;
}

.halloween-banner-fog {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.halloween-banner-fog__cloud {
  position: absolute;
  top: var(--fog-top, 20%);
  width: var(--fog-size, 34%);
  opacity: var(--fog-opacity, 0.75);
  animation-name: halloween-fog-drift;
  animation-duration: var(--fog-dur, 24s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--fog-delay, -8s);
  animation-direction: var(--fog-direction, normal);
}

.halloween-banner-fog__cloud img {
  display: block;
  width: 100%;
  height: auto;
  animation-name: halloween-fog-bob;
  animation-duration: var(--fog-bob, 4.8s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.halloween-banner-fog__cloud:nth-child(1) {
  --fog-top: 4%;
  --fog-size: 42%;
  --fog-dur: 19s;
  --fog-delay: -3s;
}

.halloween-banner-fog__cloud:nth-child(2) {
  --fog-top: 38%;
  --fog-size: 26%;
  --fog-dur: 27s;
  --fog-delay: -14s;
  --fog-direction: reverse;
}

.halloween-banner-fog__cloud:nth-child(3) {
  --fog-top: 62%;
  --fog-size: 48%;
  --fog-dur: 22s;
  --fog-delay: -9s;
}

.halloween-banner-fog__cloud:nth-child(4) {
  --fog-top: 18%;
  --fog-size: 22%;
  --fog-dur: 31s;
  --fog-delay: -20s;
  --fog-direction: reverse;
}

.halloween-banner-fog__cloud:nth-child(5) {
  --fog-top: 48%;
  --fog-size: 36%;
  --fog-dur: 17s;
  --fog-delay: -6s;
}

.halloween-banner-fog__cloud:nth-child(6) {
  --fog-top: 8%;
  --fog-size: 30%;
  --fog-dur: 25s;
  --fog-delay: -18s;
}

.halloween-banner-fog__cloud:nth-child(7) {
  --fog-top: 70%;
  --fog-size: 24%;
  --fog-dur: 29s;
  --fog-delay: -11s;
  --fog-direction: reverse;
}

@keyframes halloween-fog-drift {
  from {
    left: 108%;
  }

  to {
    left: -52%;
  }
}

@keyframes halloween-fog-bob {
  from {
    transform: translateY(0) rotate(var(--fog-tilt, 0deg));
  }

  to {
    transform: translateY(-8px) rotate(var(--fog-tilt, 0deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .halloween-boo-splash {
    transform: translate(-50%, -50%) scale(1);
    animation: none;
  }

  .halloween-boo-splash.is-leaving {
    transition: none;
  }

  .halloween-banner-fog__cloud,
  .halloween-banner-fog__cloud img {
    animation: none;
  }
}