/* ============================================================
   Mindspace Services Ecosystem — Cinematic Animation Fix
   Drop this file AFTER mindspace-hero.css
   No HTML changes required.
   ============================================================ */

.mindspace-services {
    --services-progress: 0;
    --services-focus: 0;
    position: relative;
    isolation: isolate;
    overflow: visible !important;
}

/* Soft ambient energy behind the ecosystem */
.mindspace-services::before {
    animation: msServicesAtmosphere 12s ease-in-out infinite alternate;
    will-change: opacity, transform;
}

/* Moving gold scan line at the bottom of the section */
.mindspace-services::after {
    animation: msServicesScan 5.5s ease-in-out infinite;
    will-change: background-position, opacity;
}

.mindspace-orbit {
    --orbit-scroll-angle: 0deg;
    --orbit-tilt-x: 0deg;
    --orbit-tilt-y: 0deg;
    --orbit-lift: 0px;
    --orbit-scale: 1;
    position: relative;
    transform-origin: 50% 50%;
    transform: perspective(1100px)
        rotateX(var(--orbit-tilt-x))
        rotateY(var(--orbit-tilt-y))
        translate3d(0, var(--orbit-lift), 0)
        scale(var(--orbit-scale));
    transition: transform 180ms cubic-bezier(.22,1,.36,1);
    will-change: transform;
}

/* Outer energy field */
.mindspace-orbit::before {
    animation: msOrbitEnergy 20s linear infinite;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
}

/* Inner breathing field */
.mindspace-orbit::after {
    animation: msOrbitHalo 5s ease-in-out infinite;
    will-change: transform, opacity, box-shadow;
}

/* Main orbital system */
.mindspace-orbit__rings {
    animation: msOrbitRotate 54s linear infinite !important;
    transform-origin: 50% 50%;
    will-change: transform;
}

.mindspace-orbit__rings::before {
    animation: msOrbitRotateReverse 26s linear infinite !important;
    transform-origin: 50% 50%;
    will-change: transform;
}

.mindspace-orbit__rings::after {
    animation: msOrbitRotateFast 12s linear infinite !important;
    transform-origin: 50% 50%;
    will-change: transform;
}

/* Add another fine rotating radar layer without changing markup */
.mindspace-orbit__rings {
    box-shadow:
        0 0 0 1px rgba(245,190,126,.035),
        0 0 55px rgba(166,124,82,.08),
        inset 0 0 45px rgba(166,124,82,.05);
}

/* Center: stable position + breathing glow */
.mindspace-orbit__center {
    animation: msCenterPulse 4.6s ease-in-out infinite !important;
    transform-origin: 50% 50%;
    will-change: transform, box-shadow;
}

.mindspace-orbit__center::before {
    animation: msCenterRing 7s linear infinite;
    transform-origin: 50% 50%;
}

.mindspace-orbit__center::after {
    animation: msCenterRingReverse 11s linear infinite;
    transform-origin: 50% 50%;
}

/* Service nodes */
.mindspace-orbit__item {
    --node-y: 0px;
    --node-scale: 1;
    --node-brightness: 1;
    opacity: .92;
    transform: translate(-50%, -50%) translate3d(0, var(--node-y), 0) scale(var(--node-scale));
    animation: msNodeFloat 4.8s ease-in-out infinite;
    transition:
        opacity 260ms ease,
        filter 260ms ease,
        transform 260ms cubic-bezier(.22,1,.36,1);
    will-change: transform, opacity, filter;
    cursor: default;
}

/* Staggered motion makes the ecosystem feel alive rather than mechanical */
.mindspace-orbit__item--brand   { animation-delay: -0.2s; }
.mindspace-orbit__item--web     { animation-delay: -0.8s; }
.mindspace-orbit__item--ai      { animation-delay: -1.4s; }
.mindspace-orbit__item--growth  { animation-delay: -2.0s; }
.mindspace-orbit__item--video   { animation-delay: -2.6s; }
.mindspace-orbit__item--commerce{ animation-delay: -3.2s; }
.mindspace-orbit__item--mobile  { animation-delay: -3.8s; }
.mindspace-orbit__item--ux      { animation-delay: -4.4s; }

.mindspace-orbit__item::after {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle, rgba(245,190,126,.14), transparent 66%);
    filter: blur(8px);
    transition: opacity 260ms ease, transform 260ms ease;
}

.mindspace-orbit__item:hover {
    opacity: 1;
    filter: brightness(1.2) drop-shadow(0 0 18px rgba(211,146,91,.28));
    --node-scale: 1.06;
    z-index: 20;
}

.mindspace-orbit__item:hover::after {
    opacity: 1;
    transform: scale(1.15);
}

.mindspace-orbit__item span {
    position: relative;
    z-index: 2;
    transition:
        border-color 260ms ease,
        box-shadow 260ms ease,
        transform 260ms cubic-bezier(.22,1,.36,1),
        background 260ms ease;
}

.mindspace-orbit__item span::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    border: 1px solid rgba(245,190,126,.16);
    opacity: 0;
    transform: scale(.72);
    transition: opacity 260ms ease, transform 320ms cubic-bezier(.22,1,.36,1);
}

.mindspace-orbit__item:hover span {
    border-color: rgba(245,190,126,.8);
    box-shadow:
        0 0 30px rgba(180,106,60,.28),
        inset 0 0 18px rgba(245,190,126,.18);
    transform: scale(1.08);
}

.mindspace-orbit__item:hover span::after {
    opacity: 1;
    transform: scale(1);
}

.mindspace-orbit__item svg {
    transition: filter 260ms ease, transform 260ms ease;
}

.mindspace-orbit__item:hover svg {
    filter: drop-shadow(0 0 10px rgba(245,190,126,.6));
    transform: scale(1.08);
}

/* Connecting lines become directional light beams */
.mindspace-orbit__item::before {
    opacity: .48;
    transition: opacity 260ms ease, width 260ms ease;
}

.mindspace-orbit__item:hover::before {
    opacity: 1;
    width: 78px;
}

/* Section copy reveals in a more premium way */
.mindspace-services__copy,
.mindspace-services__note {
    will-change: transform, opacity;
}

/* Scroll state is applied by the JS below */
.mindspace-services.is-services-active .mindspace-orbit__item {
    animation-duration: 4.8s;
}

.mindspace-services.is-services-active .mindspace-orbit__center {
    box-shadow:
        0 0 92px rgba(211,146,91,.30),
        0 0 160px rgba(166,124,82,.10),
        inset 0 0 42px rgba(245,190,126,.16),
        inset 0 1px 0 rgba(245,242,234,.16);
}

/* Keyframes */
@keyframes msOrbitRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

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

@keyframes msOrbitRotateFast {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes msOrbitEnergy {
    0%   { transform: rotate(0deg) scale(1); opacity: .70; }
    50%  { transform: rotate(180deg) scale(1.015); opacity: .95; }
    100% { transform: rotate(360deg) scale(1); opacity: .70; }
}

@keyframes msOrbitHalo {
    0%,100% {
        transform: scale(1);
        opacity: .70;
        box-shadow: 0 0 28px rgba(180,106,60,.08), inset 0 0 34px rgba(180,106,60,.08);
    }
    50% {
        transform: scale(1.018);
        opacity: 1;
        box-shadow: 0 0 52px rgba(180,106,60,.16), inset 0 0 46px rgba(180,106,60,.14);
    }
}

@keyframes msCenterPulse {
    0%,100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 64px rgba(211,146,91,.20),
            inset 0 0 34px rgba(245,190,126,.11),
            inset 0 1px 0 rgba(245,242,234,.14);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.045);
        box-shadow:
            0 0 105px rgba(211,146,91,.38),
            0 0 155px rgba(166,124,82,.10),
            inset 0 0 46px rgba(245,190,126,.18),
            inset 0 1px 0 rgba(245,242,234,.20);
    }
}

@keyframes msCenterRing {
    from { transform: rotate(0deg) scale(1); opacity: .35; }
    50%  { opacity: .7; }
    to   { transform: rotate(360deg) scale(1.035); opacity: .35; }
}

@keyframes msCenterRingReverse {
    from { transform: rotate(360deg) scale(1.03); opacity: .18; }
    50%  { opacity: .42; }
    to   { transform: rotate(0deg) scale(1); opacity: .18; }
}

@keyframes msNodeFloat {
    0%,100% {
        transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(var(--node-scale));
    }
    50% {
        transform: translate(-50%, -50%) translate3d(0, -7px, 0) scale(var(--node-scale));
    }
}

@keyframes msServicesAtmosphere {
    0%   { opacity: .72; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.018); }
}

@keyframes msServicesScan {
    0%,100% { opacity: .30; background-position: -30% 0; }
    50% { opacity: .9; background-position: 130% 0; }
}

/* Keep the visual stable on touch devices; mobile still gets ring motion. */
@media (hover: none) {
    .mindspace-orbit__item:hover {
        filter: none;
        --node-scale: 1;
    }
}

@media (max-width: 980px) {
    .mindspace-orbit {
        --orbit-scale: .98;
    }
}

@media (max-width: 720px) {
    .mindspace-orbit {
        --orbit-scale: .96;
    }

    .mindspace-orbit__item::after,
    .mindspace-orbit__item::before {
        opacity: .25;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mindspace-services::before,
    .mindspace-services::after,
    .mindspace-orbit::before,
    .mindspace-orbit::after,
    .mindspace-orbit__rings,
    .mindspace-orbit__rings::before,
    .mindspace-orbit__rings::after,
    .mindspace-orbit__center,
    .mindspace-orbit__center::before,
    .mindspace-orbit__center::after,
    .mindspace-orbit__item {
        animation: none !important;
        transition: none !important;
    }
}