/* =========================================================
   PRIMESCAPE — SCENE 00 V4
   DIRECT BRAND SPLIT-WINDOW REVEAL

   FLOW
   1. Premium graphite intro screen
   2. Original logo resolves
   3. PrimeScape signature draws
   4. The SAME branded screen becomes two shutters
   5. Left half slides left / right half slides right
   6. Actual homepage is revealed underneath

   NO APERTURE BOX
   NO SECOND DARK SQUARE
   NO WHITE FLASH
========================================================= */


/* =========================================================
   ROOT
========================================================= */

.ps-intro-v4 {
    position: fixed;
    inset: 0;

    z-index: 999999;

    overflow: hidden;

    background: transparent;

    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    isolation: isolate;

    transition:
        opacity .28s ease,
        visibility .28s ease;
}


/* =========================================================
   TWO TRUE WINDOW SHUTTERS
========================================================= */

.ps-intro-window {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 50%;

    z-index: 2;

    overflow: hidden;

    will-change: transform;

    transform: translate3d(0,0,0);

    transition:
        transform 1.18s cubic-bezier(.76,0,.24,1);
}


.ps-intro-window-left {
    left: 0;
}


.ps-intro-window-right {
    right: 0;
}


/*
 * Each half contains a 100vw surface.
 * This makes both halves look like ONE continuous screen
 * before the split begins.
 */

.ps-intro-window-surface {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 100vw;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(123,137,164,.10),
            transparent 27%
        ),
        radial-gradient(
            circle at 22% 72%,
            rgba(96,116,105,.07),
            transparent 29%
        ),
        radial-gradient(
            ellipse at center,
            transparent 28%,
            rgba(0,0,0,.18) 68%,
            rgba(0,0,0,.58) 100%
        ),
        linear-gradient(
            145deg,
            #0b0d12 0%,
            #11141a 42%,
            #171a20 100%
        );
}


.ps-intro-window-left
.ps-intro-window-surface {
    left: 0;
}


.ps-intro-window-right
.ps-intro-window-surface {
    right: 0;
}


/* =========================================================
   SPLIT BRAND COPIES
   Hidden until the instant the actual screen must split.
========================================================= */

.ps-intro-window-brand {
    position: absolute;

    top: 0;

    width: 100vw;
    height: 100vh;

    opacity: 0;

    pointer-events: none;
}


.ps-intro-window-left
.ps-intro-window-brand {
    left: 0;
}


.ps-intro-window-right
.ps-intro-window-brand {
    right: 0;
}


/* =========================================================
   MAIN BRAND
========================================================= */

.ps-intro-main-brand {
    position: absolute;

    inset: 0;

    z-index: 8;

    pointer-events: none;

    opacity: 1;

    transition:
        opacity .10s linear;
}


.ps-intro-brand-lockup {
    position: absolute;

    left: 50%;
    top: 50%;

    width:
        min(
            900px,
            92vw
        );

    transform:
        translate(-50%, -50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


/* =========================================================
   LOGO — ORIGINAL COLORS + PREMIUM LIGHT STAGE
========================================================= */

.ps-intro-logo-wrap {
    position: relative;

    z-index: 3;

    width: 260px;
    height: 136px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: -8px;
}


.ps-intro-logo-wrap::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 1;

    width: 238px;
    height: 116px;

    transform:
        translate(-50%, -50%);

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f7f4ed 52%,
            #e7ebf0 100%
        );

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(15,22,38,.08),
        0 18px 55px rgba(0,0,0,.34),
        0 0 55px rgba(224,230,242,.20);

    pointer-events: none;
}


.ps-intro-logo-wrap::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 0;

    width: 350px;
    height: 220px;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    opacity: .84;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,.44) 0%,
            rgba(246,242,234,.24) 30%,
            rgba(178,191,211,.12) 50%,
            transparent 73%
        );

    filter:
        blur(20px);

    pointer-events: none;
}


.ps-intro-logo {
    position: relative;

    z-index: 3;

    display: block;

    width: auto;

    height: 100px;

    max-width: 214px;

    object-fit: contain;

    opacity: 1;

    filter:
        drop-shadow(
            0 5px 10px
            rgba(10,20,45,.20)
        );
}


/* =========================================================
   MAIN BRAND ENTRANCE
========================================================= */

.ps-intro-brand-lockup-main
.ps-intro-logo-wrap {
    opacity: 0;

    transform:
        translateY(18px)
        scale(.88);

    filter:
        blur(10px);
}


.ps-intro-v4.ps-v4-brand-live
.ps-intro-brand-lockup-main
.ps-intro-logo-wrap {
    animation:
        psV4LogoResolve
        1.05s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


@keyframes psV4LogoResolve {

    0% {
        opacity: 0;

        transform:
            translateY(18px)
            scale(.88);

        filter:
            blur(10px);
    }

    55% {
        opacity: 1;

        filter:
            blur(0);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0);
    }
}


/* =========================================================
   SIGNATURE
========================================================= */

.ps-intro-signature-wrap {
    position: relative;

    width: 100%;
}


.ps-intro-brand-lockup-main
.ps-intro-signature-wrap {
    opacity: 0;

    transform:
        translateY(12px);
}


.ps-intro-v4.ps-v4-brand-live
.ps-intro-brand-lockup-main
.ps-intro-signature-wrap {
    animation:
        psV4SignatureWrap
        .7s
        ease
        .34s
        forwards;
}


.ps-intro-signature {
    display: block;

    width: 100%;

    height: auto;
}


.ps-intro-signature-main {
    fill:
        #ece8df;

    stroke-width: 0;

    font-family:
        "Brush Script MT",
        "Segoe Script",
        "Snell Roundhand",
        cursive;

    font-size: 120px;

    font-weight: 500;

    letter-spacing: -3px;
}


.ps-intro-brand-lockup-main
.ps-intro-signature-main {
    fill: transparent;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;

    stroke-dasharray: 1600;

    stroke-dashoffset: 1600;
}


.ps-intro-v4.ps-v4-brand-live
.ps-intro-brand-lockup-main
.ps-intro-signature-main {
    animation:
        psV4SignatureDraw
        1.55s
        cubic-bezier(.65,0,.35,1)
        .54s
        forwards,

        psV4SignatureFill
        .42s
        ease
        1.87s
        forwards;
}


.ps-intro-signature-sub {
    fill:
        #8a9a92;

    stroke-width:
        0;

    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size:
        31px;

    font-weight:
        750;

    letter-spacing:
        15px;
}


.ps-intro-brand-lockup-main
.ps-intro-signature-sub {
    fill: transparent;

    stroke:
        #81918a;

    stroke-width: 1;

    stroke-dasharray: 900;

    stroke-dashoffset: 900;
}


.ps-intro-v4.ps-v4-brand-live
.ps-intro-brand-lockup-main
.ps-intro-signature-sub {
    animation:
        psV4SignatureDraw
        1.05s
        ease
        1.24s
        forwards,

        psV4SubFill
        .35s
        ease
        1.94s
        forwards;
}


@keyframes psV4SignatureWrap {

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes psV4SignatureDraw {

    to {
        stroke-dashoffset:
            0;
    }
}


@keyframes psV4SignatureFill {

    to {
        fill:
            #ece8df;

        stroke-width:
            0;
    }
}


@keyframes psV4SubFill {

    to {
        fill:
            #8a9a92;

        stroke-width:
            0;
    }
}


/* =========================================================
   UNDERLINE
========================================================= */

.ps-intro-line {
    position: absolute;

    left: 50%;
    bottom: 21%;

    width: 68%;

    height: 1px;

    transform:
        translateX(-50%);

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(229,225,217,.32),
            rgba(147,160,179,.42),
            rgba(125,150,137,.42),
            transparent
        );
}


.ps-intro-brand-lockup-main
.ps-intro-line {
    width: 0;
}


.ps-intro-v4.ps-v4-brand-live
.ps-intro-brand-lockup-main
.ps-intro-line {
    animation:
        psV4Line
        .65s
        ease
        1.94s
        forwards;
}


@keyframes psV4Line {

    to {
        width:
            68%;
    }
}


/* =========================================================
   TAGLINE
========================================================= */

.ps-intro-tagline {
    margin-top:
        -2px;

    color:
        rgba(228,225,218,.46);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        3px;
}


.ps-intro-brand-lockup-main
.ps-intro-tagline {
    opacity: 0;

    transform:
        translateY(8px);
}


.ps-intro-v4.ps-v4-brand-live
.ps-intro-brand-lockup-main
.ps-intro-tagline {
    animation:
        psV4Tagline
        .5s
        ease
        2.08s
        forwards;
}


@keyframes psV4Tagline {

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   ARCHITECTURAL FRAME
========================================================= */

.ps-intro-v4-frame {
    position: absolute;

    inset:
        clamp(22px,3vw,48px);

    z-index:
        6;

    opacity:
        0;

    pointer-events:
        none;

    border:
        1px solid
        rgba(241,237,228,.09);

    transform:
        scale(.985);

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


.ps-intro-v4.ps-v4-brand-live
.ps-intro-v4-frame {
    opacity:
        1;

    transform:
        scale(1);
}


.ps-frame-corner {
    position: absolute;

    width:
        28px;

    height:
        28px;

    opacity:
        .42;
}


.ps-frame-corner::before,
.ps-frame-corner::after {
    content:
        "";

    position:
        absolute;

    background:
        rgba(235,231,222,.55);
}


.ps-frame-corner::before {
    width:
        28px;

    height:
        1px;
}


.ps-frame-corner::after {
    width:
        1px;

    height:
        28px;
}


.ps-frame-corner-tl {
    top:
        -1px;

    left:
        -1px;
}


.ps-frame-corner-tr {
    top:
        -1px;

    right:
        -1px;

    transform:
        rotate(90deg);
}


.ps-frame-corner-bl {
    bottom:
        -1px;

    left:
        -1px;

    transform:
        rotate(-90deg);
}


.ps-frame-corner-br {
    right:
        -1px;

    bottom:
        -1px;

    transform:
        rotate(180deg);
}


/* =========================================================
   CENTER SEAM
   Appears only just before the screen opens.
========================================================= */

.ps-intro-center-seam {
    position:
        absolute;

    left:
        50%;

    top:
        7vh;

    bottom:
        7vh;

    z-index:
        12;

    width:
        1px;

    transform:
        translateX(-50%)
        scaleY(.15);

    transform-origin:
        center;

    opacity:
        0;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(242,238,229,.34) 25%,
            rgba(242,238,229,.48) 50%,
            rgba(242,238,229,.34) 75%,
            transparent
        );

    box-shadow:
        0 0 20px rgba(238,234,225,.10);

    pointer-events:
        none;

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


/* =========================================================
   HANDOFF:
   Swap animated brand for two identical clipped copies.
   Because they occupy exactly the same pixels, the user
   should not perceive a new element appearing.
========================================================= */

.ps-intro-v4.ps-v4-ready-split
.ps-intro-window-brand {
    opacity:
        1;
}


.ps-intro-v4.ps-v4-ready-split
.ps-intro-main-brand {
    opacity:
        0;
}


.ps-intro-v4.ps-v4-ready-split
.ps-intro-center-seam {
    opacity:
        1;

    transform:
        translateX(-50%)
        scaleY(1);
}


/* =========================================================
   DIRECT WINDOW OPEN
========================================================= */

.ps-intro-v4.ps-v4-open
.ps-intro-window-left {
    transform:
        translate3d(-101%,0,0);
}


.ps-intro-v4.ps-v4-open
.ps-intro-window-right {
    transform:
        translate3d(101%,0,0);
}


.ps-intro-v4.ps-v4-open
.ps-intro-center-seam {
    opacity:
        0;
}


.ps-intro-v4.ps-v4-open
.ps-intro-v4-frame {
    opacity:
        0;
}


/* =========================================================
   HIDDEN
========================================================= */

.ps-intro-v4.ps-intro-hidden {
    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;
}


/* =========================================================
   BODY LOCK
========================================================= */

body.ps-intro-lock {
    overflow:
        hidden;
}


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

@media (max-width:760px) {

    .ps-intro-v4-frame {
        inset:
            18px;
    }


    .ps-intro-brand-lockup {
        width:
            min(
                94vw,
                650px
            );
    }


    .ps-intro-logo-wrap {
        width:
            214px;

        height:
            112px;

        margin-bottom:
            -5px;
    }


    .ps-intro-logo-wrap::after {
        width:
            196px;

        height:
            94px;

        border-radius:
            24px;
    }


    .ps-intro-logo-wrap::before {
        width:
            275px;

        height:
            175px;
    }


    .ps-intro-logo {
        height:
            82px;

        max-width:
            176px;
    }


    .ps-intro-signature-main {
        font-size:
            98px;
    }


    .ps-intro-signature-sub {
        font-size:
            27px;

        letter-spacing:
            10px;
    }


    .ps-intro-tagline {
        font-size:
            8px;

        letter-spacing:
            2px;
    }


    .ps-intro-window {
        transition-duration:
            1s;
    }
}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width:480px) {

    .ps-intro-v4-frame {
        inset:
            14px;
    }


    .ps-intro-logo-wrap {
        width:
            188px;

        height:
            102px;
    }


    .ps-intro-logo-wrap::after {
        width:
            172px;

        height:
            86px;

        border-radius:
            22px;
    }


    .ps-intro-logo-wrap::before {
        width:
            240px;

        height:
            158px;
    }


    .ps-intro-logo {
        height:
            72px;

        max-width:
            155px;
    }


    .ps-intro-signature-main {
        font-size:
            84px;
    }


    .ps-intro-signature-sub {
        font-size:
            23px;

        letter-spacing:
            8px;
    }
}


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

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

    .ps-intro-v4 *,
    .ps-intro-v4 *::before,
    .ps-intro-v4 *::after {
        animation-duration:
            .01ms !important;

        animation-delay:
            0ms !important;

        transition-duration:
            .15s !important;
    }
}