/* Kids decor layer */
#kids-decor-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  overflow: hidden;
  clip-path: inset(var(--kd-safe-top, 0px) 0 0 0);
  -webkit-clip-path: inset(var(--kd-safe-top, 0px) 0 0 0);
}

#kids-decor-layer.kd-paused .kd-elem,
#kids-decor-layer.kd-paused .kd-icon {
  animation-play-state: paused;
}

#kids-decor-layer .kd-elem {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--w, var(--size, 24px));
  height: var(--h, var(--size, 24px));
  opacity: var(--o, 0.7);
  color: var(--c, #ffa9b8);
  filter: blur(var(--blur, 0px));
  transform: translate3d(var(--x0, 0px), var(--y0, 0px), 0)
    rotate(var(--r0, 0deg))
    scale(var(--sc, 1))
    scaleX(var(--sx, 1));
  will-change: transform, opacity;
}

#kids-decor-layer .kd-icon {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: center;
}

.kd-star {
  animation: kd-float var(--dur, 8s) linear forwards;
}

.kd-star .kd-icon {
  animation: kd-twinkle 2.6s ease-in-out infinite;
}

.kd-balloon {
  animation: kd-float var(--dur, 14s) linear forwards;
}

.kd-balloon .kd-icon {
  animation: kd-bob 3.2s ease-in-out infinite;
}

.kd-plane {
  animation: kd-float var(--dur, 10s) linear forwards;
}

.kd-plane .kd-icon {
  animation: kd-rock 2.8s ease-in-out infinite;
}

.kd-moon {
  animation: kd-float var(--dur, 16s) linear forwards;
}

.kd-moon .kd-icon {
  animation: kd-moon-glow 6s ease-in-out infinite;
}

.kd-bird {
  display: flex;
  align-items: center;
  gap: 6px;
  animation: kd-float var(--dur, 8s) linear forwards;
}

.kd-bird .kd-icon {
  width: var(--bird-size, 16px);
  height: var(--bird-size, 16px);
  animation: kd-flap 0.9s ease-in-out infinite;
}

@keyframes kd-float {
  0% {
    transform: translate3d(var(--x0), var(--y0), 0)
      rotate(var(--r0)) scale(var(--sc, 1)) scaleX(var(--sx, 1));
    opacity: 0;
  }
  10% {
    opacity: var(--o);
  }
  90% {
    opacity: var(--o);
  }
  100% {
    transform: translate3d(var(--x1), var(--y1), 0)
      rotate(var(--r1)) scale(var(--sc, 1)) scaleX(var(--sx, 1));
    opacity: 0;
  }
}

@keyframes kd-twinkle {
  0% { opacity: 0.55; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 0.65; transform: scale(0.94); }
}

@keyframes kd-bob {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -4px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes kd-rock {
  0% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
  100% { transform: rotate(-3deg); }
}

@keyframes kd-moon-glow {
  0% { opacity: 0.6; transform: translate3d(0, 0, 0) scale(0.98); }
  50% { opacity: 0.85; transform: translate3d(0, -2px, 0) scale(1.02); }
  100% { opacity: 0.6; transform: translate3d(0, 0, 0) scale(0.98); }
}

@keyframes kd-flap {
  0% { transform: scaleX(1) translate3d(0, 0, 0); }
  50% { transform: scaleX(0.9) translate3d(0, -1px, 0); }
  100% { transform: scaleX(1) translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #kids-decor-layer {
    display: none;
  }
}