/* =========================================================
   PRIMESCAPE INFOSOFT
   CINEMATIC MOTION EXPERIENCE V2
========================================================= */


/* =========================================================
   ROOT EXPERIENCE
========================================================= */

.ps-motion-experience {
    position: relative;

    overflow: hidden;

    padding:
        120px 0 125px;

    background:
        #fbfaf8;

    --mx: 0;
    --my: 0;
}


/* =========================================================
   AMBIENT BACKGROUND
========================================================= */

.ps-motion-bg {
    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.ps-motion-glow {
    position: absolute;

    border-radius: 50%;

    filter:
        blur(120px);

    opacity: .9;

    will-change: transform;
}

.ps-motion-glow.glow-one {
    width: 680px;
    height: 680px;

    left: -290px;
    top: 280px;

    background:
        rgba(246, 187, 154, .30);

    transform:
        translate(
            calc(var(--mx) * -18px),
            calc(var(--my) * -14px)
        );
}

.ps-motion-glow.glow-two {
    width: 760px;
    height: 760px;

    right: -320px;
    top: 200px;

    background:
        rgba(198, 189, 255, .42);

    transform:
        translate(
            calc(var(--mx) * 22px),
            calc(var(--my) * 17px)
        );
}

.ps-motion-grid {
    position: absolute;

    inset: 0;

    opacity: .42;

    background-image:

        linear-gradient(
            rgba(59, 72, 119, .035)
            1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(59, 72, 119, .035)
            1px,
            transparent 1px
        );

    background-size:
        58px 58px;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.ps-motion-heading {
    position: relative;

    z-index: 4;

    max-width: 980px;

    margin:
        0 auto 70px;

    text-align: center;
}

.ps-motion-kicker {
    display: block;

    margin-bottom: 14px;

    color:
        #7950ee;

    font-size: 10px;

    font-weight: 850;

    letter-spacing: 2px;
}

.ps-motion-heading h2 {
    margin: 0;

    color:
        #111a36;

    font-size:
        clamp(
            52px,
            6vw,
            88px
        );

    line-height: .95;

    letter-spacing: -4px;
}

.ps-motion-heading h2 strong {
    display: block;

    background:
        linear-gradient(
            90deg,
            #2869ef,
            #7950ee,
            #e98ca3,
            #f2a17f
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color: transparent;
}

.ps-motion-heading p {
    max-width: 710px;

    margin:
        25px auto 0;

    color:
        #6f7892;

    font-size: 16px;

    line-height: 1.72;
}


/* =========================================================
   CINEMATIC STAGE
========================================================= */

.ps-motion-stage {
    position: relative;

    width: 100%;

    height:
        min(
            740px,
            78vh
        );

    min-height:
        660px;

    overflow: hidden;

    border:
        1px solid
        rgba(49, 61, 109, .08);

    border-radius: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .68),
            rgba(247, 246, 253, .48)
        );

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

    backdrop-filter:
        blur(20px);

    box-shadow:
        0 40px 115px
        rgba(48, 51, 101, .11);

    perspective: 1600px;

    transform-style:
        preserve-3d;

    isolation: isolate;

    --motion-x: 0;
    --motion-y: 0;
}


/* =========================================================
   INTERNAL LIGHT
========================================================= */

.ps-motion-stage::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 620px;
    height: 620px;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(142, 116, 238, .12),
            rgba(99, 146, 255, .05) 40%,
            transparent 72%
        );

    filter:
        blur(20px);

    pointer-events: none;
}


/* =========================================================
   ORBITS
========================================================= */

.ps-motion-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    border:
        1px solid
        rgba(112, 85, 220, .12);

    border-radius: 50%;

    pointer-events: none;

    transition:
        opacity .7s ease,
        transform 1.1s
        cubic-bezier(.22, 1, .36, 1);
}

.orbit-a {
    width: 680px;
    height: 680px;

    transform:
        translate(-50%, -50%)
        rotate(
            calc(
                var(--motion-x) *
                5deg
            )
        );
}

.orbit-b {
    width: 850px;
    height: 480px;

    transform:
        translate(-50%, -50%)
        rotate(
            calc(
                25deg +
                var(--motion-x) *
                -7deg
            )
        );
}

.orbit-c {
    width: 520px;
    height: 830px;

    transform:
        translate(-50%, -50%)
        rotate(
            calc(
                -35deg +
                var(--motion-y) *
                6deg
            )
        );
}


/* =========================================================
   GENERATED PARTICLES
========================================================= */

.ps-vfx-particle {
    position: absolute;

    left: 50%;
    top: 50%;

    width: var(--particle-size);
    height: var(--particle-size);

    margin:
        calc(
            var(--particle-size) / -2
        );

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #4f91ff,
            #8057ef,
            #ef9c9d
        );

    box-shadow:
        0 0 14px
        rgba(121, 80, 238, .52);

    opacity: 0;

    transform:
        translate(
            var(--particle-x-start),
            var(--particle-y-start)
        )
        scale(.2);

    transition:
        opacity .45s ease,
        transform 1s
        cubic-bezier(.22, 1, .36, 1);

    pointer-events: none;

    z-index: 8;
}


/* Particle explosion while changing */

.ps-motion-stage.ps-is-transitioning
.ps-vfx-particle {
    opacity:
        var(--particle-opacity);

    transform:
        translate(
            var(--particle-x),
            var(--particle-y)
        )
        scale(1);
}


/* =========================================================
   IDEA CORE
========================================================= */

.ps-motion-core {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 20;

    transform:
        translate(-50%, -50%);

    transition:
        opacity .55s ease,
        transform .8s
        cubic-bezier(.22, 1, .36, 1);
}

.ps-core-light {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 340px;
    height: 340px;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(126, 89, 236, .23),
            transparent 68%
        );

    filter:
        blur(15px);

    animation:
        psCorePulse
        4.4s
        ease-in-out
        infinite;
}

@keyframes psCorePulse {

    0%,
    100% {
        opacity: .65;

        transform:
            translate(-50%, -50%)
            scale(.94);
    }

    50% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.08);
    }

}

.ps-core-object {
    position: relative;

    width: 235px;
    height: 235px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius:
        43% 57% 54% 46% /
        48% 43% 57% 52%;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(230, 224, 255, .95)
        );

    box-shadow:
        0 35px 90px
        rgba(84, 68, 174, .21);

    transition:
        opacity .55s ease,
        transform .75s
        cubic-bezier(.22, 1, .36, 1);
}

.ps-core-object::before {
    content: "";

    position: absolute;

    width: 145px;
    height: 145px;

    left: -30px;
    top: -30px;

    border-radius: 50%;

    background:
        rgba(77, 145, 255, .25);

    filter:
        blur(30px);
}

.ps-core-object::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -35px;
    bottom: -35px;

    border-radius: 50%;

    background:
        rgba(242, 160, 136, .29);

    filter:
        blur(30px);
}

.ps-core-eyebrow,
.ps-core-title,
.ps-core-subtitle {
    position: relative;

    z-index: 2;
}

.ps-core-eyebrow {
    color:
        #7c859d;

    font-size: 8px;

    font-weight: 850;

    letter-spacing: 1.8px;
}

.ps-core-title {
    margin:
        5px 0;

    color:
        #111a36;

    font-size: 44px;

    line-height: 1;

    letter-spacing: -2px;
}

.ps-core-subtitle {
    color:
        #7c859e;

    font-size: 8px;
}


/* =========================================================
   NON-IDEA CORE STATE
========================================================= */

.ps-motion-stage:not(
    [data-scene="0"]
)
.ps-motion-core {
    opacity: .10;

    transform:
        translate(-50%, -50%)
        scale(.52)
        translateZ(-120px);
}

.ps-motion-stage:not(
    [data-scene="0"]
)
.ps-core-object {
    transform:
        rotate(18deg);
}


/* =========================================================
   UNIVERSAL MOTION LAYERS
========================================================= */

.ps-motion-layer {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translate3d(
            calc(
                var(--motion-x) *
                12px
            ),
            calc(
                48px +
                var(--motion-y) *
                10px
            ),
            -80px
        )
        scale(.88)
        rotateX(4deg);

    filter:
        blur(9px);

    transition:
        opacity .58s ease,
        transform .82s
        cubic-bezier(.22, 1, .36, 1),
        filter .65s ease,
        visibility .58s;

    transform-style:
        preserve-3d;

    z-index: 15;
}


/* =========================================================
   ACTIVE LAYERS
========================================================= */

.ps-motion-stage[data-scene="1"]
.ps-layer-code,

.ps-motion-stage[data-scene="2"]
.ps-layer-software,

.ps-motion-stage[data-scene="3"]
.ps-layer-web,

.ps-motion-stage[data-scene="4"]
.ps-layer-mobile,

.ps-motion-stage[data-scene="5"]
.ps-layer-ai,

.ps-motion-stage[data-scene="6"]
.ps-layer-cloud,

.ps-motion-stage[data-scene="6"]
.ps-layer-security,

.ps-motion-stage[data-scene="7"]
.ps-layer-ecosystem {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    filter:
        blur(0);

    transform:
        translate3d(
            calc(
                var(--motion-x) *
                7px
            ),
            calc(
                var(--motion-y) *
                5px
            ),
            0
        )
        scale(1)
        rotateX(0deg);
}


/* =========================================================
   TRANSITION EXIT
========================================================= */

.ps-motion-stage.ps-is-transitioning
.ps-motion-layer {
    transform:
        translate3d(
            calc(
                var(--motion-x) *
                12px
            ),
            -30px,
            50px
        )
        scale(1.045);

    filter:
        blur(5px);
}


/* =========================================================
   CODE WINDOW
========================================================= */

.ps-code-window {
    width: 620px;

    overflow: hidden;

    border-radius: 22px;

    background:
        #111a37;

    box-shadow:
        0 45px 95px
        rgba(34, 39, 82, .27);

    transform:
        rotateY(-7deg)
        rotateX(2deg);
}

.ps-mini-window-bar {
    height: 46px;

    display: flex;

    align-items: center;

    gap: 6px;

    padding:
        0 15px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .06);
}

.ps-mini-window-bar > i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .28);
}

.ps-mini-window-bar small {
    margin-left: auto;

    color:
        rgba(255, 255, 255, .30);

    font-size: 7px;
}

.ps-motion-code {
    min-height: 360px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 17px;

    padding: 55px;
}

.ps-motion-code span {
    width: 88%;
    height: 8px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #4386fa,
            #7c57e6,
            rgba(124, 87, 230, .20)
        );

    transform-origin: left;

    animation:
        psCodeGrow
        .7s
        cubic-bezier(.22, 1, .36, 1)
        both;
}

.ps-motion-code span:nth-child(2) {
    animation-delay: .06s;
}

.ps-motion-code span:nth-child(3) {
    animation-delay: .12s;
}

.ps-motion-code span:nth-child(4) {
    animation-delay: .18s;
}

.ps-motion-code span:nth-child(5) {
    animation-delay: .24s;
}

.ps-motion-code span:nth-child(6) {
    animation-delay: .30s;
}

@keyframes psCodeGrow {

    from {
        transform:
            scaleX(.08);

        opacity: .2;
    }

    to {
        transform:
            scaleX(1);

        opacity: 1;
    }

}

.ps-motion-code .code-70 {
    width: 70%;
}

.ps-motion-code .code-60 {
    width: 60%;
}

.ps-motion-code .code-45 {
    width: 45%;
}

.ps-motion-code .code-35 {
    width: 35%;
}


/* =========================================================
   SOFTWARE
========================================================= */

.ps-motion-software {
    width: 680px;

    overflow: hidden;

    border:
        5px solid
        #11182e;

    border-radius: 23px;

    background:
        #111a37;

    box-shadow:
        0 50px 105px
        rgba(34, 39, 82, .27);

    transform:
        rotateY(
            calc(
                -5deg +
                var(--motion-x) *
                3deg
            )
        );
}

.ps-motion-soft-layout {
    min-height: 390px;

    display: grid;

    grid-template-columns:
        65px 1fr;
}

.ps-motion-soft-layout aside {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 22px;

    padding-top: 18px;

    border-right:
        1px solid
        rgba(255, 255, 255, .06);
}

.ps-motion-soft-layout aside b {
    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #2869ef,
            #7950ee
        );

    font-size: 9px;
}

.ps-motion-soft-layout aside i {
    width: 23px;
    height: 5px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .08);
}

.ps-motion-soft-main {
    padding: 40px;
}

.ps-motion-soft-main > span {
    color:
        #7884a4;

    font-size: 8px;

    letter-spacing: 1.3px;
}

.ps-motion-soft-main > strong {
    display: block;

    max-width: 420px;

    margin-top: 10px;

    color: white;

    font-size: 36px;

    line-height: 1;
}

.ps-motion-soft-cards {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

    margin-top: 55px;
}

.ps-motion-soft-cards i {
    height: 150px;

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

    border-radius: 15px;

    background:
        linear-gradient(
            180deg,
            rgba(79, 124, 246, .16),
            rgba(125, 79, 230, .03)
        );
}


/* =========================================================
   WEB
========================================================= */

.ps-motion-browser {
    width: 710px;

    overflow: hidden;

    border-radius: 24px;

    background:
        rgba(255, 255, 255, .94);

    box-shadow:
        0 45px 105px
        rgba(49, 52, 99, .16);

    transform:
        rotateY(
            calc(
                -4deg +
                var(--motion-x) *
                2.5deg
            )
        );
}

.ps-motion-browser
.ps-mini-window-bar {
    border-bottom:
        1px solid
        rgba(47, 59, 105, .08);
}

.ps-motion-browser
.ps-mini-window-bar i {
    background:
        #bec4d3;
}

.ps-motion-browser
.ps-mini-window-bar small {
    color:
        #949bad;
}

.ps-motion-browser-content {
    min-height: 410px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 65px;

    background:
        radial-gradient(
            circle at 70% 35%,
            rgba(215, 207, 255, .50),
            transparent 50%
        ),
        #fbfbfe;
}

.ps-motion-browser-content > span {
    color:
        #7950ee;

    font-size: 8px;

    font-weight: 850;

    letter-spacing: 1.5px;
}

.ps-motion-browser-content > strong {
    max-width: 500px;

    margin-top: 12px;

    color:
        #111a36;

    font-size: 55px;

    line-height: .93;

    letter-spacing: -3px;
}

.ps-web-button {
    width: 125px;
    height: 36px;

    margin-top: 28px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #2869ef,
            #7950ee
        );
}


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

.ps-motion-phone {
    position: relative;

    width: 235px;
    height: 470px;

    overflow: hidden;

    padding:
        70px 25px 30px;

    border:
        5px solid
        #11182d;

    border-radius: 38px;

    color: white;

    background:
        linear-gradient(
            160deg,
            #172653,
            #563a9c,
            #945bc5
        );

    box-shadow:
        0 40px 85px
        rgba(36, 39, 82, .26);

    transform:
        rotateZ(
            calc(
                4deg +
                var(--motion-x) *
                2deg
            )
        )
        rotateY(
            calc(
                var(--motion-x) *
                -5deg
            )
        );
}

.ps-motion-phone-notch {
    position: absolute;

    left: 50%;
    top: 10px;

    width: 72px;
    height: 15px;

    transform:
        translateX(-50%);

    border-radius:
        0 0 11px 11px;

    background:
        #090f20;
}

.ps-motion-phone > span {
    color:
        rgba(255, 255, 255, .55);

    font-size: 7px;

    letter-spacing: 1.5px;
}

.ps-motion-phone > strong {
    display: block;

    margin-top: 12px;

    font-size: 31px;

    line-height: 1;
}

.ps-motion-phone-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin-top: 55px;
}

.ps-motion-phone-grid i {
    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 14px;

    background:
        rgba(255, 255, 255, .08);

    color: white;

    font-size: 8px;

    font-style: normal;

    font-weight: 800;
}


/* =========================================================
   AI
========================================================= */

.ps-motion-ai-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 200px;
    height: 200px;

    transform:
        translate(-50%, -50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 30%,
            #ffffff,
            #ddd7ff 60%,
            #c2d1ff
        );

    box-shadow:
        0 35px 90px
        rgba(90, 73, 190, .23);

    z-index: 5;
}

.ps-motion-ai-core::after {
    content: "";

    position: absolute;

    inset: -18px;

    border:
        1px solid
        rgba(121, 80, 238, .16);

    border-radius: 50%;

    animation:
        psAiRing
        3s
        linear
        infinite;
}

@keyframes psAiRing {

    from {
        transform:
            rotate(0deg)
            scale(.96);
    }

    50% {
        transform:
            rotate(180deg)
            scale(1.06);
    }

    to {
        transform:
            rotate(360deg)
            scale(.96);
    }

}

.ps-motion-ai-core small {
    color:
        #747e98;

    font-size: 8px;

    letter-spacing: 1.3px;
}

.ps-motion-ai-core strong {
    color:
        #111a36;

    font-size: 60px;
}

.ps-motion-node,
.ps-motion-cloud-node {
    position: absolute;

    min-width: 85px;

    padding:
        13px 16px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .9);

    color:
        #6752dc;

    text-align: center;

    font-size: 8px;

    font-weight: 850;

    box-shadow:
        0 15px 35px
        rgba(48, 52, 100, .11);

    z-index: 6;
}

.ai-a {
    left: 18%;
    top: 17%;
}

.ai-b {
    right: 17%;
    top: 15%;
}

.ai-c {
    right: 13%;
    bottom: 17%;
}

.ai-d {
    left: 15%;
    bottom: 18%;
}


/* =========================================================
   CLOUD
========================================================= */

.ps-motion-cloud-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 245px;
    height: 195px;

    transform:
        translate(-50%, -50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius:
        48% 52% 53% 47% /
        55% 60% 40% 45%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #dfeaff
        );

    box-shadow:
        0 35px 85px
        rgba(70, 88, 158, .19);

    z-index: 5;
}

.ps-motion-cloud-core > span {
    font-size: 37px;
}

.ps-motion-cloud-core strong {
    font-size: 16px;
}

.ps-motion-cloud-core small {
    margin-top: 4px;

    color:
        #7b859d;

    font-size: 7px;
}

.cloud-a {
    left: 17%;
    top: 18%;
}

.cloud-b {
    right: 17%;
    top: 17%;
}

.cloud-c {
    right: 14%;
    bottom: 18%;
}

.cloud-d {
    left: 14%;
    bottom: 19%;
}


/* =========================================================
   CONNECTION LINES
========================================================= */

.ps-motion-lines {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
}

.ps-motion-lines path {
    fill: none;

    stroke:
        rgba(111, 84, 220, .26);

    stroke-width: 1.5;

    stroke-dasharray:
        8 10;

    animation:
        psDataFlow
        2.4s
        linear
        infinite;
}

@keyframes psDataFlow {

    to {
        stroke-dashoffset:
            -72;
    }

}


/* =========================================================
   CYBERSECURITY
========================================================= */

.ps-layer-security {
    background:
        rgba(10, 17, 38, .82);
}

.ps-motion-security-grid {
    position: absolute;

    inset: 0;

    opacity: .32;

    background-image:

        linear-gradient(
            rgba(89, 112, 190, .15)
            1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(89, 112, 190, .15)
            1px,
            transparent 1px
        );

    background-size:
        38px 38px;
}

.ps-motion-shield {
    position: relative;

    width: 245px;
    height: 285px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    clip-path:
        polygon(
            50% 0,
            92% 17%,
            84% 70%,
            50% 100%,
            16% 70%,
            8% 17%
        );

    background:
        linear-gradient(
            145deg,
            #4f8efa,
            #7950ee
        );

    color: white;

    filter:
        drop-shadow(
            0 0 42px
            rgba(107, 83, 230, .48)
        );

    z-index: 5;
}

.ps-motion-shield span {
    font-size: 8px;

    letter-spacing: 1.5px;

    opacity: .65;
}

.ps-motion-shield strong {
    font-size: 70px;

    line-height: 1;
}

.ps-motion-shield small {
    font-size: 7px;

    opacity: .65;
}

.ps-motion-scan {
    position: absolute;

    left: 10%;
    right: 10%;

    top: 22%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #8778ff,
            transparent
        );

    box-shadow:
        0 0 20px
        #8778ff;

    animation:
        psMotionSecurityScan
        3.4s
        ease-in-out
        infinite;
}

@keyframes psMotionSecurityScan {

    0%,
    100% {
        top: 22%;
        opacity: .3;
    }

    50% {
        top: 78%;
        opacity: 1;
    }

}

.ps-security-badge {
    position: absolute;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        11px 14px;

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

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .07);

    color:
        #c8d0e0;

    font-size: 8px;

    backdrop-filter:
        blur(12px);
}

.ps-security-badge i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #3ede98;

    box-shadow:
        0 0 12px
        #3ede98;
}

.badge-one {
    right: 12%;
    top: 22%;
}

.badge-two {
    left: 12%;
    bottom: 22%;
}


/* =========================================================
   ECOSYSTEM FINAL
========================================================= */

.ps-ecosystem-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 235px;
    height: 235px;

    transform:
        translate(-50%, -50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #e8e4ff
        );

    box-shadow:
        0 35px 90px
        rgba(85, 70, 175, .21);

    text-align: center;

    z-index: 5;

    animation:
        psEcoFloat
        5s
        ease-in-out
        infinite;
}

@keyframes psEcoFloat {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            translateY(0);
    }

    50% {
        transform:
            translate(-50%, -50%)
            translateY(-9px);
    }

}

.ps-ecosystem-core span {
    color:
        #7c859c;

    font-size: 8px;

    letter-spacing: 1.6px;
}

.ps-ecosystem-core strong {
    margin-top: 6px;

    color:
        #111a36;

    font-size: 31px;

    line-height: .95;
}

.ps-eco-service {
    position: absolute;

    min-width: 105px;

    padding:
        13px 15px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .92);

    color:
        #6652dc;

    text-align: center;

    font-size: 8px;

    font-weight: 850;

    box-shadow:
        0 15px 35px
        rgba(48, 52, 100, .11);

    z-index: 6;
}

.service-software {
    left: 11%;
    top: 14%;
}

.service-web {
    left: 43%;
    top: 8%;
}

.service-mobile {
    right: 10%;
    top: 15%;
}

.service-ai {
    right: 9%;
    bottom: 16%;
}

.service-cloud {
    left: 43%;
    bottom: 8%;
}

.service-security {
    left: 10%;
    bottom: 16%;
}


/* =========================================================
   ACTIVE FINAL ECOSYSTEM PULSE
========================================================= */

.ps-motion-stage[data-scene="7"]
.ps-eco-service {
    animation:
        psEcoNodeFloat
        3.5s
        ease-in-out
        infinite;
}

.ps-motion-stage[data-scene="7"]
.service-web {
    animation-delay:
        -.5s;
}

.ps-motion-stage[data-scene="7"]
.service-mobile {
    animation-delay:
        -1s;
}

.ps-motion-stage[data-scene="7"]
.service-ai {
    animation-delay:
        -1.5s;
}

.ps-motion-stage[data-scene="7"]
.service-cloud {
    animation-delay:
        -2s;
}

.ps-motion-stage[data-scene="7"]
.service-security {
    animation-delay:
        -2.5s;
}

@keyframes psEcoNodeFloat {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -8px;
    }

}


/* =========================================================
   CAPTION
========================================================= */

.ps-motion-caption {
    position: absolute;

    left: 30px;
    bottom: 28px;

    z-index: 40;
}

.ps-motion-caption span {
    display: block;

    margin-bottom: 5px;

    color:
        #7950ee;

    font-size: 8px;

    font-weight: 850;

    letter-spacing: 1.3px;
}

.ps-motion-caption strong {
    display: block;

    max-width: 360px;

    color:
        #28334f;

    font-size: 11px;

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

.ps-motion-stage.ps-is-transitioning
.ps-motion-caption strong {
    opacity: .25;

    transform:
        translateY(6px);
}

.ps-motion-stage[data-scene="6"]
.ps-motion-caption strong {
    color: white;
}


/* =========================================================
   CONTROLS
========================================================= */

.ps-motion-controls {
    position: absolute;

    left: 50%;
    bottom: 30px;

    transform:
        translateX(-50%);

    z-index: 45;

    display: flex;

    align-items: center;

    gap: 8px;
}

.ps-motion-controls button {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        #c5cad7;

    cursor: pointer;

    transition:
        width .25s ease,
        transform .25s ease,
        border-radius .25s ease,
        background .25s ease;
}

.ps-motion-controls button:hover {
    transform:
        scale(1.35);
}

.ps-motion-controls button.active {
    width: 27px;

    transform:
        scale(1);

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #2869ef,
            #7950ee
        );
}


/* =========================================================
   END MESSAGE
========================================================= */

.ps-motion-ending {
    position: relative;

    z-index: 4;

    max-width: 850px;

    margin:
        78px auto 0;

    text-align: center;
}

.ps-motion-ending > span {
    color:
        #7950ee;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 1.5px;
}

.ps-motion-ending h3 {
    margin:
        15px 0 0;

    color:
        #111a36;

    font-size:
        clamp(
            42px,
            5vw,
            70px
        );

    line-height: .96;

    letter-spacing: -3px;
}

.ps-motion-ending h3 strong {
    display: block;

    background:
        linear-gradient(
            90deg,
            #2869ef,
            #7950ee,
            #e98ca3
        );

    -webkit-background-clip: text;

    color: transparent;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .ps-motion-stage {
        min-height: 620px;
    }

}


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

@media (max-width: 760px) {

    .ps-motion-experience {
        padding:
            80px 0;
    }

    .ps-motion-heading {
        margin-bottom:
            45px;
    }

    .ps-motion-heading h2 {
        font-size: 45px;

        letter-spacing:
            -2.5px;
    }

    .ps-motion-heading p {
        font-size: 14px;
    }

    .ps-motion-stage {
        height: 520px;

        min-height: 520px;

        border-radius: 24px;

        perspective: none;
    }

    .orbit-b,
    .orbit-c {
        display: none;
    }

    .orbit-a {
        width: 410px;
        height: 410px;
    }

    .ps-code-window,
    .ps-motion-software,
    .ps-motion-browser {
        width: 620px;

        transform:
            scale(.55);
    }

    .ps-motion-phone {
        transform:
            scale(.78)
            rotateZ(4deg);
    }

    .ps-motion-ai-core,
    .ps-motion-cloud-core,
    .ps-ecosystem-core {
        transform:
            translate(-50%, -50%)
            scale(.78);
    }

    .ps-motion-node,
    .ps-motion-cloud-node,
    .ps-eco-service {
        transform:
            scale(.74);
    }

    .ps-vfx-particle:nth-child(n+15) {
        display: none;
    }

    .ps-motion-caption {
        left: 18px;
        bottom: 55px;

        max-width: 190px;
    }

    .ps-motion-caption strong {
        font-size: 9px;
    }

    .ps-motion-controls {
        bottom: 22px;
    }

    .ps-motion-ending {
        margin-top: 55px;
    }

    .ps-motion-ending h3 {
        font-size: 43px;

        letter-spacing:
            -2.3px;
    }

}


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

@media (max-width: 480px) {

    .ps-motion-heading h2 {
        font-size: 39px;
    }

    .ps-motion-stage {
        height: 470px;

        min-height: 470px;
    }

    .ps-core-object {
        width: 195px;
        height: 195px;
    }

    .ps-core-title {
        font-size: 37px;
    }

    .ps-security-badge {
        transform:
            scale(.78);
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .ps-motion-layer,
    .ps-core-object,
    .ps-motion-core,
    .ps-motion-orbit,
    .ps-vfx-particle {
        transition:
            none !important;

        animation:
            none !important;
    }

    .ps-motion-scan,
    .ps-motion-lines path,
    .ps-core-light,
    .ps-motion-ai-core::after,
    .ps-ecosystem-core,
    .ps-eco-service {
        animation:
            none !important;
    }

}