/* =========================================================
   PRIMESCAPE
   SCENE 01 — INTRO TO HERO BRIDGE
========================================================= */


/* =========================================================
   INITIAL HOMEPAGE STATE

   Only affects homepage while intro is active.
========================================================= */

body.primescape-homepage.ps-intro-lock
.ps-cinematic-hero {
    overflow: hidden;
}


/* =========================================================
   HEADER WAITS BEHIND INTRO
========================================================= */

body.primescape-homepage.ps-intro-lock
.site-header {
    opacity: 0;

    transform:
        translateY(-22px);
}


/* =========================================================
   HERO COPY INITIAL POSITION
========================================================= */

body.primescape-homepage.ps-intro-lock
.ps-hero-kicker {
    opacity: 0;

    transform:
        translateY(18px);
}


body.primescape-homepage.ps-intro-lock
.ps-main-heading span {
    opacity: 0;

    transform:
        translateY(62px);
}


body.primescape-homepage.ps-intro-lock
.ps-main-heading strong {
    opacity: 0;

    transform:
        translateY(76px);
}


body.primescape-homepage.ps-intro-lock
.ps-hero-text {
    opacity: 0;

    transform:
        translateY(30px);
}


body.primescape-homepage.ps-intro-lock
.ps-hero-buttons {
    opacity: 0;

    transform:
        translateY(26px);
}


body.primescape-homepage.ps-intro-lock
.ps-hero-capabilities {
    opacity: 0;

    transform:
        translateY(22px);
}


/* =========================================================
   HERO VISUAL INITIAL STATE
========================================================= */

body.primescape-homepage.ps-intro-lock
.ps-tech-stage {
    opacity: 0;

    transform:
        translateY(45px)
        scale(.90);

    transform-origin:
        center center;
}


/* individual floating elements */

body.primescape-homepage.ps-intro-lock
.ps-laptop {
    opacity: 0;
}


body.primescape-homepage.ps-intro-lock
.ps-code-panel {
    opacity: 0;
}


body.primescape-homepage.ps-intro-lock
.ps-web-panel {
    opacity: 0;
}


body.primescape-homepage.ps-intro-lock
.ps-mobile-device {
    opacity: 0;
}


body.primescape-homepage.ps-intro-lock
.ps-ai-object,
body.primescape-homepage.ps-intro-lock
.ps-cloud-object,
body.primescape-homepage.ps-intro-lock
.ps-security-object {
    opacity: 0;
}


/* =========================================================
   HERO BACKGROUND INITIAL STATE
========================================================= */

body.primescape-homepage.ps-intro-lock
.ps-ambient-glow {
    opacity: 0;

    transform:
        scale(.65);
}


body.primescape-homepage.ps-intro-lock
.ps-hero-grid-pattern {
    opacity: 0;
}


/* =========================================================
   TRANSITION BASES
========================================================= */

.site-header,
.ps-hero-kicker,
.ps-main-heading span,
.ps-main-heading strong,
.ps-hero-text,
.ps-hero-buttons,
.ps-hero-capabilities,
.ps-tech-stage,
.ps-laptop,
.ps-code-panel,
.ps-web-panel,
.ps-mobile-device,
.ps-ai-object,
.ps-cloud-object,
.ps-security-object,
.ps-ambient-glow,
.ps-hero-grid-pattern {

    will-change:
        opacity,
        transform;
}


/* =========================================================
   SCENE 01 START
========================================================= */

body.ps-scene01-start
.site-header {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity .65s ease .30s,
        transform .75s
        cubic-bezier(.22,1,.36,1)
        .30s;
}


/* =========================================================
   BACKGROUND COMES ALIVE FIRST
========================================================= */

body.ps-scene01-start
.ps-ambient-glow {

    opacity: 1;

    transform:
        scale(1);

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


body.ps-scene01-start
.ps-hero-grid-pattern {

    opacity: .45;

    transition:
        opacity 1.3s ease .10s;
}


/* =========================================================
   KICKER
========================================================= */

body.ps-scene01-start
.ps-hero-kicker {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity .65s ease .25s,
        transform .75s
        cubic-bezier(.22,1,.36,1)
        .25s;
}


/* =========================================================
   "WE BUILD"
========================================================= */

body.ps-scene01-start
.ps-main-heading span {

    opacity: 1;

    transform:
        translateY(0);

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


/* =========================================================
   "WHAT'S NEXT."
========================================================= */

body.ps-scene01-start
.ps-main-heading strong {

    opacity: 1;

    transform:
        translateY(0);

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


/* =========================================================
   SUPPORTING COPY
========================================================= */

body.ps-scene01-start
.ps-hero-text {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity .70s ease .74s,
        transform .82s
        cubic-bezier(.22,1,.36,1)
        .74s;
}


/* =========================================================
   BUTTONS
========================================================= */

body.ps-scene01-start
.ps-hero-buttons {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity .70s ease .90s,
        transform .82s
        cubic-bezier(.22,1,.36,1)
        .90s;
}


/* =========================================================
   CAPABILITY PILLS
========================================================= */

body.ps-scene01-start
.ps-hero-capabilities {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity .70s ease 1.03s,
        transform .82s
        cubic-bezier(.22,1,.36,1)
        1.03s;
}


/* =========================================================
   FULL TECHNOLOGY STAGE
========================================================= */

body.ps-scene01-start
.ps-tech-stage {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

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


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

body.ps-scene01-start
.ps-laptop {

    opacity: 1;

    transition:
        opacity .75s ease .52s;
}


/* =========================================================
   LEFT CODE PANEL
========================================================= */

body.ps-scene01-start
.ps-code-panel {

    opacity: 1;

    animation:
        psScene01CodeIn
        .90s
        cubic-bezier(.16,1,.3,1)
        .72s
        both;
}


@keyframes psScene01CodeIn {

    from {
        opacity: 0;

        transform:
            translateX(-55px)
            translateY(20px)
            rotateY(15deg)
            rotateZ(-10deg)
            scale(.90);
    }

    to {
        opacity: 1;

        transform:
            rotateY(15deg)
            rotateZ(-5deg)
            scale(1);
    }

}


/* =========================================================
   RIGHT WEB PANEL
========================================================= */

body.ps-scene01-start
.ps-web-panel {

    opacity: 1;

    animation:
        psScene01WebIn
        .95s
        cubic-bezier(.16,1,.3,1)
        .80s
        both;
}


@keyframes psScene01WebIn {

    from {
        opacity: 0;

        transform:
            translateX(60px)
            translateY(-15px)
            rotateY(-12deg)
            rotateZ(10deg)
            scale(.90);
    }

    to {
        opacity: 1;

        transform:
            rotateY(-12deg)
            rotateZ(5deg)
            scale(1);
    }

}


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

body.ps-scene01-start
.ps-mobile-device {

    opacity: 1;

    animation:
        psScene01MobileIn
        .90s
        cubic-bezier(.16,1,.3,1)
        .92s
        both;
}


@keyframes psScene01MobileIn {

    from {
        opacity: 0;

        transform:
            translateY(85px)
            rotateZ(13deg)
            scale(.82);
    }

    to {
        opacity: 1;

        transform:
            rotateZ(7deg)
            scale(1);
    }

}


/* =========================================================
   SMALL TECHNOLOGY OBJECTS
========================================================= */

body.ps-scene01-start
.ps-ai-object {

    opacity: 1;

    animation:
        psScene01ChipIn
        .75s
        cubic-bezier(.16,1,.3,1)
        1.02s
        both;
}


body.ps-scene01-start
.ps-cloud-object {

    opacity: 1;

    animation:
        psScene01ChipIn
        .75s
        cubic-bezier(.16,1,.3,1)
        1.13s
        both;
}


body.ps-scene01-start
.ps-security-object {

    opacity: 1;

    animation:
        psScene01ChipIn
        .75s
        cubic-bezier(.16,1,.3,1)
        1.23s
        both;
}


@keyframes psScene01ChipIn {

    from {
        opacity: 0;

        transform:
            translateY(20px)
            scale(.78);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* =========================================================
   HERO SETTLED STATE
========================================================= */

body.ps-scene01-ready
.ps-cinematic-hero {

    --ps-scene01-ready: 1;
}


/* =========================================================
   SUBTLE CONTINUING LIFE

   AFTER THE ENTRANCE FINISHES
========================================================= */

body.ps-scene01-ready
.ps-code-panel {

    animation:
        psSceneFloatA
        6s
        ease-in-out
        infinite;
}


body.ps-scene01-ready
.ps-web-panel {

    animation:
        psSceneFloatB
        7s
        ease-in-out
        infinite;
}


body.ps-scene01-ready
.ps-mobile-device {

    animation:
        psSceneFloatC
        6.5s
        ease-in-out
        infinite;
}


@keyframes psSceneFloatA {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -8px;
    }

}


@keyframes psSceneFloatB {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: 9px;
    }

}


@keyframes psSceneFloatC {

    0%,
    100% {
        margin-bottom: 0;
    }

    50% {
        margin-bottom: 9px;
    }

}


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

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

    body.ps-scene01-ready
    .ps-laptop,

    body.ps-scene01-ready
    .ps-code-panel,

    body.ps-scene01-ready
    .ps-web-panel,

    body.ps-scene01-ready
    .ps-mobile-device,

    body.ps-scene01-ready
    .ps-ai-object,

    body.ps-scene01-ready
    .ps-cloud-object,

    body.ps-scene01-ready
    .ps-security-object {

        -webkit-tap-highlight-color:
            transparent;
    }


    body.ps-scene01-ready
    .ps-tech-stage.ps-scene01-touch {

        animation:
            psSceneTouch
            .40s
            cubic-bezier(.22,1,.36,1);
    }


    @keyframes psSceneTouch {

        0% {
            transform:
                scale(1);
        }

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

        100% {
            transform:
                scale(1);
        }

    }

}


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

@media (max-width: 760px) {

    body.ps-scene01-start
    .ps-main-heading span {

        transition-delay:
            .28s;
    }


    body.ps-scene01-start
    .ps-main-heading strong {

        transition-delay:
            .40s;
    }


    body.ps-scene01-start
    .ps-hero-text {

        transition-delay:
            .58s;
    }


    body.ps-scene01-start
    .ps-hero-buttons {

        transition-delay:
            .72s;
    }


    body.ps-scene01-start
    .ps-hero-capabilities {

        transition-delay:
            .85s;
    }

}


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

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

    body.ps-intro-lock
    .ps-cinematic-hero *,

    body.ps-scene01-start
    .ps-cinematic-hero * {

        animation:
            none !important;

        transition-duration:
            .01ms !important;

        transition-delay:
            0ms !important;
    }

}