/* =========================================================
   PRIMESCAPE INFOSOFT
   SCENE 07 — FINAL CLOUD LAYOUT

   CYBERSECURITY → CLOUD
   DESKTOP + TABLET + MOBILE
========================================================= */


/* =========================================================
   SECURITY EXIT
========================================================= */

.ps-scene-security.ps-s07-exit .ps-scene-content {
    opacity: .12;
    transform: translate3d(-30px, -20px, 0);
    filter: blur(3px);

    transition:
        opacity .45s ease,
        transform .7s cubic-bezier(.7,0,.2,1),
        filter .5s ease;
}


.ps-scene-security.ps-s07-exit .ps-cyber-screening {
    opacity: .06;

    transform:
        translate3d(-60px, -25px, 0)
        scale(.85);

    filter: blur(8px);

    transition:
        transform .85s cubic-bezier(.7,0,.2,1),
        opacity .5s ease,
        filter .55s ease;
}



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

.ps-scene-cloud {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    min-height: 780px;

    overflow: hidden !important;

    isolation: isolate;
}



/* =========================================================
   MAIN CONTAINER
========================================================= */

.ps-scene-cloud > .ps-container {
    width: min(1240px, calc(100% - 80px)) !important;

    max-width: 1240px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}



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

.ps-scene-cloud .ps-scene-grid {
    display: grid !important;

    grid-template-columns:
        minmax(340px, .85fr)
        minmax(520px, 1.15fr) !important;

    align-items: center !important;

    column-gap: clamp(50px, 7vw, 105px) !important;

    width: 100% !important;

    min-height: 780px !important;

    margin: 0 !important;

    padding:
        100px 0 !important;
}



/* =========================================================
   TEXT
========================================================= */

.ps-scene-cloud .ps-scene-content {
    position: relative !important;

    width: 100% !important;

    max-width: 455px !important;

    margin: 0 !important;

    padding: 0 !important;

    left: auto !important;
    right: auto !important;

    z-index: 10;
}


.ps-scene-cloud .ps-scene-content h3 {
    width: 100%;

    max-width: 455px;

    margin-left: 0 !important;
    margin-right: 0 !important;

    font-size:
        clamp(56px, 5vw, 82px) !important;

    line-height: .96 !important;

    letter-spacing: -.058em;
}


.ps-scene-cloud .ps-scene-content > p {
    max-width: 430px;

    margin-top: 25px;
}


.ps-scene-cloud .ps-scene-tags {
    max-width: 450px;

    margin-top: 30px;
}



/* =========================================================
   VISUAL COLUMN
========================================================= */

.ps-scene-cloud .ps-scene-visual {
    position: relative !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    min-width: 0 !important;

    height: 600px !important;

    margin: 0 !important;

    padding: 0 !important;

    left: auto !important;
    right: auto !important;

    transform: none !important;

    overflow: visible !important;
}



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

   Fixed logical 600 × 600 coordinate system.
   SVG is also 600 × 600.
========================================================= */

.ps-scene-cloud .ps-cloud-stage {
    position: relative !important;

    display: block !important;

    width: 560px !important;
    height: 560px !important;

    max-width: 100% !important;

    margin: 0 auto !important;

    padding: 0 !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none;

    transform-origin: center center;

    perspective: 1200px;
}



/* =========================================================
   AMBIENT CLOUD GLOW
========================================================= */

.ps-scene-cloud::before {
    content: "";

    position: absolute;

    width: 720px;
    height: 720px;

    left: 68%;
    top: 50%;

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

    border-radius: 50%;

    opacity: 0;

    background:
        radial-gradient(
            circle,
            rgba(99,180,235,.17),
            rgba(114,173,231,.08) 37%,
            rgba(139,196,233,.035) 56%,
            transparent 72%
        );

    pointer-events: none;

    z-index: -1;
}


.ps-scene-cloud.ps-s07-enter::before {
    opacity: 1;

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

    transition:
        opacity 1s ease,
        transform 1.5s cubic-bezier(.16,1,.3,1);
}



/* =========================================================
   TEXT ENTRY
========================================================= */

.ps-scene-cloud .ps-scene-number,
.ps-scene-cloud .ps-scene-label,
.ps-scene-cloud .ps-scene-content h3,
.ps-scene-cloud .ps-scene-content > p,
.ps-scene-cloud .ps-scene-tags {
    opacity: 0 !important;
}


.ps-scene-cloud .ps-scene-number {
    transform: translateY(-18px);
}


.ps-scene-cloud .ps-scene-label {
    transform: translateX(-45px);
}


.ps-scene-cloud .ps-scene-content h3 {
    transform: translateY(50px);
}


.ps-scene-cloud .ps-scene-content > p {
    transform: translateY(30px);
}


.ps-scene-cloud .ps-scene-tags {
    transform: translateY(22px);
}


.ps-scene-cloud.ps-s07-enter .ps-scene-number,
.ps-scene-cloud.ps-s07-enter .ps-scene-label,
.ps-scene-cloud.ps-s07-enter .ps-scene-content h3,
.ps-scene-cloud.ps-s07-enter .ps-scene-content > p,
.ps-scene-cloud.ps-s07-enter .ps-scene-tags {
    opacity: 1 !important;

    transform: translate(0, 0);
}


.ps-scene-cloud.ps-s07-enter .ps-scene-number {
    transition:
        opacity .4s ease .05s,
        transform .65s cubic-bezier(.16,1,.3,1) .05s;
}


.ps-scene-cloud.ps-s07-enter .ps-scene-label {
    transition:
        opacity .4s ease .12s,
        transform .7s cubic-bezier(.16,1,.3,1) .12s;
}


.ps-scene-cloud.ps-s07-enter .ps-scene-content h3 {
    transition:
        opacity .55s ease .2s,
        transform .85s cubic-bezier(.16,1,.3,1) .2s;
}


.ps-scene-cloud.ps-s07-enter .ps-scene-content > p {
    transition:
        opacity .5s ease .34s,
        transform .75s cubic-bezier(.16,1,.3,1) .34s;
}


.ps-scene-cloud.ps-s07-enter .ps-scene-tags {
    transition:
        opacity .5s ease .47s,
        transform .7s cubic-bezier(.16,1,.3,1) .47s;
}



/* =========================================================
   NETWORK SVG

   This MUST fill the same stage.
========================================================= */

.ps-scene-cloud .ps-cloud-lines {
    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    overflow: visible;

    pointer-events: none;

    z-index: 3;

    opacity: 0 !important;

    transform: none !important;
}


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

    stroke: rgba(120, 113, 245, .28);

    stroke-width: 1.3;

    vector-effect: non-scaling-stroke;

    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}


.ps-scene-cloud.ps-s07-enter .ps-cloud-lines {
    opacity: 1 !important;

    transition:
        opacity .35s ease 1.05s;
}


.ps-scene-cloud.ps-s07-enter .ps-cloud-lines path {
    animation:
        psCloudLineDraw
        1.1s
        cubic-bezier(.16,1,.3,1)
        1.05s
        forwards;
}


@keyframes psCloudLineDraw {

    to {
        stroke-dashoffset: 0;
    }

}



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

.ps-scene-cloud .ps-cloud-core {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 190px;
    height: 190px;

    margin: 0 !important;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    z-index: 12;

    opacity: 0 !important;

    transform:
        translate(-50%, -50%)
        scale(.2) !important;

    filter: blur(10px);

    background:
        radial-gradient(
            circle at 40% 30%,
            rgba(255,255,255,.98),
            rgba(243,247,255,.94) 60%,
            rgba(229,237,251,.82)
        );

    border:
        1px solid rgba(115,126,221,.10);

    box-shadow:
        0 25px 65px rgba(60,75,145,.10),
        inset 0 0 40px rgba(102,115,225,.04);

    transform-origin: center center;
}


.ps-scene-cloud.ps-s07-enter .ps-cloud-core {
    opacity: 1 !important;

    transform:
        translate(-50%, -50%)
        scale(1) !important;

    filter: blur(0);

    transition:
        opacity .4s ease .3s,
        transform 1s cubic-bezier(.12,.9,.18,1) .3s,
        filter .7s ease .3s;
}


.ps-cloud-icon {
    display: block;

    margin-bottom: 14px;

    font-size: 30px;

    line-height: 1;
}


.ps-cloud-core strong {
    font-size: 14px;

    letter-spacing: .05em;
}


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

    font-size: 8px;

    letter-spacing: .1em;

    opacity: .5;
}


.ps-cloud-core-status {
    display: flex;

    align-items: center;

    gap: 5px;

    margin-top: 12px;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: .09em;

    opacity: .55;
}


.ps-cloud-core-status i {
    width: 5px;
    height: 5px;

    display: block;

    border-radius: 50%;

    background: #55d5b8;

    box-shadow:
        0 0 9px rgba(85,213,184,.55);
}



/* =========================================================
   CLOUD NODE BASE
========================================================= */

.ps-scene-cloud .ps-cloud-node {
    position: absolute !important;

    width: 94px !important;
    height: 94px !important;

    margin: 0 !important;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 7px;

    border-radius: 26px;

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

    border:
        1px solid rgba(110,119,215,.09);

    box-shadow:
        0 18px 40px rgba(73,87,160,.08);

    z-index: 15;

    opacity: 0 !important;

    filter: blur(6px);

    transform:
        translate(-50%, -50%)
        scale(.25) !important;

    transform-origin: center center;
}


.ps-cloud-node-icon {
    display: grid;

    place-items: center;

    width: 27px;
    height: 27px;

    border-radius: 9px;

    background:
        rgba(103,93,245,.06);

    font-size: 8px;

    font-weight: 800;

    color: #665df0;
}


.ps-cloud-node strong {
    font-size: 9px;

    letter-spacing: .04em;

    color: #6459ef;
}



/* =========================================================
   EXACT NODE POSITIONS
   MATCH SVG 600 × 600
========================================================= */


/* APP — 130 / 135 */

.ps-scene-cloud .cloud-node-1 {
    left: 21.6667% !important;
    top: 22.5% !important;

    right: auto !important;
    bottom: auto !important;
}


/* WEB — 470 / 135 */

.ps-scene-cloud .cloud-node-2 {
    left: 78.3333% !important;
    top: 22.5% !important;

    right: auto !important;
    bottom: auto !important;
}


/* DATA — 500 / 325 */

.ps-scene-cloud .cloud-node-3 {
    left: 83.3333% !important;
    top: 54.1667% !important;

    right: auto !important;
    bottom: auto !important;
}


/* AI — 315 / 505 */

.ps-scene-cloud .cloud-node-4 {
    left: 52.5% !important;
    top: 84.1667% !important;

    right: auto !important;
    bottom: auto !important;
}


/* API — 105 / 385 */

.ps-scene-cloud .cloud-node-5 {
    left: 17.5% !important;
    top: 64.1667% !important;

    right: auto !important;
    bottom: auto !important;
}



/* =========================================================
   NODE ENTRY
========================================================= */

.ps-scene-cloud.ps-s07-enter .ps-cloud-node {
    opacity: 1 !important;

    filter: blur(0);

    transform:
        translate(-50%, -50%)
        scale(1) !important;

    transition:
        opacity .35s ease,
        transform .85s cubic-bezier(.12,.9,.18,1),
        filter .5s ease;
}


.ps-scene-cloud.ps-s07-enter .cloud-node-1 {
    transition-delay: .75s;
}


.ps-scene-cloud.ps-s07-enter .cloud-node-2 {
    transition-delay: .88s;
}


.ps-scene-cloud.ps-s07-enter .cloud-node-3 {
    transition-delay: 1.01s;
}


.ps-scene-cloud.ps-s07-enter .cloud-node-4 {
    transition-delay: 1.14s;
}


.ps-scene-cloud.ps-s07-enter .cloud-node-5 {
    transition-delay: 1.27s;
}



/* =========================================================
   SMALL NETWORK PULSES
========================================================= */

.ps-cloud-pulse {
    position: absolute;

    width: 6px;
    height: 6px;

    z-index: 8;

    border-radius: 50%;

    background: #746df2;

    box-shadow:
        0 0 14px rgba(116,109,242,.55);

    opacity: 0;
}


.pulse-1 {
    left: 37%;
    top: 37%;
}


.pulse-2 {
    left: 64%;
    top: 38%;
}


.pulse-3 {
    left: 64%;
    top: 62%;
}


.ps-scene-cloud.ps-s07-complete .ps-cloud-pulse {
    animation:
        psCloudPulse
        2.8s
        ease-in-out
        infinite;
}


.ps-scene-cloud.ps-s07-complete .pulse-2 {
    animation-delay: .7s;
}


.ps-scene-cloud.ps-s07-complete .pulse-3 {
    animation-delay: 1.4s;
}


@keyframes psCloudPulse {

    0%,
    100% {
        opacity: 0;
        transform: scale(.5);
    }

    45% {
        opacity: .9;
        transform: scale(1);
    }

}



/* =========================================================
   COMPLETE STATE
========================================================= */

.ps-scene-cloud.ps-s07-complete .ps-cloud-core {
    animation:
        psCloudCoreBreathe
        4.8s
        ease-in-out
        infinite;
}


@keyframes psCloudCoreBreathe {

    0%,
    100% {
        filter:
            brightness(1);
    }

    50% {
        filter:
            brightness(1.06)
            drop-shadow(
                0 0 22px
                rgba(100,120,220,.10)
            );
    }

}



/* =========================================================
   IMPORTANT:
   SHOWCASE ENDING IS NOW ITS OWN SECTION
========================================================= */

.ps-showcase-ending-section {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    min-height: 660px;

    overflow: hidden;

    clear: both;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(157,192,247,.15),
            transparent 45%
        );
}


.ps-showcase-ending-section
.ps-showcase-ending {
    width: min(1000px, calc(100% - 48px)) !important;

    min-height: 660px;

    margin: 0 auto !important;

    padding:
        110px 0 !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;
}


.ps-showcase-ending-section
.ps-showcase-ending > span {
    display: block;

    margin-bottom: 28px;

    text-align: center;
}


.ps-showcase-ending-section
.ps-showcase-ending h3 {
    width: min(760px, 100%);

    margin:
        0 auto 42px !important;

    text-align: center !important;

    font-size:
        clamp(54px, 6.5vw, 92px);

    line-height: .95;

    letter-spacing: -.06em;
}



/* =========================================================
   LAPTOP
========================================================= */

@media
(max-width: 1180px)
and
(min-width: 821px) {

    .ps-scene-cloud > .ps-container {
        width:
            calc(100% - 56px) !important;
    }


    .ps-scene-cloud .ps-scene-grid {
        grid-template-columns:
            minmax(300px, .8fr)
            minmax(460px, 1.2fr) !important;

        column-gap: 35px !important;
    }


    .ps-scene-cloud .ps-cloud-stage {
        width: 480px !important;
        height: 480px !important;
    }


    .ps-scene-cloud .ps-scene-visual {
        height: 520px !important;
    }


    .ps-scene-cloud .ps-cloud-core {
        width: 165px;
        height: 165px;
    }


    .ps-scene-cloud .ps-cloud-node {
        width: 82px !important;
        height: 82px !important;

        border-radius: 22px;
    }

}



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

@media
(max-width: 820px)
and
(min-width: 601px) {

    .ps-scene-cloud {
        min-height: auto;
    }


    .ps-scene-cloud > .ps-container {
        width:
            calc(100% - 48px) !important;
    }


    .ps-scene-cloud .ps-scene-grid {
        display: grid !important;

        grid-template-columns:
            1fr !important;

        row-gap: 55px !important;

        min-height: 0 !important;

        padding:
            90px 0 100px !important;
    }


    .ps-scene-cloud .ps-scene-content {
        max-width: 620px !important;

        margin:
            0 auto !important;

        text-align: center;
    }


    .ps-scene-cloud .ps-scene-content h3,
    .ps-scene-cloud .ps-scene-content > p {
        margin-left: auto !important;
        margin-right: auto !important;
    }


    .ps-scene-cloud .ps-scene-tags {
        margin-left: auto;
        margin-right: auto;

        justify-content: center;
    }


    .ps-scene-cloud .ps-scene-visual {
        height: 520px !important;
    }


    .ps-scene-cloud .ps-cloud-stage {
        width: 500px !important;
        height: 500px !important;
    }


    .ps-scene-cloud::before {
        left: 50%;
        top: 70%;
    }

}



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

@media (max-width: 600px) {

    .ps-scene-cloud {
        min-height: auto !important;
    }


    .ps-scene-cloud > .ps-container {
        width:
            calc(100% - 36px) !important;
    }


    .ps-scene-cloud .ps-scene-grid {
        display: grid !important;

        grid-template-columns:
            1fr !important;

        row-gap: 34px !important;

        min-height: 0 !important;

        padding:
            72px 0 82px !important;
    }


    /* COPY */

    .ps-scene-cloud .ps-scene-content {
        max-width: 100% !important;

        margin: 0 !important;

        text-align: left !important;
    }


    .ps-scene-cloud .ps-scene-content h3 {
        max-width: 100% !important;

        font-size:
            clamp(
                46px,
                14vw,
                62px
            ) !important;

        line-height: .96 !important;
    }


    .ps-scene-cloud .ps-scene-content > p {
        max-width: 100%;

        font-size: 16px;

        line-height: 1.65;
    }


    /* VISUAL */

    .ps-scene-cloud .ps-scene-visual {
        width: 100% !important;

        height: auto !important;

        min-height: 370px !important;

        overflow: visible !important;
    }


    .ps-scene-cloud .ps-cloud-stage {
        width:
            min(
                350px,
                calc(100vw - 34px)
            ) !important;

        height:
            min(
                350px,
                calc(100vw - 34px)
            ) !important;
    }


    .ps-scene-cloud .ps-cloud-core {
        width: 125px;
        height: 125px;
    }


    .ps-cloud-icon {
        margin-bottom: 8px;

        font-size: 23px;
    }


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


    .ps-cloud-core-status {
        display: none;
    }


    .ps-scene-cloud .ps-cloud-node {
        width: 66px !important;
        height: 66px !important;

        border-radius: 19px;
    }


    .ps-cloud-node-icon {
        width: 22px;
        height: 22px;

        border-radius: 7px;

        font-size: 6px;
    }


    .ps-cloud-node strong {
        font-size: 7px;
    }


    .ps-scene-cloud::before {
        width: 420px;
        height: 420px;

        left: 50%;
        top: 73%;
    }


    /* ENDING */

    .ps-showcase-ending-section {
        min-height: 580px;
    }


    .ps-showcase-ending-section
    .ps-showcase-ending {
        width:
            calc(100% - 36px) !important;

        min-height: 580px;

        padding:
            85px 0 !important;
    }


    .ps-showcase-ending-section
    .ps-showcase-ending h3 {
        font-size:
            clamp(
                46px,
                14vw,
                65px
            );

        line-height: .96;

        margin-bottom:
            34px !important;
    }

}



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

@media (max-width: 390px) {

    .ps-scene-cloud > .ps-container {
        width:
            calc(100% - 28px) !important;
    }


    .ps-scene-cloud .ps-cloud-stage {
        width:
            min(
                315px,
                calc(100vw - 28px)
            ) !important;

        height:
            min(
                315px,
                calc(100vw - 28px)
            ) !important;
    }


    .ps-scene-cloud .ps-cloud-core {
        width: 112px;
        height: 112px;
    }


    .ps-scene-cloud .ps-cloud-node {
        width: 59px !important;
        height: 59px !important;
    }

}



/* =========================================================
   TOUCH
========================================================= */

.ps-cloud-stage.ps-s07-touch {
    animation:
        psCloudTouch
        .42s
        cubic-bezier(.22,1,.36,1);
}


@keyframes psCloudTouch {

    50% {
        transform:
            scale(.985);
    }

}



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

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

    .ps-scene-security.ps-s07-exit *,
    .ps-scene-cloud *,
    .ps-showcase-ending-section * {
        animation: none !important;

        transition-duration: .01ms !important;

        transition-delay: 0ms !important;
    }

}

/* =========================================================
   SCENE 07 — FINAL LAYOUT CORRECTION
   IMPORTANT:
   .ps-container and .ps-scene-grid are THE SAME ELEMENT.
========================================================= */


/* =========================================================
   DESKTOP
========================================================= */

.ps-scene-cloud
> .ps-container.ps-scene-grid {

    box-sizing: border-box !important;

    width:
        min(
            1420px,
            calc(100% - 48px)
        ) !important;

    max-width:
        1420px !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;

    padding-left:
        0 !important;

    padding-right:
        0 !important;

    display:
        grid !important;

    grid-template-columns:
        minmax(400px, .88fr)
        minmax(560px, 1.12fr) !important;

    column-gap:
        clamp(
            70px,
            6vw,
            120px
        ) !important;

    align-items:
        center !important;
}



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

.ps-scene-cloud
> .ps-container.ps-scene-grid
> .ps-scene-content {

    box-sizing:
        border-box !important;

    width:
        100% !important;

    max-width:
        510px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    justify-self:
        start !important;
}


.ps-scene-cloud
> .ps-container.ps-scene-grid
> .ps-scene-content h3 {

    width:
        100% !important;

    max-width:
        510px !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;
}



/* =========================================================
   CLOUD VISUAL COLUMN
========================================================= */

.ps-scene-cloud
> .ps-container.ps-scene-grid
> .ps-scene-visual {

    box-sizing:
        border-box !important;

    width:
        100% !important;

    min-width:
        0 !important;

    height:
        600px !important;

    min-height:
        600px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    justify-self:
        stretch !important;

    overflow:
        visible !important;
}



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

.ps-scene-cloud
.ps-cloud-stage {

    position:
        relative !important;

    width:
        560px !important;

    height:
        560px !important;

    max-width:
        100% !important;

    margin:
        0 auto !important;

    left:
        auto !important;

    right:
        auto !important;

    top:
        auto !important;

    bottom:
        auto !important;
}



/* =========================================================
   1400PX AND BELOW
========================================================= */

@media (max-width: 1400px) {

    .ps-scene-cloud
    > .ps-container.ps-scene-grid {

        width:
            calc(100% - 80px) !important;

        grid-template-columns:
            minmax(340px, .85fr)
            minmax(500px, 1.15fr) !important;

        column-gap:
            55px !important;
    }


    .ps-scene-cloud
    .ps-cloud-stage {

        width:
            500px !important;

        height:
            500px !important;
    }

}



/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 1050px) {

    .ps-scene-cloud
    > .ps-container.ps-scene-grid {

        width:
            calc(100% - 64px) !important;

        max-width:
            820px !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        row-gap:
            55px !important;

        column-gap:
            0 !important;
    }


    .ps-scene-cloud
    > .ps-container.ps-scene-grid
    > .ps-scene-content {

        max-width:
            650px !important;

        margin:
            0 auto !important;

        justify-self:
            center !important;

        text-align:
            center !important;
    }


    .ps-scene-cloud
    > .ps-container.ps-scene-grid
    > .ps-scene-content h3,

    .ps-scene-cloud
    > .ps-container.ps-scene-grid
    > .ps-scene-content p {

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }


    .ps-scene-cloud
    > .ps-container.ps-scene-grid
    > .ps-scene-content
    .ps-scene-tags {

        justify-content:
            center !important;
    }


    .ps-scene-cloud
    > .ps-container.ps-scene-grid
    > .ps-scene-visual {

        height:
            520px !important;

        min-height:
            520px !important;
    }


    .ps-scene-cloud
    .ps-cloud-stage {

        width:
            500px !important;

        height:
            500px !important;
    }

}



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

@media (max-width: 600px) {

    .ps-scene-cloud {

        padding:
            72px 0 82px !important;
    }


    .ps-scene-cloud
    > .ps-container.ps-scene-grid {

        width:
            calc(100% - 36px) !important;

        max-width:
            none !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        padding:
            0 !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        row-gap:
            32px !important;
    }


    .ps-scene-cloud
    > .ps-container.ps-scene-grid
    > .ps-scene-content {

        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 !important;

        text-align:
            left !important;

        justify-self:
            stretch !important;
    }


    .ps-scene-cloud
    > .ps-container.ps-scene-grid
    > .ps-scene-content h3 {

        width:
            100% !important;

        max-width:
            100% !important;

        margin-left:
            0 !important;

        margin-right:
            0 !important;

        font-size:
            clamp(
                44px,
                13vw,
                60px
            ) !important;

        line-height:
            .97 !important;
    }


    .ps-scene-cloud
    > .ps-container.ps-scene-grid
    > .ps-scene-content p {

        width:
            100% !important;

        max-width:
            100% !important;

        margin-left:
            0 !important;

        margin-right:
            0 !important;

        font-size:
            15px !important;

        line-height:
            1.65 !important;
    }


    .ps-scene-cloud
    > .ps-container.ps-scene-grid
    > .ps-scene-content
    .ps-scene-tags {

        justify-content:
            flex-start !important;
    }


    .ps-scene-cloud
    > .ps-container.ps-scene-grid
    > .ps-scene-visual {

        width:
            100% !important;

        height:
            auto !important;

        min-height:
            365px !important;

        margin:
            0 !important;

        justify-content:
            center !important;

        overflow:
            visible !important;
    }


    .ps-scene-cloud
    .ps-cloud-stage {

        width:
            min(
                350px,
                calc(100vw - 36px)
            ) !important;

        height:
            min(
                350px,
                calc(100vw - 36px)
            ) !important;

        margin:
            0 auto !important;
    }

}



/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 390px) {

    .ps-scene-cloud
    > .ps-container.ps-scene-grid {

        width:
            calc(100% - 28px) !important;
    }


    .ps-scene-cloud
    .ps-cloud-stage {

        width:
            min(
                315px,
                calc(100vw - 28px)
            ) !important;

        height:
            min(
                315px,
                calc(100vw - 28px)
            ) !important;
    }

}

/* =========================================================
   SCENE 07 — CLOUD CINEMATIC VFX UPGRADE
   KEEP ALL EXISTING LAYOUT ABOVE THIS BLOCK

   PHASES:
   ps-s07-enter
   ps-s07-core
   ps-s07-core-live
   ps-s07-network
   ps-s07-nodes-a
   ps-s07-nodes-b
   ps-s07-nodes-c
   ps-s07-data-live
   ps-s07-complete
========================================================= */


/* =========================================================
   01 — RESET OLD AUTOMATIC ENTRY

   Previous CSS revealed everything immediately when
   ps-s07-enter was added.

   We now hold the visual elements back until their
   dedicated cinematic phase.
========================================================= */

.ps-scene-cloud.ps-s07-enter
.ps-cloud-core {

    opacity: 0 !important;

    transform:
        translate(-50%, -50%)
        scale(.05) !important;

    filter:
        blur(14px)
        brightness(1.8) !important;

    transition:
        none !important;
}


.ps-scene-cloud.ps-s07-enter
.ps-cloud-node {

    opacity: 0 !important;

    filter:
        blur(10px) !important;

    transition:
        none !important;
}


.ps-scene-cloud.ps-s07-enter
.ps-cloud-lines {

    opacity: 0 !important;

    transition:
        none !important;
}


.ps-scene-cloud.ps-s07-enter
.ps-cloud-lines path {

    stroke-dasharray:
        1000 !important;

    stroke-dashoffset:
        1000 !important;

    animation:
        none !important;
}



/* =========================================================
   02 — CLOUD ENERGY FIELD
========================================================= */

.ps-cloud-stage::before {

    content: "";

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        90px;

    height:
        90px;

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

    border-radius:
        50%;

    opacity:
        0;

    pointer-events:
        none;

    z-index:
        1;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.95) 0%,
            rgba(144,213,255,.60) 16%,
            rgba(111,105,245,.28) 38%,
            rgba(103,150,247,.08) 58%,
            transparent 74%
        );

    box-shadow:
        0 0 30px rgba(109,175,255,.20),
        0 0 80px rgba(111,105,245,.13);
}



/* =========================================================
   03 — ENERGY POINT ACTIVATES
========================================================= */

.ps-scene-cloud.ps-s07-core
.ps-cloud-stage::before {

    opacity:
        1;

    animation:
        psCloudEnergyBirth
        .9s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


@keyframes psCloudEnergyBirth {

    0% {

        opacity:
            0;

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

        filter:
            blur(8px);
    }


    35% {

        opacity:
            1;

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

        filter:
            blur(2px);
    }


    70% {

        opacity:
            1;

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

        filter:
            blur(0);
    }


    100% {

        opacity:
            .75;

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

        filter:
            blur(0);
    }

}



/* =========================================================
   04 — CORE MATERIALISES
========================================================= */

.ps-scene-cloud.ps-s07-core-live
.ps-cloud-core {

    opacity:
        1 !important;

    transform:
        translate(-50%, -50%)
        scale(1) !important;

    filter:
        blur(0)
        brightness(1) !important;

    transition:
        opacity .32s ease,
        transform .9s
        cubic-bezier(.12,.9,.18,1),
        filter .65s ease !important;
}



/* =========================================================
   CORE IMPACT SHOCKWAVE
========================================================= */

.ps-cloud-stage::after {

    content: "";

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        180px;

    height:
        180px;

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

    border:
        1px solid
        rgba(118,168,248,.40);

    border-radius:
        50%;

    opacity:
        0;

    pointer-events:
        none;

    z-index:
        2;
}


.ps-scene-cloud.ps-s07-core-live
.ps-cloud-stage::after {

    animation:
        psCloudImpactRing
        1.25s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


@keyframes psCloudImpactRing {

    0% {

        opacity:
            .9;

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


    55% {

        opacity:
            .45;
    }


    100% {

        opacity:
            0;

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

}



/* =========================================================
   05 — CORE LIGHT SWEEP
========================================================= */

.ps-cloud-core {

    overflow:
        hidden;
}


.ps-cloud-core::before {

    content: "";

    position:
        absolute;

    width:
        55%;

    height:
        150%;

    left:
        -85%;

    top:
        -25%;

    transform:
        rotate(18deg);

    pointer-events:
        none;

    opacity:
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.04),
            rgba(255,255,255,.92),
            rgba(255,255,255,.08),
            transparent
        );
}


.ps-scene-cloud.ps-s07-core-live
.ps-cloud-core::before {

    animation:
        psCloudCoreSweep
        1.15s
        ease
        .35s
        forwards;
}


@keyframes psCloudCoreSweep {

    0% {

        left:
            -85%;

        opacity:
            0;
    }


    20% {

        opacity:
            .9;
    }


    100% {

        left:
            135%;

        opacity:
            0;
    }

}



/* =========================================================
   06 — CLOUD STATUS BOOTS
========================================================= */

.ps-cloud-core-status {

    opacity:
        0 !important;

    transform:
        translateY(8px);
}


.ps-scene-cloud.ps-s07-core-live
.ps-cloud-core-status {

    opacity:
        .65 !important;

    transform:
        translateY(0);

    transition:
        opacity .45s ease .45s,
        transform .55s
        cubic-bezier(.16,1,.3,1)
        .45s;
}


.ps-cloud-core-status i {

    animation:
        psCloudStatusBlink
        1.7s
        ease-in-out
        infinite;
}


@keyframes psCloudStatusBlink {

    0%,
    100% {

        opacity:
            1;

        transform:
            scale(1);
    }


    50% {

        opacity:
            .35;

        transform:
            scale(.72);
    }

}



/* =========================================================
   07 — CONNECTION NETWORK DRAWS
========================================================= */

.ps-scene-cloud.ps-s07-network
.ps-cloud-lines {

    opacity:
        1 !important;

    transition:
        opacity .3s ease !important;
}


.ps-scene-cloud.ps-s07-network
.ps-cloud-lines path {

    animation:
        psCloudNetworkDraw
        .95s
        cubic-bezier(.16,1,.3,1)
        forwards !important;
}


.ps-scene-cloud.ps-s07-network
.ps-cloud-lines path:nth-child(1) {

    animation-delay:
        0s !important;
}


.ps-scene-cloud.ps-s07-network
.ps-cloud-lines path:nth-child(2) {

    animation-delay:
        .12s !important;
}


.ps-scene-cloud.ps-s07-network
.ps-cloud-lines path:nth-child(3) {

    animation-delay:
        .24s !important;
}


.ps-scene-cloud.ps-s07-network
.ps-cloud-lines path:nth-child(4) {

    animation-delay:
        .36s !important;
}


.ps-scene-cloud.ps-s07-network
.ps-cloud-lines path:nth-child(5) {

    animation-delay:
        .48s !important;
}


@keyframes psCloudNetworkDraw {

    from {

        stroke-dashoffset:
            1000;
    }


    to {

        stroke-dashoffset:
            0;
    }

}



/* =========================================================
   NETWORK GLOW AFTER DRAW
========================================================= */

.ps-scene-cloud.ps-s07-data-live
.ps-cloud-lines path {

    stroke:
        rgba(104,105,242,.38);

    filter:
        drop-shadow(
            0 0 2px
            rgba(107,120,247,.28)
        );

    transition:
        stroke .6s ease,
        filter .6s ease;
}



/* =========================================================
   08 — NODE START POSITIONS

   They originate toward the core rather than simply
   fading at their final locations.
========================================================= */


/* APP */

.ps-scene-cloud
.cloud-node-1 {

    transform:
        translate(
            calc(-50% + 140px),
            calc(-50% + 135px)
        )
        scale(.15) !important;
}


/* WEB */

.ps-scene-cloud
.cloud-node-2 {

    transform:
        translate(
            calc(-50% - 140px),
            calc(-50% + 135px)
        )
        scale(.15) !important;
}


/* DATA */

.ps-scene-cloud
.cloud-node-3 {

    transform:
        translate(
            calc(-50% - 175px),
            calc(-50% - 25px)
        )
        scale(.15) !important;
}


/* AI */

.ps-scene-cloud
.cloud-node-4 {

    transform:
        translate(
            calc(-50% - 10px),
            calc(-50% - 175px)
        )
        scale(.15) !important;
}


/* API */

.ps-scene-cloud
.cloud-node-5 {

    transform:
        translate(
            calc(-50% + 155px),
            calc(-50% - 85px)
        )
        scale(.15) !important;
}



/* =========================================================
   09 — APP + WEB DEPLOY
========================================================= */

.ps-scene-cloud.ps-s07-nodes-a
.cloud-node-1,

.ps-scene-cloud.ps-s07-nodes-a
.cloud-node-2 {

    opacity:
        1 !important;

    filter:
        blur(0) !important;

    transform:
        translate(-50%, -50%)
        scale(1) !important;

    transition:
        opacity .28s ease,
        filter .5s ease,
        transform .85s
        cubic-bezier(.12,.9,.18,1) !important;
}



/* =========================================================
   NODE ARRIVAL FLASH
========================================================= */

.ps-cloud-node::after {

    content: "";

    position:
        absolute;

    inset:
        -7px;

    border:
        1px solid
        rgba(107,104,244,.25);

    border-radius:
        inherit;

    opacity:
        0;

    transform:
        scale(.72);

    pointer-events:
        none;
}


.ps-scene-cloud.ps-s07-nodes-a
.cloud-node-1::after,

.ps-scene-cloud.ps-s07-nodes-a
.cloud-node-2::after,

.ps-scene-cloud.ps-s07-nodes-b
.cloud-node-3::after,

.ps-scene-cloud.ps-s07-nodes-b
.cloud-node-5::after,

.ps-scene-cloud.ps-s07-nodes-c
.cloud-node-4::after {

    animation:
        psCloudNodeArrival
        .8s
        ease-out
        forwards;
}


@keyframes psCloudNodeArrival {

    0% {

        opacity:
            .85;

        transform:
            scale(.72);
    }


    100% {

        opacity:
            0;

        transform:
            scale(1.55);
    }

}



/* =========================================================
   10 — DATA + API DEPLOY
========================================================= */

.ps-scene-cloud.ps-s07-nodes-b
.cloud-node-3,

.ps-scene-cloud.ps-s07-nodes-b
.cloud-node-5 {

    opacity:
        1 !important;

    filter:
        blur(0) !important;

    transform:
        translate(-50%, -50%)
        scale(1) !important;

    transition:
        opacity .28s ease,
        filter .5s ease,
        transform .85s
        cubic-bezier(.12,.9,.18,1) !important;
}



/* =========================================================
   11 — AI DEPLOYS LAST
========================================================= */

.ps-scene-cloud.ps-s07-nodes-c
.cloud-node-4 {

    opacity:
        1 !important;

    filter:
        blur(0) !important;

    transform:
        translate(-50%, -50%)
        scale(1) !important;

    transition:
        opacity .28s ease,
        filter .5s ease,
        transform .9s
        cubic-bezier(.12,.9,.18,1) !important;
}



/* =========================================================
   12 — DATA PACKETS
========================================================= */

.ps-cloud-pulse {

    opacity:
        0 !important;

    width:
        7px;

    height:
        7px;

    margin:
        -3.5px 0 0 -3.5px;

    background:
        #7169f3;

    box-shadow:
        0 0 8px rgba(113,105,243,.85),
        0 0 20px rgba(93,163,255,.40);
}



/* APP ROUTE */

.ps-scene-cloud.ps-s07-data-live
.pulse-1 {

    animation:
        psCloudPacketOne
        2.4s
        ease-in-out
        infinite !important;
}


@keyframes psCloudPacketOne {

    0% {

        left:
            50%;

        top:
            50%;

        opacity:
            0;
    }


    12% {

        opacity:
            1;
    }


    88% {

        opacity:
            .9;
    }


    100% {

        left:
            21.6667%;

        top:
            22.5%;

        opacity:
            0;
    }

}



/* WEB ROUTE */

.ps-scene-cloud.ps-s07-data-live
.pulse-2 {

    animation:
        psCloudPacketTwo
        2.65s
        ease-in-out
        .45s
        infinite !important;
}


@keyframes psCloudPacketTwo {

    0% {

        left:
            50%;

        top:
            50%;

        opacity:
            0;
    }


    12% {

        opacity:
            1;
    }


    88% {

        opacity:
            .9;
    }


    100% {

        left:
            78.3333%;

        top:
            22.5%;

        opacity:
            0;
    }

}



/* DATA ROUTE */

.ps-scene-cloud.ps-s07-data-live
.pulse-3 {

    animation:
        psCloudPacketThree
        2.3s
        ease-in-out
        .9s
        infinite !important;
}


@keyframes psCloudPacketThree {

    0% {

        left:
            50%;

        top:
            50%;

        opacity:
            0;
    }


    12% {

        opacity:
            1;
    }


    88% {

        opacity:
            .9;
    }


    100% {

        left:
            83.3333%;

        top:
            54.1667%;

        opacity:
            0;
    }

}



/* =========================================================
   13 — CORE GOES FULLY ONLINE
========================================================= */

.ps-scene-cloud.ps-s07-data-live
.ps-cloud-core {

    box-shadow:
        0 25px 65px
        rgba(60,75,145,.10),

        0 0 70px
        rgba(103,137,244,.10),

        inset 0 0 40px
        rgba(102,115,225,.04);

    transition:
        box-shadow .8s ease;
}



/* =========================================================
   14 — FINAL CONNECTED STATE
========================================================= */

.ps-scene-cloud.ps-s07-complete
.ps-cloud-core {

    animation:
        psCloudCoreOnline
        4.5s
        ease-in-out
        infinite !important;
}


@keyframes psCloudCoreOnline {

    0%,
    100% {

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

        filter:
            brightness(1);
    }


    50% {

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

        filter:
            brightness(1.07)
            drop-shadow(
                0 0 20px
                rgba(91,143,245,.13)
            );
    }

}



/* =========================================================
   15 — NODES BREATHE AFTER COMPLETION
========================================================= */

.ps-scene-cloud.ps-s07-complete
.cloud-node-1 {

    animation:
        psCloudNodeFloatOne
        5.4s
        ease-in-out
        infinite;
}


.ps-scene-cloud.ps-s07-complete
.cloud-node-2 {

    animation:
        psCloudNodeFloatTwo
        5.8s
        ease-in-out
        infinite;
}


.ps-scene-cloud.ps-s07-complete
.cloud-node-3 {

    animation:
        psCloudNodeFloatThree
        6.1s
        ease-in-out
        infinite;
}


.ps-scene-cloud.ps-s07-complete
.cloud-node-4 {

    animation:
        psCloudNodeFloatFour
        5.6s
        ease-in-out
        infinite;
}


.ps-scene-cloud.ps-s07-complete
.cloud-node-5 {

    animation:
        psCloudNodeFloatFive
        6.3s
        ease-in-out
        infinite;
}


@keyframes psCloudNodeFloatOne {

    0%,
    100% {

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


    50% {

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

}


@keyframes psCloudNodeFloatTwo {

    0%,
    100% {

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


    50% {

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

}


@keyframes psCloudNodeFloatThree {

    0%,
    100% {

        transform:
            translate(-50%, -50%)
            translateX(0);
    }


    50% {

        transform:
            translate(-50%, -50%)
            translateX(5px);
    }

}


@keyframes psCloudNodeFloatFour {

    0%,
    100% {

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


    50% {

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

}


@keyframes psCloudNodeFloatFive {

    0%,
    100% {

        transform:
            translate(-50%, -50%)
            translateX(0);
    }


    50% {

        transform:
            translate(-50%, -50%)
            translateX(-5px);
    }

}



/* =========================================================
   16 — FINAL AMBIENT RING
========================================================= */

.ps-scene-cloud.ps-s07-complete
.ps-cloud-stage::before {

    animation:
        psCloudAmbientPulse
        4.8s
        ease-in-out
        infinite;
}


@keyframes psCloudAmbientPulse {

    0%,
    100% {

        opacity:
            .28;

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


    50% {

        opacity:
            .55;

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

}



/* =========================================================
   17 — MOBILE VFX REDUCTION
========================================================= */

@media (max-width: 600px) {

    /*
       Keep cinematic effect,
       but reduce blur/glow workload.
    */

    .ps-scene-cloud.ps-s07-enter
    .ps-cloud-core {

        filter:
            blur(7px)
            brightness(1.5) !important;
    }


    .ps-cloud-stage::before {

        width:
            65px;

        height:
            65px;
    }


    .ps-cloud-stage::after {

        width:
            125px;

        height:
            125px;
    }


    .ps-cloud-pulse {

        width:
            5px;

        height:
            5px;

        margin:
            -2.5px 0 0 -2.5px;
    }

}



/* =========================================================
   18 — REDUCED MOTION
========================================================= */

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

    .ps-scene-cloud.ps-s07-core
    .ps-cloud-stage::before,

    .ps-scene-cloud.ps-s07-core-live
    .ps-cloud-stage::after,

    .ps-scene-cloud.ps-s07-core-live
    .ps-cloud-core::before,

    .ps-scene-cloud.ps-s07-network
    .ps-cloud-lines path,

    .ps-scene-cloud.ps-s07-data-live
    .ps-cloud-pulse,

    .ps-scene-cloud.ps-s07-complete
    .ps-cloud-core,

    .ps-scene-cloud.ps-s07-complete
    .ps-cloud-node {

        animation:
            none !important;
    }


    .ps-scene-cloud.ps-s07-core-live
    .ps-cloud-core,

    .ps-scene-cloud.ps-s07-nodes-a
    .cloud-node-1,

    .ps-scene-cloud.ps-s07-nodes-a
    .cloud-node-2,

    .ps-scene-cloud.ps-s07-nodes-b
    .cloud-node-3,

    .ps-scene-cloud.ps-s07-nodes-b
    .cloud-node-5,

    .ps-scene-cloud.ps-s07-nodes-c
    .cloud-node-4 {

        opacity:
            1 !important;

        filter:
            none !important;
    }

}