/* =========================================================
   APOLLO PROJECT CTA - V2.1
   ========================================================= */

.apollo-project-cta {
    --apollo-bg: #0c0c0c;
    --apollo-panel: #111116;
    --apollo-purple: #7045dd;
    --apollo-pink: #e069ff;
    --apollo-cyan: #00E5FF;
    --apollo-border: rgba(255,255,255,.09);

    position: relative;

    width: 100%;
    padding: 120px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(112,69,221,.045),
            transparent 28%
        ),
        radial-gradient(
            circle at 82% 30%,
            rgba(0,229,255,.025),
            transparent 24%
        ),
        var(--apollo-bg);
}


.apollo-project-cta *,
.apollo-project-cta *::before,
.apollo-project-cta *::after {
    box-sizing: border-box;
}


.apollo-project-cta-inner {
    width: min(1380px, calc(100% - 90px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: .92fr 1.08fr;
    align-items: center;

    gap: clamp(70px, 8vw, 130px);
}


/* =========================================================
   CERCLE
   ========================================================= */

.apollo-project-cta-left {
    display: flex;
    justify-content: center;
}


.apollo-project-cta-stage {
    position: relative;

    width: 500px;
    max-width: 100%;

    aspect-ratio: 1;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* orbite extérieure */

.apollo-project-cta-orbit {
    position: absolute;

    width: 88%;
    height: 88%;

    border:
        1px solid rgba(224,105,255,.23);

    border-radius: 50%;

    box-shadow:
        inset 0 0 80px rgba(112,69,221,.018),
        0 0 50px rgba(112,69,221,.025);

    pointer-events: none;
}


/* points */

.apollo-project-cta-dot {
    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    z-index: 3;
}

.apollo-project-cta-dot-pink {
    left: 8%;
    top: 38%;

    background: var(--apollo-pink);

    box-shadow:
        0 0 18px rgba(224,105,255,.75);
}

.apollo-project-cta-dot-cyan {
    right: 10%;
    bottom: 26%;

    width: 7px;
    height: 7px;

    background: var(--apollo-cyan);

    box-shadow:
        0 0 18px rgba(0,229,255,.7);
}


/* cercle principal */

.apollo-project-cta-circle {
    --move-x: 0px;
    --move-y: 0px;
    --fill-x: 50%;
    --fill-y: 50%;

    position: relative;

    width: 67%;
    height: 67%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.15);

    border-radius: 50%;

    background:
        rgba(17,17,22,.76);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    text-decoration: none !important;

    transform:
        translate(
            var(--move-x),
            var(--move-y)
        );

    transition:
        transform .22s ease-out,
        border-color .35s ease,
        box-shadow .35s ease;

    z-index: 2;
}


.apollo-project-cta-circle:hover {
    border-color:
        rgba(224,105,255,.35);

    box-shadow:
        0 30px 70px rgba(0,0,0,.32),
        0 0 42px rgba(112,69,221,.10);
}


/* remplissage hover */

.apollo-project-cta-fill {
    position: absolute;

    inset: -3px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 25%,
            #00E5FF 0%,
            #7045dd 35%,
            #e069ff 72%,
            #b845e0 100%
        );

    clip-path:
        circle(
            0%
            at
            var(--fill-x)
            var(--fill-y)
        );

    transition:
        clip-path .58s
        cubic-bezier(.22,.61,.36,1);

    z-index: 1;
}


.apollo-project-cta-circle.is-active
.apollo-project-cta-fill {
    clip-path:
        circle(
            150%
            at
            var(--fill-x)
            var(--fill-y)
        );
}


/* contenu cercle */

.apollo-project-cta-circle-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 20px;

    color: #fff;

    transition:
        color .3s ease,
        transform .3s ease;
}


.apollo-project-cta-circle.is-active
.apollo-project-cta-circle-content {
    transform:
        scale(1.035);
}


.apollo-project-cta-circle-label {
    font-family:
        Akshar,
        sans-serif;

    font-size:
        clamp(34px, 3vw, 50px);

    line-height: .95;

    font-weight: 500;

    letter-spacing: -.03em;
}


.apollo-project-cta-circle-arrow {
    font-family:
        Arial,
        sans-serif;

    font-size: 28px;
    line-height: 1;

    color: var(--apollo-cyan);

    transition:
        color .3s ease,
        transform .3s ease;
}


.apollo-project-cta-circle.is-active
.apollo-project-cta-circle-arrow {
    color: #fff;

    transform:
        translate(4px,-4px);
}


/* =========================================================
   PANNEAU DROIT
   ========================================================= */

.apollo-project-cta-panel {
    position: relative;

    max-width: 650px;

    padding:
        clamp(40px, 4vw, 62px);

    overflow: hidden;

    border:
        1px solid var(--apollo-border);

    border-radius: 20px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(0,229,255,.045),
            transparent 32%
        ),
        radial-gradient(
            circle at 0 100%,
            rgba(224,105,255,.045),
            transparent 32%
        ),
        rgba(17,17,22,.88);

    box-shadow:
        0 35px 90px rgba(0,0,0,.26);
}


/* ligne décorative supérieure */

.apollo-project-cta-panel::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 42%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--apollo-purple),
            var(--apollo-pink),
            var(--apollo-cyan)
        );
}


/* eyebrow */

.apollo-project-cta-eyebrow {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 26px;

    font-family:
        Roboto,
        sans-serif;

    font-size: 11px;
    line-height: 1;

    font-weight: 600;

    letter-spacing: .16em;
    text-transform: uppercase;

    color:
        rgba(255,255,255,.42);
}


.apollo-project-cta-eyebrow::before {
    content: "";

    width: 28px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--apollo-pink),
            var(--apollo-cyan)
        );
}


/* titre */

.apollo-project-cta-title {
    margin:
        0 0 28px !important;

    color: #fff !important;

    font-family:
        Akshar,
        sans-serif !important;

    font-size:
        clamp(48px, 4.2vw, 72px) !important;

    line-height:
        .98 !important;

    font-weight:
        400 !important;

    letter-spacing:
        -.035em !important;

    text-transform:
        none !important;
}


/* texte */

.apollo-project-cta-text {
    max-width: 540px;

    margin:
        0 0 38px !important;

    color:
        rgba(255,255,255,.58) !important;

    font-family:
        Roboto,
        sans-serif;

    font-size: 16px;
    line-height: 1.75;

    font-weight: 400;
}


/* =========================================================
   LIQUID BUTTON
   ========================================================= */

.apollo-project-liquid-button {
    position: relative;

    display: block;

    width: 100%;
    min-height: 60px;

    overflow: hidden;
    isolation: isolate;

    border:
        1px solid rgba(255,255,255,.14);

    border-radius: 10px;

    background:
        linear-gradient(
            115deg,
            #7045dd 0%,
            #9b45e5 46%,
            #d353ef 100%
        );

    text-decoration:
        none !important;

    box-shadow:
        0 12px 32px rgba(112,69,221,.14);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.apollo-project-liquid-content {
    position: relative;
    z-index: 5;

    min-height: 60px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding:
        0 24px;

    color: #fff;

    font-family:
        Roboto,
        sans-serif;

    font-size: 13px;
    font-weight: 600;

    pointer-events: none;
}


.apollo-project-liquid-bg {
    position: absolute;
    z-index: 1;

    inset: -40%;

    opacity: 0;

    filter:
        blur(4px)
        saturate(1.12);

    transform:
        scale(.98);

    transition:
        opacity .25s ease,
        transform .35s ease;

    pointer-events: none;
}


.apollo-project-liquid-blob {
    position: absolute;

    display: block;

    border-radius: 50%;

    filter:
        blur(10px);

    mix-blend-mode: screen;
}


.apollo-project-liquid-button
.blob-1 {
    width: 58%;
    height: 100%;

    left: -5%;
    top: 0;

    background:
        radial-gradient(
            circle,
            #e069ff,
            #7045dd 70%
        );
}


.apollo-project-liquid-button
.blob-2 {
    width: 55%;
    height: 105%;

    right: -4%;
    top: -10%;

    background:
        radial-gradient(
            circle,
            #00E5FF,
            #7045dd 72%
        );
}


.apollo-project-liquid-button
.blob-3 {
    width: 52%;
    height: 90%;

    left: 30%;
    bottom: -30%;

    background:
        radial-gradient(
            circle,
            #d353ef,
            #7045dd 72%
        );
}


.apollo-project-liquid-button:hover {
    transform:
        translateY(-2px)
        scale(1.005);

    box-shadow:
        0 16px 42px rgba(190,85,237,.20),
        0 0 28px rgba(0,229,255,.08);
}


.apollo-project-liquid-button:hover
.apollo-project-liquid-bg {
    opacity: 1;

    transform:
        scale(1.05);
}


.apollo-project-liquid-button:hover
.blob-1 {
    animation:
        apolloProjectBlob1
        3.4s ease-in-out
        infinite alternate;
}


.apollo-project-liquid-button:hover
.blob-2 {
    animation:
        apolloProjectBlob2
        4s ease-in-out
        infinite alternate;
}


.apollo-project-liquid-button:hover
.blob-3 {
    animation:
        apolloProjectBlob3
        4.4s ease-in-out
        infinite alternate;
}


@keyframes apolloProjectBlob1 {

    from {
        transform:
            translate(-8%,-4%)
            scale(1);
    }

    to {
        transform:
            translate(42%,18%)
            scale(1.2);
    }

}


@keyframes apolloProjectBlob2 {

    from {
        transform:
            translate(8%,-8%)
            scale(1.05);
    }

    to {
        transform:
            translate(-38%,25%)
            scale(1.2);
    }

}


@keyframes apolloProjectBlob3 {

    from {
        transform:
            translate(-10%,18%)
            scale(.95);
    }

    to {
        transform:
            translate(30%,-30%)
            scale(1.22);
    }

}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 1100px) {

    .apollo-project-cta-inner {
        width:
            calc(100% - 60px);

        grid-template-columns:
            .85fr 1.15fr;

        gap: 55px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .apollo-project-cta {
        padding: 80px 0;
    }

    .apollo-project-cta-inner {
        width:
            calc(100% - 40px);

        display: flex;
        flex-direction: column;

        gap: 55px;
    }

    .apollo-project-cta-stage {
        width:
            min(100%, 380px);
    }

    .apollo-project-cta-panel {
        width: 100%;

        padding:
            34px 26px;
    }

    .apollo-project-cta-title {
        font-size:
            48px !important;
    }

    .apollo-project-cta-text {
        font-size: 15px;
    }

}


@media (prefers-reduced-motion: reduce) {

    .apollo-project-liquid-blob {
        animation:
            none !important;
    }

    .apollo-project-cta-circle {
        transform:
            none !important;
    }

}

/* =========================================================
   SATELLITES - ORBITE AUTOUR DU CTA
   ========================================================= */

.apollo-project-cta-dot {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 9px;
    height: 9px;

    margin-left: -4.5px;
    margin-top: -4.5px;

    border-radius: 50%;

    z-index: 4;

    transform-origin: center;
}


/* satellite rose */

.apollo-project-cta-dot-pink {
    background: var(--apollo-pink);

    box-shadow:
        0 0 10px rgba(224,105,255,.95),
        0 0 24px rgba(224,105,255,.55);

    animation:
        apolloOrbitPink
        9s
        linear
        infinite;
}


/* satellite cyan */

.apollo-project-cta-dot-cyan {
    width: 7px;
    height: 7px;

    margin-left: -3.5px;
    margin-top: -3.5px;

    background: var(--apollo-cyan);

    box-shadow:
        0 0 10px rgba(0,229,255,.95),
        0 0 24px rgba(0,229,255,.55);

    animation:
        apolloOrbitCyan
        13s
        linear
        infinite;
}


/* Orbite proche du cercle extérieur */

@keyframes apolloOrbitPink {

    from {
        transform:
            rotate(0deg)
            translateX(220px)
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg)
            translateX(220px)
            rotate(-360deg);
    }

}


@keyframes apolloOrbitCyan {

    from {
        transform:
            rotate(180deg)
            translateX(220px)
            rotate(-180deg);
    }

    to {
        transform:
            rotate(540deg)
            translateX(220px)
            rotate(-540deg);
    }

}


/* Tablette */

@media (max-width: 1100px) {

    @keyframes apolloOrbitPink {

        from {
            transform:
                rotate(0deg)
                translateX(190px)
                rotate(0deg);
        }

        to {
            transform:
                rotate(360deg)
                translateX(190px)
                rotate(-360deg);
        }

    }

    @keyframes apolloOrbitCyan {

        from {
            transform:
                rotate(180deg)
                translateX(190px)
                rotate(-180deg);
        }

        to {
            transform:
                rotate(540deg)
                translateX(190px)
                rotate(-540deg);
        }

    }

}


/* Mobile */

@media (max-width: 800px) {

    @keyframes apolloOrbitPink {

        from {
            transform:
                rotate(0deg)
                translateX(165px)
                rotate(0deg);
        }

        to {
            transform:
                rotate(360deg)
                translateX(165px)
                rotate(-360deg);
        }

    }

    @keyframes apolloOrbitCyan {

        from {
            transform:
                rotate(180deg)
                translateX(165px)
                rotate(-180deg);
        }

        to {
            transform:
                rotate(540deg)
                translateX(165px)
                rotate(-540deg);
        }

    }

}