/* =========================================================
   PRIMESCAPE
   SCENE 02 V2
   HERO BREAKOUT → CUSTOM SOFTWARE BUILD
========================================================= */


/* =========================================================
   HERO BREAKOUT
========================================================= */

body.ps-s02-breakout .ps-tech-stage {
    transition:
        transform .9s cubic-bezier(.7,0,.2,1),
        opacity .75s ease !important;
}


/* CODE PANEL — BREAK LEFT */

body.ps-s02-breakout .ps-code-panel {
    opacity: 0 !important;

    transform:
        translate3d(-220px,-80px,0)
        rotateZ(-18deg)
        scale(.70) !important;

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


/* WEB PANEL — BREAK RIGHT */

body.ps-s02-breakout .ps-web-panel {
    opacity: 0 !important;

    transform:
        translate3d(260px,-100px,0)
        rotateZ(17deg)
        scale(.68) !important;

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


/* MOBILE — DROPS OUT */

body.ps-s02-breakout .ps-mobile-device {
    opacity: 0 !important;

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

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


/* AI */

body.ps-s02-breakout .ps-ai-object {
    opacity: 0 !important;

    transform:
        translate3d(-170px,-160px,0)
        scale(.45) !important;

    transition:
        .70s ease !important;
}


/* CLOUD */

body.ps-s02-breakout .ps-cloud-object {
    opacity: 0 !important;

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

    transition:
        .72s ease !important;
}


/* SECURITY */

body.ps-s02-breakout .ps-security-object {
    opacity: 0 !important;

    transform:
        translate3d(180px,150px,0)
        rotate(16deg)
        scale(.42) !important;

    transition:
        .75s ease !important;
}


/* HERO MAIN LAPTOP */

body.ps-s02-breakout .ps-laptop {
    opacity: .12 !important;

    transform:
        translate3d(0,70px,0)
        scale(.72) !important;

    filter:
        blur(5px);

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


/* CONNECTIONS */

body.ps-s02-breakout .ps-stage-connections,
body.ps-s02-breakout .ps-stage-particle {
    opacity: 0 !important;

    transition:
        opacity .35s ease !important;
}



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

.ps-scene-software {
    position: relative;

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   CINEMATIC WIPE
========================================================= */

.ps-scene-software::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            110deg,
            transparent 0%,
            rgba(255,255,255,.96) 42%,
            rgba(226,220,255,.85) 50%,
            rgba(255,255,255,.96) 58%,
            transparent 100%
        );

    transform:
        translateX(-125%)
        skewX(-12deg);

    opacity: 0;
}


.ps-scene-software.ps-s02-enter::after {
    animation:
        psS02SceneWipe
        1.15s
        cubic-bezier(.7,0,.2,1)
        forwards;
}


@keyframes psS02SceneWipe {

    0% {
        opacity: 0;

        transform:
            translateX(-125%)
            skewX(-12deg);
    }

    12% {
        opacity: 1;
    }

    80% {
        opacity: .8;
    }

    100% {
        opacity: 0;

        transform:
            translateX(125%)
            skewX(-12deg);
    }

}



/* =========================================================
   COPY — START
========================================================= */

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


/* LABEL */

.ps-scene-software .ps-scene-label {
    transform:
        translateX(-70px)
        skewX(-9deg);
}


/* NUMBER */

.ps-scene-software .ps-scene-number {
    transform:
        translateY(-30px);
}


/* TITLE */

.ps-scene-software .ps-scene-content h3 {
    transform:
        translateY(70px);
}


/* PARAGRAPH */

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


/* TAGS */

.ps-scene-software .ps-scene-tags {
    transform:
        translateY(35px);
}



/* =========================================================
   COPY — ENTER
========================================================= */

.ps-scene-software.ps-s02-enter
.ps-scene-number {
    opacity: 1 !important;

    transform:
        translateY(0);

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


.ps-scene-software.ps-s02-enter
.ps-scene-label {
    opacity: 1 !important;

    transform:
        translateX(0)
        skewX(0);

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


.ps-scene-software.ps-s02-enter
.ps-scene-content h3 {
    opacity: 1 !important;

    transform:
        translateY(0);

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


.ps-scene-software.ps-s02-enter
.ps-scene-content > p {
    opacity: 1 !important;

    transform:
        translateY(0);

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


.ps-scene-software.ps-s02-enter
.ps-scene-tags {
    opacity: 1 !important;

    transform:
        translateY(0);

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



/* =========================================================
   WHOLE VISUAL — START DEEP IN SPACE
========================================================= */

.ps-scene-software .ps-scene-visual {
    opacity: 1 !important;
}


.ps-scene-software .ps-software-composition {
    opacity: 0 !important;

    transform:
        translate3d(120px,120px,-450px)
        rotateX(13deg)
        rotateY(-16deg)
        rotateZ(5deg)
        scale(.54) !important;

    filter:
        blur(15px);

    transform-origin:
        center center;
}



/* =========================================================
   WHOLE VISUAL — SLAMS FORWARD
========================================================= */

.ps-scene-software.ps-s02-enter
.ps-software-composition {
    opacity: 1 !important;

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

    filter:
        blur(0);

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



/* =========================================================
   MAIN SOFTWARE WINDOW
========================================================= */

.ps-scene-software .ps-software-main-window {
    opacity: 0 !important;

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


.ps-scene-software.ps-s02-enter
.ps-software-main-window {
    opacity: 1 !important;

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

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



/* =========================================================
   CODE WINDOW SHOOTS IN
========================================================= */

.ps-scene-software .ps-software-back-window {
    opacity: 0 !important;

    transform:
        translate3d(-330px,60px,0)
        rotateZ(-18deg)
        scale(.55) !important;
}


.ps-scene-software.ps-s02-enter
.ps-software-back-window {
    opacity: 1 !important;

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

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



/* =========================================================
   CODE TYPES IN
========================================================= */

.ps-scene-software .ps-code-stack span {
    transform:
        scaleX(0) !important;

    transform-origin:
        left center;

    opacity: 0;
}


.ps-scene-software.ps-s02-enter
.ps-code-stack span {
    transform:
        scaleX(1) !important;

    opacity: 1;

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


.ps-scene-software.ps-s02-enter
.ps-code-stack span:nth-child(1) {
    transition-delay: 1.00s;
}

.ps-scene-software.ps-s02-enter
.ps-code-stack span:nth-child(2) {
    transition-delay: 1.10s;
}

.ps-scene-software.ps-s02-enter
.ps-code-stack span:nth-child(3) {
    transition-delay: 1.20s;
}

.ps-scene-software.ps-s02-enter
.ps-code-stack span:nth-child(4) {
    transition-delay: 1.30s;
}

.ps-scene-software.ps-s02-enter
.ps-code-stack span:nth-child(5) {
    transition-delay: 1.40s;
}



/* =========================================================
   INTERNAL SOFTWARE MODULES
========================================================= */

.ps-scene-software .ps-soft-panels > div {
    opacity: 0;

    transform:
        translateY(45px)
        scale(.72);
}


.ps-scene-software.ps-s02-enter
.ps-soft-panels > div {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

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


.ps-scene-software.ps-s02-enter
.ps-soft-panels > div:nth-child(1) {
    transition-delay: 1.15s;
}

.ps-scene-software.ps-s02-enter
.ps-soft-panels > div:nth-child(2) {
    transition-delay: 1.28s;
}

.ps-scene-software.ps-s02-enter
.ps-soft-panels > div:nth-child(3) {
    transition-delay: 1.41s;
}



/* =========================================================
   WORKFLOW BARS
========================================================= */

.ps-scene-software .ps-soft-flow span {
    opacity: 0;

    transform:
        scaleY(.08);

    transform-origin:
        bottom center;
}


.ps-scene-software.ps-s02-enter
.ps-soft-flow span {
    opacity: 1;

    transform:
        scaleY(1);

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


.ps-scene-software.ps-s02-enter
.ps-soft-flow span:nth-child(1) {
    transition-delay: 1.42s;
}

.ps-scene-software.ps-s02-enter
.ps-soft-flow span:nth-child(2) {
    transition-delay: 1.52s;
}

.ps-scene-software.ps-s02-enter
.ps-soft-flow span:nth-child(3) {
    transition-delay: 1.62s;
}

.ps-scene-software.ps-s02-enter
.ps-soft-flow span:nth-child(4) {
    transition-delay: 1.72s;
}



/* =========================================================
   FLOATING CHIPS
========================================================= */

.ps-scene-software .ps-soft-floating-chip {
    opacity: 0 !important;
}


.ps-scene-software .chip-a {
    transform:
        translate3d(-230px,140px,0)
        rotate(-24deg)
        scale(.45) !important;
}


.ps-scene-software .chip-b {
    transform:
        translate3d(220px,-170px,0)
        rotate(25deg)
        scale(.45) !important;
}


.ps-scene-software .chip-c {
    transform:
        translate3d(270px,180px,0)
        rotate(28deg)
        scale(.45) !important;
}



/* API */

.ps-scene-software.ps-s02-enter
.chip-a {
    opacity: 1 !important;

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

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


/* DATA */

.ps-scene-software.ps-s02-enter
.chip-b {
    opacity: 1 !important;

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

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


/* CLOUD */

.ps-scene-software.ps-s02-enter
.chip-c {
    opacity: 1 !important;

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

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



/* =========================================================
   FINAL PRODUCT LIGHT SWEEP
========================================================= */

.ps-software-main-window::after {
    content: "";

    position: absolute;

    inset: -10%;

    z-index: 30;

    pointer-events: none;

    opacity: 0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255,255,255,.12) 35%,
            rgba(255,255,255,.85) 49%,
            rgba(178,191,255,.28) 55%,
            transparent 72%
        );

    transform:
        translateX(-150%)
        skewX(-12deg);
}


.ps-scene-software.ps-s02-complete
.ps-software-main-window::after {
    animation:
        psS02ProductSweep
        1.05s
        ease
        forwards;
}


@keyframes psS02ProductSweep {

    0% {
        opacity: 0;

        transform:
            translateX(-150%)
            skewX(-12deg);
    }

    20% {
        opacity: .9;
    }

    100% {
        opacity: 0;

        transform:
            translateX(150%)
            skewX(-12deg);
    }

}



/* =========================================================
   FINISHED PRODUCT SUBTLE LIFE
========================================================= */

.ps-scene-software.ps-s02-complete
.ps-software-main-window {
    animation:
        psS02Alive
        5.2s
        ease-in-out
        infinite;
}


@keyframes psS02Alive {

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

    50% {
        transform:
            translateY(-7px);
    }

}



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

@media (max-width: 760px) {

    .ps-scene-software
    .ps-software-composition {
        transform:
            translate3d(80px,80px,0)
            scale(.72) !important;

        filter:
            blur(8px);
    }


    .ps-scene-software.ps-s02-enter
    .ps-software-composition {
        transform:
            translate3d(0,0,0)
            scale(1) !important;

        filter:
            blur(0);
    }


    body.ps-s02-breakout
    .ps-code-panel {

        transform:
            translate3d(-120px,-50px,0)
            scale(.65) !important;
    }


    body.ps-s02-breakout
    .ps-web-panel {

        transform:
            translate3d(130px,-50px,0)
            scale(.65) !important;
    }

}



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

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

    .ps-scene-software *,
    .ps-scene-software::after {

        animation:
            none !important;

        transition-duration:
            .01ms !important;

        transition-delay:
            0ms !important;
    }

}