.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.cloud {
  position: absolute;
  background: radial-gradient(
    ellipse at 50% 60%,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.72) 45%,
    rgba(255, 255, 255, 0) 72%
  );
  filter: blur(2px);
  animation: drift linear infinite;
}

.cloud--1 {
  top: 6%;
  width: 26rem;
  height: 11rem;
  opacity: 0.9;
  animation-duration: 96s;
}

.cloud--2 {
  top: 28%;
  width: 18rem;
  height: 8rem;
  opacity: 0.7;
  animation-duration: 132s;
  animation-delay: -40s;
}

.cloud--3 {
  top: 58%;
  width: 32rem;
  height: 13rem;
  opacity: 0.55;
  animation-duration: 158s;
  animation-delay: -80s;
}

.cloud--4 {
  top: 80%;
  width: 21rem;
  height: 9rem;
  opacity: 0.6;
  animation-duration: 116s;
  animation-delay: -20s;
}

@keyframes drift {
  from {
    transform: translateX(-40vw);
  }
  to {
    transform: translateX(115vw);
  }
}

.bubbles {
  position: absolute;
  inset: 0;
}

.bubble {
  position: absolute;
  bottom: -6rem;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 30%,
    rgba(255, 255, 255, 0.95),
    rgba(168, 216, 248, 0.42) 62%,
    rgba(168, 216, 248, 0) 72%
  );
  border: 1px solid rgba(255, 255, 255, 0.6);
  animation: rise linear infinite;
}

@keyframes rise {
  from {
    transform: translate3d(0, 0, 0) scale(0.6);
    opacity: 0;
  }
  12% {
    opacity: 0.75;
  }
  80% {
    opacity: 0.5;
  }
  to {
    transform: translate3d(var(--sway, 3rem), -112svh, 0) scale(1);
    opacity: 0;
  }
}

.butterfly-layer {
  position: fixed;
  inset: 0;
  /* Above the intro overlay so the burst is visible, then dropped behind the
     page content once the invitation is on screen. */
  z-index: 21;
  pointer-events: none;
  overflow: hidden;
}

.butterfly-layer.is-ambient {
  z-index: 1;
}

.butterfly {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--size, 30px);
  will-change: transform;
}

.butterfly__svg {
  display: block;
  width: 100%;
  height: auto;
  perspective: 240px;
  overflow: visible;
  filter: drop-shadow(0 4px 6px rgba(45, 116, 170, 0.18));
}

.butterfly .wing {
  transform-box: fill-box;
  animation: flap var(--flap, 260ms) ease-in-out infinite;
}

.butterfly .wing path {
  fill: var(--wing-a);
  stroke: var(--wing-edge);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.butterfly .wing path + path {
  fill: var(--wing-b);
}

.butterfly .wing--l {
  transform-origin: 100% 50%;
}

.butterfly .wing--r {
  transform-origin: 0% 50%;
  animation-name: flap-mirror;
}

.butterfly__torso {
  fill: var(--wing-edge);
}

.butterfly__antenna {
  fill: none;
  stroke: var(--wing-edge);
  stroke-width: 2;
  stroke-linecap: round;
}

@keyframes flap {
  0%,
  100% {
    transform: rotateY(-6deg);
  }
  50% {
    transform: rotateY(72deg);
  }
}

@keyframes flap-mirror {
  0%,
  100% {
    transform: rotateY(6deg);
  }
  50% {
    transform: rotateY(-72deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cloud,
  .bubble {
    animation: none;
  }

  .butterfly-layer {
    display: none;
  }
}