/* =========================================================
   PRIMESCAPE INFOSOFT
   SCENE 04
   WEB DEVELOPMENT → MOBILE APPS
========================================================= */


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

.ps-scene-web.ps-s04-exit {
    overflow: hidden;
}


/* BACK BROWSER BREAKS LEFT */

.ps-scene-web.ps-s04-exit
.browser-back {

    opacity: 0 !important;

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

    filter:
        blur(5px);

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


/* MIDDLE BROWSER BREAKS RIGHT */

.ps-scene-web.ps-s04-exit
.browser-middle {

    opacity: 0 !important;

    transform:
        translate3d(280px,-70px,0)
        rotateZ(17deg)
        scale(.58) !important;

    filter:
        blur(5px);

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


/* =========================================================
   FRONT BROWSER COLLAPSES TOWARD PHONE PROPORTIONS
========================================================= */

.ps-scene-web.ps-s04-exit
.browser-front {

    opacity: .12 !important;

    transform:
        translate3d(80px,110px,0)
        scaleX(.38)
        scaleY(.72) !important;

    filter:
        blur(7px);

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


/* WHOLE WEB STACK */

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

    transform:
        translate3d(0,-20px,0)
        scale(.92);

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


/* =========================================================
   WEB COPY LEAVES
========================================================= */

.ps-scene-web.ps-s04-exit
.ps-scene-content {

    opacity: .20;

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

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


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

.ps-scene-mobile {

    position: relative;

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   MOBILE AMBIENT LIGHT
========================================================= */

.ps-scene-mobile::before {

    content: "";

    position: absolute;

    width: 680px;
    height: 680px;

    right: -190px;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(173, 137, 235, .17) 0%,
            rgba(128, 169, 238, .09) 38%,
            rgba(239, 216, 245, .06) 58%,
            transparent 73%
        );

    opacity: 0;

    pointer-events: none;

    z-index: -1;

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


.ps-scene-mobile.ps-s04-enter::before {

    opacity: 1;

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


/* =========================================================
   SCENE COPY INITIAL STATE
========================================================= */

.ps-scene-mobile
.ps-scene-number,

.ps-scene-mobile
.ps-scene-label,

.ps-scene-mobile
.ps-scene-content h3,

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

.ps-scene-mobile
.ps-scene-tags {

    opacity: 0 !important;
}


.ps-scene-mobile
.ps-scene-number {

    transform:
        translateY(-30px);
}


.ps-scene-mobile
.ps-scene-label {

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


.ps-scene-mobile
.ps-scene-content h3 {

    transform:
        translateY(70px);
}


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

    transform:
        translateY(42px);
}


.ps-scene-mobile
.ps-scene-tags {

    transform:
        translateY(32px);
}


/* =========================================================
   SCENE COPY ENTERS
========================================================= */

.ps-scene-mobile.ps-s04-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-mobile.ps-s04-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-mobile.ps-s04-enter
.ps-scene-content h3 {

    opacity: 1 !important;

    transform:
        translateY(0);

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


.ps-scene-mobile.ps-s04-enter
.ps-scene-content > p {

    opacity: 1 !important;

    transform:
        translateY(0);

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


.ps-scene-mobile.ps-s04-enter
.ps-scene-tags {

    opacity: 1 !important;

    transform:
        translateY(0);

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


/* =========================================================
   PHONE STAGE
========================================================= */

.ps-scene-mobile
.ps-phone-stage {

    opacity: 1 !important;

    transform-origin:
        center center;

    perspective:
        1200px;
}


/* =========================================================
   ALL PHONES INITIAL
========================================================= */

.ps-scene-mobile
.ps-showcase-phone {

    will-change:
        transform,
        opacity,
        filter;
}


/* =========================================================
   CENTER PHONE
   ARRIVES FIRST
========================================================= */

.ps-scene-mobile
.phone-main {

    opacity: 0 !important;

    transform:
        translate3d(0,210px,0)
        rotateX(16deg)
        scale(.48) !important;

    filter:
        blur(13px);
}


.ps-scene-mobile.ps-s04-enter
.phone-main {

    opacity: 1 !important;

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

    filter:
        blur(0);

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


/* =========================================================
   LEFT PHONE
========================================================= */

.ps-scene-mobile
.phone-left {

    opacity: 0 !important;

    transform:
        translate3d(-290px,130px,0)
        rotateZ(-25deg)
        rotateY(18deg)
        scale(.52) !important;

    filter:
        blur(8px);
}


.ps-scene-mobile.ps-s04-enter
.phone-left {

    opacity: 1 !important;

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

    filter:
        blur(0);

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


/* =========================================================
   RIGHT PHONE
========================================================= */

.ps-scene-mobile
.phone-right {

    opacity: 0 !important;

    transform:
        translate3d(300px,125px,0)
        rotateZ(25deg)
        rotateY(-18deg)
        scale(.52) !important;

    filter:
        blur(8px);
}


.ps-scene-mobile.ps-s04-enter
.phone-right {

    opacity: 1 !important;

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

    filter:
        blur(0);

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


/* =========================================================
   MAIN PHONE UI
========================================================= */

.ps-scene-mobile
.ps-mobile-mini,

.ps-scene-mobile
.ps-phone-main-ui h4 {

    opacity: 0;
}


.ps-scene-mobile
.ps-mobile-mini {

    transform:
        translateY(18px);
}


.ps-scene-mobile
.ps-phone-main-ui h4 {

    transform:
        translateY(35px);
}


/* MINI LABEL */

.ps-scene-mobile.ps-s04-enter
.ps-mobile-mini {

    opacity: 1;

    transform:
        translateY(0);

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


/* MAIN MESSAGE */

.ps-scene-mobile.ps-s04-enter
.ps-phone-main-ui h4 {

    opacity: 1;

    transform:
        translateY(0);

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


/* =========================================================
   APP GRID TILES
========================================================= */

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

    opacity: 0;

    transform:
        translateY(32px)
        scale(.55)
        rotate(-7deg);
}


.ps-scene-mobile.ps-s04-enter
.ps-mobile-app-grid i {

    opacity: 1;

    transform:
        translateY(0)
        scale(1)
        rotate(0deg);

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


.ps-scene-mobile.ps-s04-enter
.ps-mobile-app-grid i:nth-child(1) {

    transition-delay:
        1.32s;
}


.ps-scene-mobile.ps-s04-enter
.ps-mobile-app-grid i:nth-child(2) {

    transition-delay:
        1.43s;
}


.ps-scene-mobile.ps-s04-enter
.ps-mobile-app-grid i:nth-child(3) {

    transition-delay:
        1.54s;
}


.ps-scene-mobile.ps-s04-enter
.ps-mobile-app-grid i:nth-child(4) {

    transition-delay:
        1.65s;
}


/* =========================================================
   SIDE PHONE CONTENT
========================================================= */

.ps-scene-mobile
.phone-left .ps-phone-ui > *,

.ps-scene-mobile
.phone-right .ps-phone-ui > * {

    opacity: 0;
}


.ps-scene-mobile.ps-s04-enter
.phone-left .ps-phone-ui > *,

.ps-scene-mobile.ps-s04-enter
.phone-right .ps-phone-ui > * {

    opacity: 1;

    transition:
        opacity .5s ease 1.28s;
}


/* =========================================================
   CENTER PHONE ACTIVATION GLOW
========================================================= */

.ps-scene-mobile
.phone-main::after {

    content: "";

    position: absolute;

    inset: -8%;

    pointer-events: none;

    z-index: 20;

    opacity: 0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255,255,255,.08) 34%,
            rgba(255,255,255,.92) 49%,
            rgba(190,202,255,.26) 56%,
            transparent 72%
        );

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


.ps-scene-mobile.ps-s04-complete
.phone-main::after {

    animation:
        psS04PhoneSweep
        1.05s
        ease
        forwards;
}


@keyframes psS04PhoneSweep {

    0% {

        opacity: 0;

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


    18% {

        opacity: .9;
    }


    100% {

        opacity: 0;

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

}


/* =========================================================
   FINISHED PHONE LIFE
========================================================= */

.ps-scene-mobile.ps-s04-complete
.phone-main {

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


.ps-scene-mobile.ps-s04-complete
.phone-left {

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


.ps-scene-mobile.ps-s04-complete
.phone-right {

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


@keyframes psS04MainFloat {

    0%,
    100% {

        margin-top: 0;
    }

    50% {

        margin-top: -8px;
    }

}


@keyframes psS04LeftFloat {

    0%,
    100% {

        margin-top: 0;
    }

    50% {

        margin-top: 7px;
    }

}


@keyframes psS04RightFloat {

    0%,
    100% {

        margin-top: 0;
    }

    50% {

        margin-top: -6px;
    }

}


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

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

    .ps-scene-mobile.ps-s04-complete
    .ps-phone-stage.ps-s04-touch {

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


    @keyframes psS04Touch {

        0% {

            transform:
                scale(1);
        }

        45% {

            transform:
                scale(.97);
        }

        100% {

            transform:
                scale(1);
        }

    }

}


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

@media (max-width: 900px) {

    .ps-scene-web.ps-s04-exit
    .browser-back {

        transform:
            translate3d(-150px,-60px,0)
            rotateZ(-12deg)
            scale(.65) !important;
    }


    .ps-scene-web.ps-s04-exit
    .browser-middle {

        transform:
            translate3d(160px,-50px,0)
            rotateZ(12deg)
            scale(.65) !important;
    }

}


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

@media (max-width: 760px) {

    .ps-scene-mobile
    .phone-main {

        transform:
            translate3d(0,130px,0)
            scale(.68) !important;

        filter:
            blur(7px);
    }


    .ps-scene-mobile.ps-s04-enter
    .phone-main {

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

        filter:
            blur(0);
    }


    .ps-scene-mobile
    .phone-left {

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


    .ps-scene-mobile
    .phone-right {

        transform:
            translate3d(130px,80px,0)
            rotateZ(16deg)
            scale(.65) !important;
    }


    .ps-scene-mobile.ps-s04-enter
    .phone-left,

    .ps-scene-mobile.ps-s04-enter
    .phone-right {

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


    .ps-scene-web.ps-s04-exit
    .browser-front {

        transform:
            translate3d(40px,80px,0)
            scaleX(.42)
            scaleY(.68) !important;
    }

}


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

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

    .ps-scene-mobile *,
    .ps-scene-mobile::before,
    .ps-scene-web.ps-s04-exit * {

        animation:
            none !important;

        transition-duration:
            .01ms !important;

        transition-delay:
            0ms !important;
    }

}