/* =========================================================
   PRIMESCAPE INFOSOFT
   SCENE 05
   MOBILE APPS → AI & MACHINE LEARNING
========================================================= */


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

.ps-scene-mobile.ps-s05-exit {
    overflow: hidden;
}


/* LEFT PHONE LEAVES */

.ps-scene-mobile.ps-s05-exit
.phone-left {

    opacity: 0 !important;

    transform:
        translate3d(-260px,80px,0)
        rotateZ(-22deg)
        scale(.58) !important;

    filter:
        blur(7px);

    transition:
        transform .78s cubic-bezier(.7,0,.2,1),
        opacity .52s ease,
        filter .52s ease !important;
}


/* RIGHT PHONE LEAVES */

.ps-scene-mobile.ps-s05-exit
.phone-right {

    opacity: 0 !important;

    transform:
        translate3d(270px,80px,0)
        rotateZ(22deg)
        scale(.58) !important;

    filter:
        blur(7px);

    transition:
        transform .78s cubic-bezier(.7,0,.2,1),
        opacity .52s ease,
        filter .52s ease !important;
}


/* =========================================================
   MAIN PHONE COLLAPSES INTO AI CORE
========================================================= */

.ps-scene-mobile.ps-s05-exit
.phone-main {

    opacity: .10 !important;

    transform:
        translate3d(70px,40px,0)
        rotateZ(5deg)
        scale(.38) !important;

    filter:
        blur(10px);

    transition:
        transform .92s cubic-bezier(.7,0,.2,1),
        opacity .68s ease,
        filter .68s ease !important;
}


/* MOBILE APP GRID BREAKS OUT */

.ps-scene-mobile.ps-s05-exit
.ps-mobile-app-grid i:nth-child(1) {

    opacity: 0;

    transform:
        translate3d(-120px,80px,0)
        rotate(-15deg)
        scale(.5);
}


.ps-scene-mobile.ps-s05-exit
.ps-mobile-app-grid i:nth-child(2) {

    opacity: 0;

    transform:
        translate3d(0,-130px,0)
        scale(1.5);
}


.ps-scene-mobile.ps-s05-exit
.ps-mobile-app-grid i:nth-child(3) {

    opacity: 0;

    transform:
        translate3d(110px,-70px,0)
        rotate(15deg)
        scale(.5);
}


.ps-scene-mobile.ps-s05-exit
.ps-mobile-app-grid i:nth-child(4) {

    opacity: 0;

    transform:
        translate3d(120px,90px,0)
        rotate(18deg)
        scale(.5);
}


.ps-scene-mobile.ps-s05-exit
.ps-mobile-app-grid i {

    transition:
        transform .62s cubic-bezier(.7,0,.2,1),
        opacity .4s ease !important;
}


/* MOBILE COPY DEPARTURE */

.ps-scene-mobile.ps-s05-exit
.ps-scene-content {

    opacity: .18;

    transform:
        translate3d(-30px,-35px,0);

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


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

.ps-scene-ai {

    position: relative;

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   AI AMBIENT FIELD
========================================================= */

.ps-scene-ai::before {

    content: "";

    position: absolute;

    width: 760px;
    height: 760px;

    right: -210px;
    top: 50%;

    transform:
        translateY(-50%)
        scale(.35);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(153,126,234,.19) 0%,
            rgba(111,158,236,.10) 34%,
            rgba(218,190,240,.07) 52%,
            transparent 72%
        );

    opacity: 0;

    pointer-events: none;

    z-index: -1;

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


.ps-scene-ai.ps-s05-enter::before {

    opacity: 1;

    transform:
        translateY(-50%)
        scale(1);
}


/* SECOND ENERGY FIELD */

.ps-scene-ai::after {

    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    right: 8%;
    top: 50%;

    transform:
        translateY(-50%)
        scale(.2);

    border-radius: 50%;

    border:
        1px solid rgba(126,116,218,.12);

    box-shadow:
        0 0 90px rgba(129,111,220,.10),
        inset 0 0 70px rgba(153,132,228,.05);

    opacity: 0;

    pointer-events: none;

    z-index: -1;
}


.ps-scene-ai.ps-s05-enter::after {

    animation:
        psS05EnergyField
        1.45s
        cubic-bezier(.16,1,.3,1)
        .35s
        forwards;
}


@keyframes psS05EnergyField {

    0% {

        opacity: 0;

        transform:
            translateY(-50%)
            scale(.2);
    }

    60% {

        opacity: .9;
    }

    100% {

        opacity: .45;

        transform:
            translateY(-50%)
            scale(1);
    }

}


/* =========================================================
   AI COPY INITIAL STATE
========================================================= */

.ps-scene-ai
.ps-scene-number,

.ps-scene-ai
.ps-scene-label,

.ps-scene-ai
.ps-scene-content h3,

.ps-scene-ai
.ps-scene-content > p,

.ps-scene-ai
.ps-scene-tags {

    opacity: 0 !important;
}


.ps-scene-ai
.ps-scene-number {

    transform:
        translateY(-30px);
}


.ps-scene-ai
.ps-scene-label {

    transform:
        translateX(-70px)
        skewX(-8deg);
}


.ps-scene-ai
.ps-scene-content h3 {

    transform:
        translateY(70px);
}


.ps-scene-ai
.ps-scene-content > p {

    transform:
        translateY(42px);
}


.ps-scene-ai
.ps-scene-tags {

    transform:
        translateY(32px);
}


/* =========================================================
   AI COPY ENTER
========================================================= */

.ps-scene-ai.ps-s05-enter
.ps-scene-number {

    opacity: 1 !important;

    transform:
        translateY(0);

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


.ps-scene-ai.ps-s05-enter
.ps-scene-label {

    opacity: 1 !important;

    transform:
        translateX(0)
        skewX(0);

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


.ps-scene-ai.ps-s05-enter
.ps-scene-content h3 {

    opacity: 1 !important;

    transform:
        translateY(0);

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


.ps-scene-ai.ps-s05-enter
.ps-scene-content > p {

    opacity: 1 !important;

    transform:
        translateY(0);

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


.ps-scene-ai.ps-s05-enter
.ps-scene-tags {

    opacity: 1 !important;

    transform:
        translateY(0);

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


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

.ps-scene-ai
.ps-ai-network {

    opacity: 1 !important;

    perspective:
        1200px;

    transform-origin:
        center center;
}


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

.ps-scene-ai
.ps-ai-core {

    opacity: 0 !important;

    transform:
        translate3d(0,120px,0)
        rotateX(18deg)
        scale(.18) !important;

    filter:
        blur(16px);

    will-change:
        transform,
        opacity,
        filter;
}


.ps-scene-ai.ps-s05-enter
.ps-ai-core {

    opacity: 1 !important;

    transform:
        translate3d(0,0,0)
        rotateX(0)
        scale(1) !important;

    filter:
        blur(0);

    transition:
        opacity .45s ease .28s,
        filter .75s ease .28s,
        transform 1.1s
        cubic-bezier(.12,.9,.18,1)
        .28s;
}


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

.ps-ai-core::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 100%;
    height: 100%;

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

    border-radius: inherit;

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

    opacity: 0;

    pointer-events: none;
}


.ps-scene-ai.ps-s05-enter
.ps-ai-core::after {

    animation:
        psS05CoreShockwave
        1.2s
        ease-out
        .82s
        forwards;
}


@keyframes psS05CoreShockwave {

    0% {

        opacity: .85;

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

    100% {

        opacity: 0;

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

}


/* =========================================================
   ALL AI NODES
========================================================= */

.ps-scene-ai
.ps-ai-node {

    opacity: 0 !important;

    filter:
        blur(7px);

    will-change:
        transform,
        opacity,
        filter;
}


/* DATA */

.ps-scene-ai
.ai-node-1 {

    transform:
        translate3d(190px,170px,0)
        scale(.3) !important;
}


/* NLP */

.ps-scene-ai
.ai-node-2 {

    transform:
        translate3d(-180px,170px,0)
        scale(.3) !important;
}


/* ML */

.ps-scene-ai
.ai-node-3 {

    transform:
        translate3d(-200px,-10px,0)
        scale(.3) !important;
}


/* VISION */

.ps-scene-ai
.ai-node-4 {

    transform:
        translate3d(-150px,-170px,0)
        scale(.3) !important;
}


/* AGENTS */

.ps-scene-ai
.ai-node-5 {

    transform:
        translate3d(170px,-170px,0)
        scale(.3) !important;
}


/* AUTO */

.ps-scene-ai
.ai-node-6 {

    transform:
        translate3d(210px,0,0)
        scale(.3) !important;
}


/* =========================================================
   AI NODES BURST INTO POSITION
========================================================= */

.ps-scene-ai.ps-s05-enter
.ps-ai-node {

    opacity: 1 !important;

    transform:
        translate3d(0,0,0)
        scale(1) !important;

    filter:
        blur(0);

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


.ps-scene-ai.ps-s05-enter
.ai-node-1 {

    transition-delay:
        .84s;
}


.ps-scene-ai.ps-s05-enter
.ai-node-2 {

    transition-delay:
        .94s;
}


.ps-scene-ai.ps-s05-enter
.ai-node-3 {

    transition-delay:
        1.04s;
}


.ps-scene-ai.ps-s05-enter
.ai-node-4 {

    transition-delay:
        1.14s;
}


.ps-scene-ai.ps-s05-enter
.ai-node-5 {

    transition-delay:
        1.24s;
}


.ps-scene-ai.ps-s05-enter
.ai-node-6 {

    transition-delay:
        1.34s;
}


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

.ps-scene-ai
.ps-ai-lines {

    opacity: 0;
}


.ps-scene-ai
.ps-ai-lines path {

    stroke-dasharray:
        1000;

    stroke-dashoffset:
        1000;
}


.ps-scene-ai.ps-s05-enter
.ps-ai-lines {

    opacity: 1;

    transition:
        opacity .3s ease 1.20s;
}


.ps-scene-ai.ps-s05-enter
.ps-ai-lines path {

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


.ps-scene-ai.ps-s05-enter
.ps-ai-lines path:nth-child(1) {

    animation-delay:
        1.18s;
}


.ps-scene-ai.ps-s05-enter
.ps-ai-lines path:nth-child(2) {

    animation-delay:
        1.28s;
}


.ps-scene-ai.ps-s05-enter
.ps-ai-lines path:nth-child(3) {

    animation-delay:
        1.38s;
}


.ps-scene-ai.ps-s05-enter
.ps-ai-lines path:nth-child(4) {

    animation-delay:
        1.48s;
}


.ps-scene-ai.ps-s05-enter
.ps-ai-lines path:nth-child(5) {

    animation-delay:
        1.58s;
}


.ps-scene-ai.ps-s05-enter
.ps-ai-lines path:nth-child(6) {

    animation-delay:
        1.68s;
}


@keyframes psS05DrawLine {

    to {

        stroke-dashoffset:
            0;
    }

}


/* =========================================================
   FINAL AI ACTIVATION
========================================================= */

.ps-scene-ai.ps-s05-complete
.ps-ai-core {

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


@keyframes psS05CorePulse {

    0%,
    100% {

        filter:
            brightness(1);

        box-shadow:
            0 0 0 rgba(123,110,224,0);
    }

    50% {

        filter:
            brightness(1.08);

        box-shadow:
            0 0 45px rgba(123,110,224,.16);
    }

}


/* =========================================================
   NODE FLOATING
========================================================= */

.ps-scene-ai.ps-s05-complete
.ai-node-1 {

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


.ps-scene-ai.ps-s05-complete
.ai-node-2 {

    animation:
        psS05NodeB
        6.2s
        ease-in-out
        infinite;
}


.ps-scene-ai.ps-s05-complete
.ai-node-3 {

    animation:
        psS05NodeA
        6.6s
        ease-in-out
        infinite;
}


.ps-scene-ai.ps-s05-complete
.ai-node-4 {

    animation:
        psS05NodeB
        6.9s
        ease-in-out
        infinite;
}


.ps-scene-ai.ps-s05-complete
.ai-node-5 {

    animation:
        psS05NodeA
        7.2s
        ease-in-out
        infinite;
}


.ps-scene-ai.ps-s05-complete
.ai-node-6 {

    animation:
        psS05NodeB
        6.4s
        ease-in-out
        infinite;
}


@keyframes psS05NodeA {

    0%,
    100% {

        margin-top:
            0;
    }

    50% {

        margin-top:
            -7px;
    }

}


@keyframes psS05NodeB {

    0%,
    100% {

        margin-top:
            0;
    }

    50% {

        margin-top:
            7px;
    }

}


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

@media (hover: none) and (pointer: coarse) {

    .ps-scene-ai.ps-s05-complete
    .ps-ai-network.ps-s05-touch {

        animation:
            psS05Touch
            .42s
            cubic-bezier(.22,1,.36,1);
    }


    @keyframes psS05Touch {

        0% {

            transform:
                scale(1);
        }

        45% {

            transform:
                scale(.97);
        }

        100% {

            transform:
                scale(1);
        }

    }

}


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

@media (max-width: 760px) {

    .ps-scene-mobile.ps-s05-exit
    .phone-left {

        transform:
            translate3d(-130px,60px,0)
            rotateZ(-15deg)
            scale(.62) !important;
    }


    .ps-scene-mobile.ps-s05-exit
    .phone-right {

        transform:
            translate3d(130px,60px,0)
            rotateZ(15deg)
            scale(.62) !important;
    }


    .ps-scene-mobile.ps-s05-exit
    .phone-main {

        transform:
            translate3d(30px,30px,0)
            scale(.48) !important;
    }


    .ps-scene-ai
    .ps-ai-core {

        transform:
            translate3d(0,80px,0)
            scale(.35) !important;

        filter:
            blur(8px);
    }


    .ps-scene-ai.ps-s05-enter
    .ps-ai-core {

        transform:
            translate3d(0,0,0)
            scale(1) !important;

        filter:
            blur(0);
    }

}


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

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

    .ps-scene-ai *,
    .ps-scene-ai::before,
    .ps-scene-ai::after,
    .ps-scene-mobile.ps-s05-exit * {

        animation:
            none !important;

        transition-duration:
            .01ms !important;

        transition-delay:
            0ms !important;
    }

}