/* ------------------------------------------------------------------------
   Pharma Ecosystem Animation for 'Offre' Section
   ------------------------------------------------------------------------ */

.animation-container {
    overflow: hidden;
    perspective: 1000px;
}

/* Central Core */
.core-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    z-index: 10;
    position: relative;
    animation: pulse-core 2s infinite ease-in-out;
}

.core-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid var(--primary-color);
    opacity: 0;
    animation: ripple 2s infinite cubic-bezier(0, 0, 0.2, 1);
    z-index: 5;
}

@keyframes pulse-core {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 20px rgba(var(--primary-color-rgb), 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0);
    }
}

@keyframes ripple {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

/* Orbits */
.orbit-1 {
    width: 280px;
    height: 280px;
    animation: rotate-cw 20s linear infinite;
}

.orbit-2 {
    width: 400px;
    height: 400px;
    animation: rotate-ccw 25s linear infinite;
}

@keyframes rotate-cw {
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes rotate-ccw {
    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

/* Orbiters */
.orbiter {
    top: 50%;
    left: 50%;
    position: absolute;
}

/* Orbiter 1 (On Orbit 1) */
.orbiter-1 {
    width: 280px;
    height: 280px;
    /* Same as orbit-1 */
    transform: translate(-50%, -50%);
    /* Centered */
    animation: rotate-cw 20s linear infinite;
    pointer-events: none;
}

.orbiter-1 .orbiter-icon {
    position: absolute;
    top: 0;
    left: 50%;
    /* Position at top */
    transform: translate(-50%, -50%) rotate(0deg);
    /* Counter-rotate logic handled below */
    animation: counter-rotate-cw 20s linear infinite;
    /* Keep icon upright */
    pointer-events: auto;
}

/* Orbiter 2 (On Orbit 2) */
.orbiter-2 {
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%);
    animation: rotate-ccw 25s linear infinite;
    pointer-events: none;
}

.orbiter-2 .orbiter-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: counter-rotate-ccw 25s linear infinite;
    pointer-events: auto;
}

/* Orbiter 3 (On Orbit 2, different pos) */
.orbiter-3 {
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%) rotate(180deg);
    /* Start at 180deg offset */
    animation: rotate-ccw-offset 25s linear infinite;
    pointer-events: none;
}

.orbiter-3 .orbiter-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: counter-rotate-ccw 25s linear infinite;
    pointer-events: auto;
}

@keyframes rotate-ccw-offset {
    0% {
        transform: translate(-50%, -50%) rotate(180deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(-180deg);
    }
}

/* Keep icons upright */
@keyframes counter-rotate-cw {
    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@keyframes counter-rotate-ccw {
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Particles */
.particle {
    position: absolute;
    font-size: 1.5rem;
}

.particle-1 {
    top: 20%;
    left: 10%;
    animation: float 6s ease-in-out infinite;
}

.particle-2 {
    bottom: 15%;
    right: 15%;
    animation: float 8s ease-in-out infinite 1s;
}

.particle-3 {
    top: 10%;
    right: 20%;
    animation: float 5s ease-in-out infinite 2s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}