/* Fond animé CNRHP — particules plaquettes / globules (inspiré biogemh-su.fr) */

@keyframes bg-drift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes particle-orbit {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

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

    .background span {
        animation: none;
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(135deg, #c5d9f2 0%, #dce8f8 28%, #b8cfe8 55%, #9bb8dc 100%);
    background-size: 200% 200%;
    animation: bg-drift 28s ease-in-out infinite;
}

.background span {
    position: absolute;
    width: auto;
    height: auto;
    opacity: 0.78;
    backface-visibility: hidden;
    animation: particle-orbit linear infinite;
    background: transparent;
}

.background span img {
    display: block;
    width: auto;
    height: auto;
    pointer-events: none;
    user-select: none;
}

/* pla / red : petits fichiers, taille native OK */
.background .particle-pla img,
.background .particle-red img {
    max-height: 2.1rem;
    max-width: 2.1rem;
}

/*
 * ac1–ac3 : grands canvas (~400 px) — afficher l'image entière ;
 * mix-blend-mode: screen neutralise le fond noir.
 */
.background .particle-ac {
    overflow: visible;
}

.background .particle-ac img {
    position: static;
    transform: none;
    display: block;
    width: auto;
    height: auto;
    max-height: 3.1rem;
    max-width: 3.1rem;
    mix-blend-mode: screen;
}

/* 20 particules : 9 pla (45 %), 3 ac (15 %), 8 red (40 %) */
.background span:nth-child(1)  { top:  7%; left: 14%; animation-duration: 48s; animation-delay:  -8s; transform-origin:  24vw  16vh; opacity: 0.8; }
.background span:nth-child(2)  { top: 20%; left: 76%; animation-duration: 44s; animation-delay: -22s; transform-origin: -18vw -12vh; opacity: 0.78; }
.background span:nth-child(3)  { top: 34%; left: 32%; animation-duration: 52s; animation-delay: -35s; transform-origin:  14vw  18vh; opacity: 0.82; }
.background span:nth-child(4)  { top: 12%; left: 52%; animation-duration: 50s; animation-delay: -15s; transform-origin: -12vw  14vh; opacity: 0.81; }
.background span:nth-child(5)  { top: 52%; left: 86%; animation-duration: 46s; animation-delay: -28s; transform-origin: -22vw   8vh; opacity: 0.77; }
.background span:nth-child(6)  { top: 24%; left:  8%; animation-duration: 54s; animation-delay: -42s; transform-origin:  20vw -14vh; opacity: 0.83; }
.background span:nth-child(7)  { top: 66%; left: 18%; animation-duration: 40s; animation-delay: -20s; transform-origin:  22vw  10vh; opacity: 0.8; }
.background span:nth-child(8)  { top: 44%; left: 64%; animation-duration: 47s; animation-delay: -32s; transform-origin:  -8vw -18vh; opacity: 0.76; }
.background span:nth-child(9)  { top: 16%; left: 90%; animation-duration: 43s; animation-delay: -38s; transform-origin: -24vw   6vh; opacity: 0.84; }
.background span:nth-child(10) { top: 58%; left: 42%; animation-duration: 56s; animation-delay: -48s; transform-origin: -16vw -10vh; opacity: 0.75; }
.background span:nth-child(11) { top: 78%; left: 56%; animation-duration: 42s; animation-delay: -10s; transform-origin:  10vw  16vh; opacity: 0.79; }
.background span:nth-child(12) { top: 86%; left: 28%; animation-duration: 49s; animation-delay: -52s; transform-origin:  16vw -20vh; opacity: 0.77; }
.background span:nth-child(13) { top:  4%; left: 38%; animation-duration: 41s; animation-delay: -33s; transform-origin:  14vw  12vh; opacity: 0.8; }
.background span:nth-child(14) { top: 38%; left: 22%; animation-duration: 53s; animation-delay:  -5s; transform-origin: -10vw  16vh; opacity: 0.78; }
.background span:nth-child(15) { top: 72%; left: 74%; animation-duration: 39s; animation-delay: -19s; transform-origin: -22vw  -6vh; opacity: 0.82; }
.background span:nth-child(16) { top: 48%; left:  6%; animation-duration: 57s; animation-delay: -41s; transform-origin:  18vw  14vh; opacity: 0.76; }
.background span:nth-child(17) { top: 92%; left: 68%; animation-duration: 45s; animation-delay: -27s; transform-origin:   6vw -16vh; opacity: 0.8; }
.background span:nth-child(18) { top: 30%; left: 48%; animation-duration: 51s; animation-delay: -44s; transform-origin: -14vw   8vh; opacity: 0.74; }
.background span:nth-child(19) { top: 62%; left: 92%; animation-duration: 38s; animation-delay: -14s; transform-origin: -26vw   4vh; opacity: 0.79; }
.background span:nth-child(20) { top: 82%; left:  8%; animation-duration: 55s; animation-delay: -36s; transform-origin:  20vw  22vh; opacity: 0.77; }

@media (max-width: 900px) {
    .background span {
        opacity: 0.65;
    }

    .background .particle-pla img,
    .background .particle-red img {
        max-height: 1.5rem;
        max-width: 1.5rem;
    }

    .background .particle-ac img {
        max-height: 2.6rem;
        max-width: 2.6rem;
    }

    .background span:nth-child(5n) {
        display: none;
    }
}