/**
 * Hero homepage — modes performance :
 * - hero-mobile-lite : viewport ≤1023px (téléphones / tablettes)
 * - hero-no-gpu : rendu logiciel / GPU faible
 * - prefers-reduced-motion
 */

html.hero-no-gpu #hero .shooting-stars,
html.hero-mobile-lite #hero .shooting-stars,
html.hero-no-gpu #hero .twinkling-stars,
html.hero-mobile-lite #hero .twinkling-stars,
html.hero-no-gpu #hero .data-flow,
html.hero-mobile-lite #hero .data-flow,
html.hero-no-gpu #hero .data-pulse,
html.hero-mobile-lite #hero .data-pulse {
    display: none !important;
}

html.hero-no-gpu #hero .parallax-bg,
html.hero-mobile-lite #hero .parallax-bg,
html.hero-no-gpu #hero .parallax-stars,
html.hero-mobile-lite #hero .parallax-stars {
    will-change: auto !important;
    transition: none !important;
    transform: none !important;
}

html.hero-no-gpu #hero .hero-ambient-glow,
html.hero-mobile-lite #hero .hero-ambient-glow {
    display: none !important;
}

html.hero-mobile-lite #hero .planet-mobile-wrapper {
    position: relative;
    contain: layout style paint;
}

html.hero-mobile-lite #hero .planet-mobile-wrapper::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: min(320px, 92%);
    height: min(320px, 92%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(
        circle,
        rgba(59, 130, 246, 0.28) 0%,
        rgba(37, 99, 235, 0.12) 38%,
        transparent 70%
    );
}

html.hero-mobile-lite #hero .planet-mobile-wrapper .planet-container {
    position: relative;
    z-index: 1;
}

html.hero-no-gpu #hero .hero-planet-visual::before,
html.hero-mobile-lite #hero .hero-planet-visual::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: min(380px, 92%);
    height: min(380px, 92%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(
        circle,
        rgba(59, 130, 246, 0.28) 0%,
        rgba(37, 99, 235, 0.12) 38%,
        transparent 70%
    );
}

html.hero-no-gpu #hero .orbit,
html.hero-mobile-lite #hero .orbit {
    display: none !important;
}

html.hero-no-gpu #hero .planet-container,
html.hero-mobile-lite #hero .planet-container {
    perspective: none;
    transform-style: flat;
    position: relative;
    z-index: 1;
}

html.hero-no-gpu #hero .planet-system,
html.hero-mobile-lite #hero .planet-system {
    position: relative;
    animation: none !important;
    transform: rotate(-7deg) !important;
    transform-style: flat;
}

html.hero-no-gpu #hero .planet-system > .ring-container,
html.hero-mobile-lite #hero .planet-system > .ring-container,
html.hero-no-gpu #hero .planet-system > .planet,
html.hero-mobile-lite #hero .planet-system > .planet,
html.hero-no-gpu #hero .planet-system > .planet-data-flows,
html.hero-mobile-lite #hero .planet-system > .planet-data-flows,
html.hero-no-gpu #hero .planet-system > .atmosphere,
html.hero-mobile-lite #hero .planet-system > .atmosphere {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    margin: 0 !important;
}

html.hero-no-gpu #hero .planet,
html.hero-mobile-lite #hero .planet {
    width: 154px;
    height: 154px;
    transform: translate(-50%, -50%) !important;
    animation: none !important;
    background:
        radial-gradient(circle at 70% 72%, rgba(2, 6, 23, 0.88) 0%, transparent 46%),
        radial-gradient(circle at 26% 22%, rgba(224, 242, 254, 0.55) 0%, transparent 36%),
        radial-gradient(ellipse 95% 58% at 52% 90%, rgba(30, 58, 138, 0.8) 0%, transparent 58%),
        radial-gradient(circle at 40% 34%, #bae6fd 0%, #38bdf8 16%, #2563eb 38%, #1d4ed8 62%, #1e3a8a 82%, #0f172a 100%) !important;
    box-shadow:
        inset -20px -24px 42px rgba(2, 6, 23, 0.82),
        inset 12px 14px 32px rgba(186, 230, 253, 0.22),
        0 0 0 1px rgba(147, 197, 253, 0.18),
        0 20px 56px rgba(29, 78, 216, 0.38) !important;
}

html.hero-no-gpu #hero .planet::before,
html.hero-mobile-lite #hero .planet::before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    animation: none !important;
    transform: none !important;
    opacity: 0.9;
    background:
        radial-gradient(ellipse 30% 20% at 58% 36%, rgba(52, 211, 153, 0.38) 0%, transparent 100%),
        radial-gradient(ellipse 24% 16% at 34% 56%, rgba(96, 165, 250, 0.5) 0%, transparent 100%),
        radial-gradient(ellipse 20% 14% at 68% 58%, rgba(30, 64, 175, 0.55) 0%, transparent 100%),
        radial-gradient(ellipse 18% 12% at 44% 44%, rgba(14, 116, 144, 0.42) 0%, transparent 100%),
        radial-gradient(ellipse 22% 15% at 78% 40%, rgba(59, 130, 246, 0.35) 0%, transparent 100%) !important;
}

html.hero-no-gpu #hero .planet::after,
html.hero-mobile-lite #hero .planet::after {
    background:
        radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.72) 0%, transparent 20%),
        radial-gradient(circle at 78% 78%, rgba(15, 23, 42, 0.65) 0%, transparent 34%),
        radial-gradient(circle at 50% 50%, transparent 54%, rgba(2, 6, 23, 0.62) 100%),
        linear-gradient(130deg, rgba(255, 255, 255, 0.16) 0%, transparent 42%, rgba(15, 23, 42, 0.28) 100%) !important;
}

html.hero-no-gpu #hero .planet-system > .planet-data-flows,
html.hero-mobile-lite #hero .planet-system > .planet-data-flows {
    width: 154px;
    height: 154px;
    transform: translate(-50%, -50%) !important;
}

html.hero-no-gpu #hero .planet-system > .ring-container,
html.hero-mobile-lite #hero .planet-system > .ring-container {
    width: 360px;
    height: 360px;
    animation: heroRingDriftLite 56s linear infinite !important;
    transform: translate(-50%, -50%) scaleY(0.36) !important;
    transform-style: flat;
    transform-origin: center center;
}

html.hero-no-gpu #hero .ring-container--back,
html.hero-mobile-lite #hero .ring-container--back {
    clip-path: polygon(0 0, 100% 0, 100% 49.5%, 0 49.5%);
    z-index: 1 !important;
}

html.hero-no-gpu #hero .ring-container--front,
html.hero-mobile-lite #hero .ring-container--front {
    display: block !important;
    clip-path: polygon(0 50.5%, 100% 50.5%, 100% 100%, 0 100%);
    z-index: 3 !important;
}

html.hero-no-gpu #hero .ring,
html.hero-mobile-lite #hero .ring {
    -webkit-mask: radial-gradient(transparent 44%, black 45%, black 72%, transparent 73%) !important;
    mask: radial-gradient(transparent 44%, black 45%, black 72%, transparent 73%) !important;
    animation: none !important;
    filter: none !important;
    opacity: 0.95;
    box-shadow:
        0 0 28px rgba(59, 130, 246, 0.55),
        0 0 48px rgba(59, 130, 246, 0.28) !important;
}

html.hero-no-gpu #hero .ring-inner,
html.hero-mobile-lite #hero .ring-inner {
    box-shadow: 0 0 24px rgba(147, 197, 253, 0.45) !important;
}

html.hero-no-gpu #hero .ring-outer,
html.hero-mobile-lite #hero .ring-outer {
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.35) !important;
}

html.hero-no-gpu #hero .ring-particles,
html.hero-mobile-lite #hero .ring-particles {
    animation: none !important;
    opacity: 0.72;
}

@keyframes heroRingDriftLite {
    from { transform: translate(-50%, -50%) scaleY(0.36) rotate(0deg); }
    to { transform: translate(-50%, -50%) scaleY(0.36) rotate(360deg); }
}

html.hero-no-gpu #hero .satellite,
html.hero-mobile-lite #hero .satellite {
    display: none !important;
}

html.hero-no-gpu #hero .planet-system > .atmosphere,
html.hero-mobile-lite #hero .planet-system > .atmosphere {
    animation: none !important;
    width: 168px;
    height: 168px;
    transform: translate(-50%, -50%) !important;
    opacity: 0.42;
    z-index: 4 !important;
    border-width: 2px;
    border-color: rgba(125, 211, 252, 0.38);
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.22);
}

html.hero-no-gpu #hero .dynamic-text .word,
html.hero-mobile-lite #hero .dynamic-text .word {
    animation-name: heroWordFadeLite !important;
    transform: none !important;
}

html.hero-no-gpu #hero .float-1,
html.hero-mobile-lite #hero .float-1,
html.hero-no-gpu #hero .float-2,
html.hero-mobile-lite #hero .float-2,
html.hero-no-gpu #hero .float-3,
html.hero-mobile-lite #hero .float-3,
html.hero-no-gpu #hero .glow,
html.hero-mobile-lite #hero .glow {
    animation: none !important;
    filter: none !important;
    transform: none !important;
}

html.hero-no-gpu #hero svg animate,
html.hero-mobile-lite #hero svg animate,
html.hero-no-gpu #hero svg animateMotion,
html.hero-mobile-lite #hero svg animateMotion {
    display: none;
}

@keyframes heroWordFadeLite {
    0%, 5% { opacity: 0; }
    10%, 45% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #hero .shooting-stars,
    #hero .twinkling-stars,
    #hero .data-flow,
    #hero .data-pulse {
        display: none !important;
    }

    #hero .parallax-bg,
    #hero .parallax-stars {
        will-change: auto !important;
        transition: none !important;
        transform: none !important;
    }

    #hero .hero-ambient-glow {
        display: none !important;
    }

    #hero .orbit {
        display: none !important;
    }

    #hero .hero-planet-visual::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 0;
        width: min(380px, 92%);
        height: min(380px, 92%);
        transform: translate(-50%, -50%);
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient(
            circle,
            rgba(59, 130, 246, 0.28) 0%,
            rgba(37, 99, 235, 0.12) 38%,
            transparent 70%
        );
    }

    #hero .planet-system {
        position: relative;
        animation: none !important;
        transform: rotate(-7deg) !important;
    }

    #hero .planet-system > .ring-container,
    #hero .planet-system > .planet,
    #hero .planet-system > .planet-data-flows,
    #hero .planet-system > .atmosphere {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        margin: 0 !important;
    }

    #hero .planet-system > .planet {
        width: 154px;
        height: 154px;
        transform: translate(-50%, -50%) !important;
    }

    #hero .planet-system > .planet-data-flows {
        width: 154px;
        height: 154px;
        transform: translate(-50%, -50%) !important;
    }

    #hero .planet-system > .atmosphere {
        transform: translate(-50%, -50%) !important;
        z-index: 4 !important;
    }

    #hero .planet {
        animation: none !important;
        background:
            radial-gradient(circle at 70% 72%, rgba(2, 6, 23, 0.88) 0%, transparent 46%),
            radial-gradient(circle at 26% 22%, rgba(224, 242, 254, 0.55) 0%, transparent 36%),
            radial-gradient(ellipse 95% 58% at 52% 90%, rgba(30, 58, 138, 0.8) 0%, transparent 58%),
            radial-gradient(circle at 40% 34%, #bae6fd 0%, #38bdf8 16%, #2563eb 38%, #1d4ed8 62%, #1e3a8a 82%, #0f172a 100%) !important;
        box-shadow:
            inset -20px -24px 42px rgba(2, 6, 23, 0.82),
            inset 12px 14px 32px rgba(186, 230, 253, 0.22),
            0 0 0 1px rgba(147, 197, 253, 0.18),
            0 20px 56px rgba(29, 78, 216, 0.38) !important;
    }

    #hero .planet::before {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        animation: none !important;
        transform: none !important;
        opacity: 0.9;
        background:
            radial-gradient(ellipse 30% 20% at 58% 36%, rgba(52, 211, 153, 0.38) 0%, transparent 100%),
            radial-gradient(ellipse 24% 16% at 34% 56%, rgba(96, 165, 250, 0.5) 0%, transparent 100%),
            radial-gradient(ellipse 20% 14% at 68% 58%, rgba(30, 64, 175, 0.55) 0%, transparent 100%),
            radial-gradient(ellipse 18% 12% at 44% 44%, rgba(14, 116, 144, 0.42) 0%, transparent 100%) !important;
    }

    #hero .planet::after {
        background:
            radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.72) 0%, transparent 20%),
            radial-gradient(circle at 78% 78%, rgba(15, 23, 42, 0.65) 0%, transparent 34%),
            radial-gradient(circle at 50% 50%, transparent 54%, rgba(2, 6, 23, 0.62) 100%) !important;
    }

    #hero .planet-system > .ring-container {
        width: 360px;
        height: 360px;
        animation: none !important;
        transform: translate(-50%, -50%) scaleY(0.36) !important;
        transform-origin: center center;
    }

    #hero .ring-container--back {
        clip-path: polygon(0 0, 100% 0, 100% 49.5%, 0 49.5%);
        z-index: 1 !important;
    }

    #hero .ring-container--front {
        display: block !important;
        clip-path: polygon(0 50.5%, 100% 50.5%, 100% 100%, 0 100%);
        z-index: 3 !important;
    }

    #hero .ring {
        -webkit-mask: radial-gradient(transparent 44%, black 45%, black 72%, transparent 73%) !important;
        mask: radial-gradient(transparent 44%, black 45%, black 72%, transparent 73%) !important;
    }

    #hero .ring,
    #hero .ring-particles,
    #hero .satellite,
    #hero .atmosphere,
    #hero .float-1,
    #hero .float-2,
    #hero .float-3 {
        animation: none !important;
    }

    #hero .dynamic-text .word {
        animation-name: heroWordFadeLite !important;
        transform: none !important;
    }

    #hero svg animate,
    #hero svg animateMotion {
        display: none;
    }
}