/* =========================================================
   PRIMESCAPE
   SCENE 03
   SOFTWARE → WEB DEVELOPMENT
========================================================= */


/* =========================================================
   SOFTWARE BREAK-OUT
========================================================= */

.ps-scene-software.ps-s03-exit
.ps-software-main-window {

    opacity: .15 !important;

    transform:
        translate3d(-130px,-25px,0)
        rotateY(14deg)
        rotateZ(-5deg)
        scale(.78) !important;

    filter:
        blur(5px);

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


.ps-scene-software.ps-s03-exit
.ps-software-back-window {

    opacity: 0 !important;

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

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


.ps-scene-software.ps-s03-exit
.chip-a {

    opacity: 0 !important;

    transform:
        translate3d(-180px,110px,0)
        rotate(-16deg)
        scale(.55) !important;

    transition:
        .65s ease !important;
}


.ps-scene-software.ps-s03-exit
.chip-b {

    opacity: 0 !important;

    transform:
        translate3d(190px,-120px,0)
        rotate(18deg)
        scale(.55) !important;

    transition:
        .65s ease !important;
}


.ps-scene-software.ps-s03-exit
.chip-c {

    opacity: 0 !important;

    transform:
        translate3d(220px,120px,0)
        rotate(20deg)
        scale(.55) !important;

    transition:
        .65s ease !important;
}


/* =========================================================
   SOFTWARE COPY LEAVES CALMLY
========================================================= */

.ps-scene-software.ps-s03-exit
.ps-scene-content {

    opacity: .25;

    transform:
        translateY(-35px);

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


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

.ps-scene-web {

    position: relative;

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   WEB SCENE LIGHT
========================================================= */

.ps-scene-web::before {

    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    right: -220px;
    top: 48%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(130,111,235,.16),
            rgba(92,156,255,.08) 42%,
            transparent 72%
        );

    opacity: 0;

    z-index: -1;

    pointer-events: none;

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


.ps-scene-web.ps-s03-enter::before {

    opacity: 1;

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


/* =========================================================
   WEB CONTENT START
========================================================= */

.ps-scene-web
.ps-scene-number,

.ps-scene-web
.ps-scene-label,

.ps-scene-web
.ps-scene-content h3,

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

.ps-scene-web
.ps-scene-tags {

    opacity: 0 !important;
}


.ps-scene-web
.ps-scene-number {

    transform:
        translateY(-30px);
}


.ps-scene-web
.ps-scene-label {

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


.ps-scene-web
.ps-scene-content h3 {

    transform:
        translateY(70px);
}


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

    transform:
        translateY(42px);
}


.ps-scene-web
.ps-scene-tags {

    transform:
        translateY(32px);
}


/* =========================================================
   WEB CONTENT ENTER
========================================================= */

.ps-scene-web.ps-s03-enter
.ps-scene-number {

    opacity: 1 !important;

    transform:
        translateY(0);

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


.ps-scene-web.ps-s03-enter
.ps-scene-label {

    opacity: 1 !important;

    transform:
        translateX(0)
        skewX(0);

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


.ps-scene-web.ps-s03-enter
.ps-scene-content h3 {

    opacity: 1 !important;

    transform:
        translateY(0);

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


.ps-scene-web.ps-s03-enter
.ps-scene-content > p {

    opacity: 1 !important;

    transform:
        translateY(0);

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


.ps-scene-web.ps-s03-enter
.ps-scene-tags {

    opacity: 1 !important;

    transform:
        translateY(0);

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


/* =========================================================
   WHOLE BROWSER WORLD
========================================================= */

.ps-scene-web
.ps-browser-stack {

    opacity: 0 !important;

    transform:
        translate3d(170px,110px,-420px)
        rotateX(9deg)
        rotateY(-18deg)
        scale(.56) !important;

    filter:
        blur(14px);

    transform-origin:
        center center;
}


.ps-scene-web.ps-s03-enter
.ps-browser-stack {

    opacity: 1 !important;

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

    filter:
        blur(0);

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


/* =========================================================
   BACK BROWSER LAYER
========================================================= */

.ps-scene-web
.browser-back {

    opacity: 0 !important;

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


.ps-scene-web.ps-s03-enter
.browser-back {

    opacity: 1 !important;

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

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


/* =========================================================
   MIDDLE BROWSER LAYER
========================================================= */

.ps-scene-web
.browser-middle {

    opacity: 0 !important;

    transform:
        translate3d(290px,-70px,0)
        rotateZ(18deg)
        scale(.62) !important;
}


.ps-scene-web.ps-s03-enter
.browser-middle {

    opacity: 1 !important;

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

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


/* =========================================================
   FRONT BROWSER
========================================================= */

.ps-scene-web
.browser-front {

    opacity: 0 !important;

    transform:
        translate3d(0,160px,0)
        rotateX(12deg)
        scale(.68) !important;
}


.ps-scene-web.ps-s03-enter
.browser-front {

    opacity: 1 !important;

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

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


/* =========================================================
   WEB CONTENT INSIDE BROWSER
========================================================= */

.ps-scene-web
.ps-web-hero-preview > span,

.ps-scene-web
.ps-web-hero-preview h4,

.ps-scene-web
.ps-web-hero-preview b {

    opacity: 0;
}


.ps-scene-web
.ps-web-hero-preview > span {

    transform:
        translateY(15px);
}


.ps-scene-web
.ps-web-hero-preview h4 {

    transform:
        translateY(36px);
}


.ps-scene-web
.ps-web-hero-preview b {

    transform:
        translateY(28px);
}


.ps-scene-web.ps-s03-enter
.ps-web-hero-preview > span {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        .5s ease 1.08s;
}


.ps-scene-web.ps-s03-enter
.ps-web-hero-preview h4 {

    opacity: 1;

    transform:
        translateY(0);

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


.ps-scene-web.ps-s03-enter
.ps-web-hero-preview b {

    opacity: 1;

    transform:
        translateY(0);

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


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

.ps-scene-web
.browser-front::after {

    content: "";

    position: absolute;

    inset: -12%;

    z-index: 30;

    pointer-events: none;

    opacity: 0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255,255,255,.10) 35%,
            rgba(255,255,255,.88) 49%,
            rgba(185,198,255,.28) 56%,
            transparent 72%
        );

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


.ps-scene-web.ps-s03-complete
.browser-front::after {

    animation:
        psS03Sweep
        1.05s
        ease
        forwards;
}


@keyframes psS03Sweep {

    0% {

        opacity: 0;

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

    18% {

        opacity: .9;
    }

    100% {

        opacity: 0;

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

}


/* =========================================================
   FINISHED WEB SCENE LIFE
========================================================= */

.ps-scene-web.ps-s03-complete
.browser-back {

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


.ps-scene-web.ps-s03-complete
.browser-middle {

    animation:
        psS03FloatMiddle
        6.8s
        ease-in-out
        infinite;
}


.ps-scene-web.ps-s03-complete
.browser-front {

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


@keyframes psS03FloatBack {

    0%,
    100% {

        margin-top: 0;
    }

    50% {

        margin-top: -8px;
    }

}


@keyframes psS03FloatMiddle {

    0%,
    100% {

        margin-top: 0;
    }

    50% {

        margin-top: 9px;
    }

}


@keyframes psS03FloatFront {

    0%,
    100% {

        margin-top: 0;
    }

    50% {

        margin-top: -5px;
    }

}


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

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

    .ps-scene-web.ps-s03-complete
    .ps-browser-stack.ps-s03-touch {

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


    @keyframes psS03Touch {

        0% {

            transform:
                scale(1);
        }

        45% {

            transform:
                scale(.975);
        }

        100% {

            transform:
                scale(1);
        }

    }

}


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

@media (max-width: 760px) {

    .ps-scene-web
    .ps-browser-stack {

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

        filter:
            blur(8px);
    }


    .ps-scene-web.ps-s03-enter
    .ps-browser-stack {

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

        filter:
            blur(0);
    }


    .ps-scene-software.ps-s03-exit
    .ps-software-main-window {

        transform:
            translate3d(-90px,-20px,0)
            scale(.70) !important;
    }

}


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

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

    .ps-scene-web *,
    .ps-scene-web::before,
    .ps-scene-software.ps-s03-exit * {

        animation:
            none !important;

        transition-duration:
            .01ms !important;

        transition-delay:
            0ms !important;
    }

}