/* music-symbols.css - Símbolos musicales decorativos orbitando el sistema planetario */

.music-symbol {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 4;
}

.music-symbol__icon {
    position: absolute;
    font-size: 26px;
    line-height: 1;
    color: rgba(232, 244, 255, 0.65);
    text-shadow: 0 0 8px rgba(139, 92, 246, 0.6), 0 0 16px rgba(34, 211, 238, 0.4);
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
    animation: musicFloat 3s ease-in-out infinite alternate;
}

.music-symbol__icon.violet {
    color: rgba(196, 181, 253, 0.6);
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.7), 0 0 20px rgba(34, 211, 238, 0.3);
}

.music-symbol__icon.cyan {
    color: rgba(168, 247, 255, 0.55);
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.6), 0 0 16px rgba(139, 92, 246, 0.3);
}

/* Rotación propia del símbolo sobre su eje */
.music-symbol__icon.spin-slow {
    animation: musicFloat 3s ease-in-out infinite alternate, spinSelf 30s linear infinite;
}

.music-symbol__icon.spin-medium {
    animation: musicFloat 3s ease-in-out infinite alternate, spinSelf 25s linear infinite reverse;
}

.music-symbol__icon.spin-fast {
    animation: musicFloat 3s ease-in-out infinite alternate, spinSelf 20s linear infinite;
}

@keyframes spinSelf {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes musicFloat {
    0% {
        opacity: 0.4;
        transform: translate(-50%, -50%) translateY(0);
    }

    50% {
        opacity: 0.7;
        transform: translate(-50%, -50%) translateY(-3px);
    }

    100% {
        opacity: 0.4;
        transform: translate(-50%, -50%) translateY(0);
    }
}

/* Responsive: reducir cantidad visible */
@media (max-width: 768px) {
    .music-symbol__icon {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .music-symbol__icon {
        font-size: 14px;
    }
}

/* Reduced motion: ocultar completamente (son puramente decorativos) */
@media (prefers-reduced-motion: reduce) {
    .music-symbol {
        display: none;
    }
}