/* APOLLO COM — LAUNCH SEQUENCE V3 */

#main-header .apollo-launch-cta {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 58px;
    padding: 7px 9px 7px 24px;
    border: 1px solid #a657cf;
    border-radius: 100px;
    background: #151018;
    color: #fff;
    text-decoration: none;
    overflow: visible;
    transition: box-shadow .3s ease, border-color .3s ease;
}

#main-header .apollo-launch-progress {
    position: absolute;
    z-index: -1;
    inset: 2px;
    border-radius: 100px;
    background: linear-gradient(100deg, #572079, #a739d6, #d86aff);
    clip-path: inset(0 100% 0 0 round 100px);
    transition: clip-path 1.45s cubic-bezier(.3,.65,.2,1);
}

#main-header .apollo-launch-label {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

#main-header .apollo-launch-logo {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #35263f;
}

#main-header .apollo-rocket {
    display: block;
    width: 31px;
    height: 40px;
    overflow: visible;
    transform-origin: center;
    will-change: transform;
}

#main-header .apollo-rocket-flame {
    opacity: 0;
    transform: scaleY(.1);
    transform-origin: 50% 75%;
}

#main-header .apollo-launch-cta:hover,
#main-header .apollo-launch-cta:focus-visible {
    border-color: #df9cff;
    box-shadow: 0 0 24px rgba(171, 65, 225, .35);
    color: #fff;
}

#main-header .apollo-launch-cta:hover .apollo-launch-progress,
#main-header .apollo-launch-cta:focus-visible .apollo-launch-progress {
    clip-path: inset(0 0 0 0 round 100px);
}

#main-header .apollo-launch-cta:hover .apollo-rocket,
#main-header .apollo-launch-cta:focus-visible .apollo-rocket {
    animation: apollo-v3-takeoff 2.35s ease-in forwards;
}

#main-header .apollo-launch-cta:hover .apollo-rocket-flame,
#main-header .apollo-launch-cta:focus-visible .apollo-rocket-flame {
    animation: apollo-v3-flame 2.35s ease-in forwards;
}

@keyframes apollo-v3-takeoff {
    0%, 55% {
        transform: translate3d(0,0,0) rotate(0);
        opacity: 1;
    }
    62% {
        transform: translate3d(-2px,3px,0) rotate(-8deg);
    }
    72% {
        transform: translate3d(0,0,0) rotate(0);
    }
    100% {
        transform: translate3d(100px,-115px,0) rotate(8deg) scale(.5);
        opacity: 0;
    }
}

@keyframes apollo-v3-flame {
    0%, 52% {
        opacity: 0;
        transform: scaleY(.1);
    }
    62% {
        opacity: 1;
        transform: scaleY(.8);
    }
    80% {
        opacity: 1;
        transform: scaleY(1.5);
    }
    100% {
        opacity: 0;
        transform: scaleY(2);
    }
}

@media (max-width: 767px) {
    #main-header .apollo-launch-cta {
        min-height: 44px;
        gap: 9px;
        padding: 5px 6px 5px 12px;
    }

    #main-header .apollo-launch-label {
        font-size: 10px;
        letter-spacing: .03em;
    }

    #main-header .apollo-launch-logo {
        width: 34px;
        height: 34px;
    }

    #main-header .apollo-rocket {
        width: 23px;
        height: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #main-header .apollo-launch-cta,
    #main-header .apollo-launch-progress,
    #main-header .apollo-rocket,
    #main-header .apollo-rocket-flame {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================
   APOLLO COM - LAUNCH SEQUENCE V4
   Animation pilotee par JavaScript
   ========================================== */

/* La jauge reste dans les limites du bouton */
#main-header .apollo-launch-progress {
    inset: 2px;
    border-radius: 100px;
    transform: none !important;
    clip-path: inset(0 100% 0 0 round 100px);
    transition: clip-path .95s cubic-bezier(.22,.75,.25,1);
}

/* La jauge se remplit uniquement pendant le lancement */
#main-header .apollo-launch-cta:hover .apollo-launch-progress,
#main-header .apollo-launch-cta:focus-visible .apollo-launch-progress {
    clip-path: inset(0 100% 0 0 round 100px);
}

#main-header .apollo-launch-cta.apollo-launch-active .apollo-launch-progress {
    clip-path: inset(0 0 0 0 round 100px);
}

/* Le JavaScript controle entierement les mouvements */
#main-header .apollo-launch-cta:hover .apollo-rocket,
#main-header .apollo-launch-cta:focus-visible .apollo-rocket,
#main-header .apollo-launch-cta:hover .apollo-rocket-flame,
#main-header .apollo-launch-cta:focus-visible .apollo-rocket-flame {
    animation: none !important;
}

/* La fusee peut sortir de son socle */
#main-header .apollo-launch-logo,
#main-header .apollo-rocket {
    overflow: visible;
}

/* Animation plus fluide */
#main-header .apollo-rocket {
    transform-origin: center;
    will-change: transform, opacity;
}

/* Leger halo pendant le lancement */
#main-header .apollo-launch-cta.apollo-launch-active {
    border-color: #dca0ff;
    box-shadow:
        0 0 16px rgba(169,75,216,.25),
        0 0 35px rgba(169,75,216,.12);
}

/* Accessibilite */
@media (prefers-reduced-motion: reduce) {
    #main-header .apollo-launch-progress {
        transition: none !important;
    }
}

/* Apollo COM - Symbole officiel */
#main-header .apollo-rocket {
    width: 26px;
    height: 43px;
    overflow: visible;
    transform-origin: 50% 50%;
}

#main-header .apollo-core {
    transition: fill .25s ease, filter .25s ease;
}

#main-header .apollo-launch-active .apollo-core {
    fill: #f3a4ff;
    filter: drop-shadow(0 0 25px #d86aff);
}

#main-header .apollo-rocket-flame {
    transform-box: fill-box;
    transform-origin: center top;
}

@media (max-width: 767px) {
    #main-header .apollo-rocket {
        width: 21px;
        height: 32px;
    }
}

/* APOLLO COM - Propulsion V4 */

#main-header .apollo-rocket {
    overflow: visible;
}

#main-header .apollo-rocket-flame {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center top;
    filter: drop-shadow(0 0 55px #cb58ff);
}

#main-header .apollo-launch-logo::before,
#main-header .apollo-launch-logo::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #d8b4e8 35%, transparent 75%);
    filter: blur(5px);
    opacity: 0;
    pointer-events: none;
}

#main-header .apollo-launch-active .apollo-launch-logo::before {
    animation: apollo-smoke-left 1s ease-out infinite;
}

#main-header .apollo-launch-active .apollo-launch-logo::after {
    animation: apollo-smoke-right 1.2s ease-out infinite .15s;
}

@keyframes apollo-smoke-left {
    0% {
        opacity: .85;
        transform: translate(-50%, 0) scale(.5);
    }
    100% {
        opacity: 0;
        transform: translate(-65px, 50px) scale(4);
    }
}

@keyframes apollo-smoke-right {
    0% {
        opacity: .85;
        transform: translate(-50%, 0) scale(.5);
    }
    100% {
        opacity: 0;
        transform: translate(55px, 55px) scale(4);
    }
}

@media (prefers-reduced-motion: reduce) {
    #main-header .apollo-launch-logo::before,
    #main-header .apollo-launch-logo::after {
        animation: none !important;
    }
}

/* Apollo COM - Fumee synchronisee avec le lancement */

/* Desactiver les anciennes animations continues */
#main-header .apollo-launch-active .apollo-launch-logo::before,
#main-header .apollo-launch-active .apollo-launch-logo::after {
    animation: none;
    opacity: 0;
}

/* Une seule sequence de fumee au moment de la mise a feu */
#main-header .apollo-launch-active .apollo-launch-logo::before {
    animation: apollo-smoke-once-left 1.15s ease-out .95s both;
}

#main-header .apollo-launch-active .apollo-launch-logo::after {
    animation: apollo-smoke-once-right 1.25s ease-out 1s both;
}

@keyframes apollo-smoke-once-left {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(.3);
    }
    15% {
        opacity: .85;
    }
    100% {
        opacity: 0;
        transform: translate(-65px, 50px) scale(3.5);
    }
}

@keyframes apollo-smoke-once-right {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(.3);
    }
    15% {
        opacity: .85;
    }
    100% {
        opacity: 0;
        transform: translate(55px, 55px) scale(3.5);
    }
}


/* Apollo COM - CTA uniquement sur desktop */
@media (max-width: 1024px) {
    #main-header .apollo-launch-cta {
        display: none !important;
    }
}