@keyframes sa-hero-orbit-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sa-hero-orbital-system {
    z-index: 0;
    --sa-orbit-stage-scale: 1;
    mask-image: radial-gradient(
        ellipse 82% 78% at 50% 50%,
        rgba(0, 0, 0, 1) 14%,
        rgba(0, 0, 0, 0.55) 38%,
        rgba(0, 0, 0, 0.15) 58%,
        transparent 88%
    );
    -webkit-mask-image: radial-gradient(
        ellipse 82% 78% at 50% 50%,
        rgba(0, 0, 0, 1) 14%,
        rgba(0, 0, 0, 0.55) 38%,
        rgba(0, 0, 0, 0.15) 58%,
        transparent 88%
    );
}

.sa-hero-orbital-stage {
    position: relative;
    width: min(104vmin, 80rem);
    height: min(104vmin, 80rem);
    flex-shrink: 0;
    --sa-orbit-device-rotate: 0deg;
    --sa-orbit-device-tilt-x: 0deg;
    transform: scale(var(--sa-orbit-stage-scale))
        rotate(var(--sa-orbit-device-rotate))
        rotateX(var(--sa-orbit-device-tilt-x));
    transform-origin: center center;
    transform-style: preserve-3d;
    will-change: transform;
}

.sa-hero-orbital-system--device-tilt .sa-hero-orbital-stage {
    perspective: 900px;
}

.sa-hero-orbital-guide {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--guide-size);
    height: var(--guide-size);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 0 0 0.5px rgba(148, 163, 184, 0.04);
}

.sa-hero-orbit-ring {
    position: absolute;
    inset: 0;
    animation: sa-hero-orbit-rotate var(--orbit-duration) linear infinite;
    animation-direction: var(--orbit-direction, normal);
    will-change: transform;
}

.sa-hero-orbit-arm {
    position: absolute;
    inset: 0;
    transform: rotate(var(--slot-angle));
}

.sa-hero-orbit-anchor {
    position: absolute;
    left: 50%;
    top: calc(50% - var(--orbit-radius));
    transform: translate(-50%, -50%);
}

.sa-hero-orbit-icon-upright {
    animation: sa-hero-orbit-rotate var(--orbit-duration) linear infinite reverse;
    will-change: transform;
}

.sa-hero-orbit-ring[style*="reverse"] .sa-hero-orbit-icon-upright {
    animation-direction: normal;
}

.sa-hero-orbit-icon-svg {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    color: rgba(148, 163, 184, 0.4);
}

/* Mobile : orbites plus grandes et plus visibles (même animation, échelle accrue) */
@media (max-width: 639px) {
    .sa-hero-orbital-system {
        --sa-orbit-stage-scale: 1.38;
        mask-image: radial-gradient(
            ellipse 94% 90% at 50% 48%,
            rgba(0, 0, 0, 1) 8%,
            rgba(0, 0, 0, 0.62) 32%,
            rgba(0, 0, 0, 0.2) 56%,
            transparent 92%
        );
        -webkit-mask-image: radial-gradient(
            ellipse 94% 90% at 50% 48%,
            rgba(0, 0, 0, 1) 8%,
            rgba(0, 0, 0, 0.62) 32%,
            rgba(0, 0, 0, 0.2) 56%,
            transparent 92%
        );
    }

    .sa-hero-orbital-stage {
        width: min(118vmin, 108vw);
        height: min(118vmin, 108vw);
    }

    .sa-hero-orbit-icon-svg {
        width: 1.45rem;
        height: 1.45rem;
        color: rgba(148, 163, 184, 0.48);
    }

    .sa-hero-orbital-guide {
        border-color: rgba(148, 163, 184, 0.2);
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .sa-hero-orbital-system {
        --sa-orbit-stage-scale: 1.12;
    }

    .sa-hero-orbit-icon-svg {
        width: 1.3rem;
        height: 1.3rem;
    }
}

/* Desktop : même système orbital, encore plus ample */
@media (min-width: 1024px) {
    .sa-hero-orbital-system {
        --sa-orbit-stage-scale: 1.1;
        mask-image: radial-gradient(
            ellipse 88% 84% at 50% 50%,
            rgba(0, 0, 0, 1) 10%,
            rgba(0, 0, 0, 0.58) 36%,
            rgba(0, 0, 0, 0.18) 60%,
            transparent 90%
        );
        -webkit-mask-image: radial-gradient(
            ellipse 88% 84% at 50% 50%,
            rgba(0, 0, 0, 1) 10%,
            rgba(0, 0, 0, 0.58) 36%,
            rgba(0, 0, 0, 0.18) 60%,
            transparent 90%
        );
    }

    .sa-hero-orbital-stage {
        width: min(112vmin, 92rem);
        height: min(112vmin, 92rem);
    }

    .sa-hero-orbit-icon-svg {
        width: 1.5rem;
        height: 1.5rem;
        color: rgba(148, 163, 184, 0.44);
    }
}

@media (min-width: 1280px) {
    .sa-hero-orbital-system {
        --sa-orbit-stage-scale: 1.16;
    }

    .sa-hero-orbital-stage {
        width: min(118vmin, 96rem);
        height: min(118vmin, 96rem);
    }

    .sa-hero-orbit-icon-svg {
        width: 1.625rem;
        height: 1.625rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sa-hero-orbit-ring,
    .sa-hero-orbit-icon-upright {
        animation: none !important;
    }
}