/**
 * Фон Songio — как на главной странице
 * Градиенты, сетка, pulse-glow
 */
.bg-songio {
    background: 
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 20% 100%, rgba(225, 98, 82, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse 70% 50% at 80% 80%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #0a0812 0%, #1a0f2e 25%, #0f0d14 50%, #1a1625 75%, #0a0812 100%);
    background-attachment: fixed;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}
.bg-songio::after {
    content: '';
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    min-width: 100vw;
    min-height: 100vh;
    background: 
        radial-gradient(circle at 30% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 70% 80%, rgba(225, 98, 82, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: pulse-glow 8s ease-in-out infinite;
}
@keyframes pulse-glow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}
.clefs-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.page-content { position: relative; z-index: 1; }
.clef {
    position: absolute;
    font-family: 'Noto Music', serif;
    color: rgba(255, 255, 255, 0.08);
    font-size: 1.25rem;
    line-height: 1;
    animation: clef-fade 12s ease-in-out infinite;
}
.clef-1 { left: 5%; top: 15%; animation-delay: 0s; }
.clef-2 { left: 75%; top: 25%; animation-delay: 2s; }
.clef-3 { left: 15%; top: 55%; animation-delay: 4s; }
.clef-4 { left: 80%; top: 60%; animation-delay: 1s; }
.clef-5 { left: 45%; top: 8%; animation-delay: 6s; }
.clef-6 { left: 8%; top: 75%; animation-delay: 3s; }
.clef-7 { left: 88%; top: 75%; animation-delay: 5s; }
.clef-8 { left: 35%; top: 80%; animation-delay: 7s; }
.clef-9 { left: 60%; top: 12%; animation-delay: 8s; }
@keyframes clef-fade {
    0%, 100% { opacity: 0; transform: scale(0.95); }
    15% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(1.02); }
    85% { opacity: 0.5; transform: scale(1); }
}