/* Orbes et fils lumineux en arrière-plan (SVG). Drift/oscillation purement
   CSS, aucune logique JS propre (le parallaxe vit dans effects/parallax.js). */

.orbs {
    z-index: 0;
    mix-blend-mode: screen;
}

.orb {
    transform-box: fill-box;
    transform-origin: center;
}

.orb-a { animation: drift-a 22s ease-in-out infinite alternate; }
.orb-b { animation: drift-b 28s ease-in-out infinite alternate; }
.orb-c { animation: drift-c 26s ease-in-out infinite alternate; }
.orb-d { animation: drift-d 19s ease-in-out infinite alternate; }
.orb-e { animation: drift-e 24s ease-in-out infinite alternate; }

@keyframes drift-a {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(7%, 9%) scale(1.15); }
}

@keyframes drift-b {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-8%, 6%) scale(0.9); }
}

@keyframes drift-c {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(5%, -7%) scale(1.1); }
}

@keyframes drift-d {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-6%, -8%) scale(1.2); }
}

@keyframes drift-e {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-9%, 5%) scale(0.85); }
}

.wire {
    transform-box: fill-box;
    transform-origin: center;
}

.wire-a { animation: sway-a 34s ease-in-out infinite alternate; }
.wire-b { animation: sway-b 40s ease-in-out infinite alternate; }
.wire-c { animation: sway-c 37s ease-in-out infinite alternate; }
.wire-d { animation: sway-d 45s ease-in-out infinite alternate; }

@keyframes sway-a {
    from { transform: translate(0, 0) rotate(0deg); }
    to { transform: translate(4%, 6%) rotate(2deg); }
}

@keyframes sway-b {
    from { transform: translate(0, 0) rotate(0deg); }
    to { transform: translate(-5%, -4%) rotate(-1.5deg); }
}

@keyframes sway-c {
    from { transform: translate(0, 0) rotate(0deg); }
    to { transform: translate(5%, -5%) rotate(1.5deg); }
}

@keyframes sway-d {
    from { transform: translate(0, 0) rotate(0deg); }
    to { transform: translate(-4%, 5%) rotate(-2deg); }
}

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