/**
 * WS Booster - Galerie Vortex (spirale cinematique)
 * Chaque image tourne sur un cercle tout en se scalant de 0 a 1 et inversement
 * (aspiration vers centre ou eclosion depuis centre).
 */

.ws-vg {
    position: relative;
    width: 100%;
    height: 560px;
    overflow: hidden;
    perspective: 1000px;
}

.ws-vg__item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--ws-vg-size, 140px);
    height: var(--ws-vg-size, 140px);
    margin-left: calc(var(--ws-vg-size, 140px) / -2);
    margin-top: calc(var(--ws-vg-size, 140px) / -2);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: ws-vg-inward var(--ws-vg-speed, 18s) linear infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform, opacity;
    transform-origin: 50% 50%;
}

.ws-vg--outward .ws-vg__item {
    animation-name: ws-vg-outward;
}

.ws-vg__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Inward : part de loin (scale 0.1 + radius 400) arrive au centre (scale 1 + radius 0) puis disparait */
@keyframes ws-vg-inward {
    0% {
        transform: rotate(var(--angle)) translateX(400px) rotate(calc(var(--angle) * -1)) scale(0.15);
        opacity: 0;
    }
    15% { opacity: 1; }
    80% {
        transform: rotate(calc(var(--angle) + 720deg)) translateX(50px) rotate(calc((var(--angle) + 720deg) * -1)) scale(1);
        opacity: 1;
    }
    100% {
        transform: rotate(calc(var(--angle) + 900deg)) translateX(0) rotate(calc((var(--angle) + 900deg) * -1)) scale(0);
        opacity: 0;
    }
}

@keyframes ws-vg-outward {
    0% {
        transform: rotate(var(--angle)) translateX(0) rotate(calc(var(--angle) * -1)) scale(0.15);
        opacity: 0;
    }
    15% { opacity: 1; }
    80% {
        transform: rotate(calc(var(--angle) + 720deg)) translateX(380px) rotate(calc((var(--angle) + 720deg) * -1)) scale(1);
        opacity: 1;
    }
    100% {
        transform: rotate(calc(var(--angle) + 900deg)) translateX(500px) rotate(calc((var(--angle) + 900deg) * -1)) scale(0.15);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ws-vg__item {
        animation: none;
        transform: rotate(var(--angle)) translateX(200px) rotate(calc(var(--angle) * -1)) scale(0.8);
    }
}