/* ================================================================
   FLOATING ELEMENTS · Biblinha
   Estrelas e flores caindo ao fundo da página (clima mágico/fantasia)
   ================================================================ */

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

.magic-item {
  position: absolute;
  top: -60px;
  left: 0;
  width: var(--size);
  height: var(--size);
  opacity: var(--opacity);
  will-change: transform;
  animation-name: magic-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--delay);
  animation-duration: var(--duration);
}

.magic-item svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: magic-spin var(--spin) linear infinite;
}

@keyframes magic-fall {
  0% {
    transform: translate3d(0, -10vh, 0);
  }
  100% {
    transform: translate3d(var(--drift), 110vh, 0);
  }
}

@keyframes magic-spin {
  0%   { transform: rotate(0deg) scale(0.6); filter: drop-shadow(0 0 0 rgba(255, 215, 120, 0)); }
  50%  { transform: rotate(180deg) scale(1.5); filter: drop-shadow(0 0 6px rgba(255, 215, 120, 0.8)); }
  100% { transform: rotate(360deg) scale(0.6); filter: drop-shadow(0 0 0 rgba(255, 215, 120, 0)); }
}

@media (prefers-reduced-motion: reduce) {
  .magic-bg,
  .magic-item {
    display: none;
  }
}