/* =========================================================
   YXE WEB STUDIOS
   LIVING WAVE BACKGROUND
   ========================================================= */


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

:root {

    /* -----------------------------------------------------
       CORE COLORS
       ----------------------------------------------------- */

    --yxe-bg:
        #01040a;

    --yxe-blue:
        #1769ff;

    --yxe-blue-bright:
        #2684ff;

    --yxe-blue-electric:
        #00aaff;

    --yxe-blue-soft:
        #60a5fa;

    --yxe-white:
        #eef7ff;


    /* -----------------------------------------------------
       WAVE IMAGE
       ----------------------------------------------------- */

    --wave-image:
        url("../images/yxe-wave-background.png");

    /*
       Main visibility of the artwork.
       Increase to .85 if you want it even stronger.
    */

    --wave-opacity:
        .78;


    /* -----------------------------------------------------
       BACKGROUND ATMOSPHERE
       ----------------------------------------------------- */

    --atmosphere-opacity:
        1;

    --glow-opacity:
        .85;

    --flare-opacity:
        1;


    /* -----------------------------------------------------
       MOTION
       ----------------------------------------------------- */

    --wave-speed:
        42s;

    --depth-speed:
        58s;

    --atmosphere-speed:
        24s;

    --glow-speed:
        18s;

    --flare-speed:
        11s;

    --streak-speed:
        15s;


    /* -----------------------------------------------------
       MAIN SCENE
       ----------------------------------------------------- */

    --scene-x:
        72%;

    --scene-y:
        40%;
}


/* =========================================================
   HTML / BODY
   ========================================================= */

html {

    background:
        var(--yxe-bg);

    min-height:
        100%;

}


body {

    position:
        relative;

    min-height:
        100vh;

    background:
        #01040a;

    overflow-x:
        hidden;

}


/* =========================================================
   REMOVE OLD IMAGE DUPLICATION
   =========================================================

   The wave image is handled by .ambient-background.

   These pseudo elements are atmosphere only.
   ========================================================= */


body::before {

    content:
        "";

    position:
        fixed;

    inset:
        0;

    z-index:
        0;

    pointer-events:
        none;

    background:

        radial-gradient(
            ellipse at 72% 38%,
            rgba(0,102,255,.18),
            transparent 38%
        ),

        radial-gradient(
            ellipse at 20% 72%,
            rgba(0,61,190,.13),
            transparent 42%
        );

    opacity:
        .9;

    filter:
        blur(35px);

    animation:
        yxeBodyAtmosphere
        28s
        ease-in-out
        infinite
        alternate;

}


/* =========================================================
   BODY ATMOSPHERE
   ========================================================= */

body::after {

    content:
        "";

    position:
        fixed;

    inset:
        0;

    z-index:
        0;

    pointer-events:
        none;

    background:

        linear-gradient(
            90deg,
            rgba(0,2,8,.70) 0%,
            rgba(0,3,12,.38) 28%,
            rgba(0,4,15,.08) 58%,
            rgba(0,3,12,.28) 100%
        ),

        linear-gradient(
            180deg,
            rgba(0,0,0,.28) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0,0,0,.42) 100%
        );

    opacity:
        .95;

}


/* =========================================================
   MAIN BACKGROUND CONTAINER
   ========================================================= */

.ambient-background {

    position:
        fixed;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    z-index:
        0;

    pointer-events:
        none;

    overflow:
        hidden;

    background:
        #01040a;

}


/* =========================================================
   PRIMARY WAVE IMAGE
   =========================================================

   THIS IS THE MAIN BACKGROUND.

   It always fills the viewport using cover.
   ========================================================= */

.ambient-background::before {

    content:
        "";

    position:
        absolute;

    inset:
        -7%;

    background-image:
        var(--wave-image);

    background-size:
        cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;

    opacity:
        var(--wave-opacity);

    filter:
        saturate(1.35)
        contrast(1.12)
        brightness(.88);

    transform:
        scale(1.08);

    animation:
        yxeWaveMovement
        var(--wave-speed)
        ease-in-out
        infinite
        alternate;

    will-change:
        transform,
        background-position;

}


/* =========================================================
   IMAGE DEPTH / SECONDARY WAVE
   ========================================================= */

.ambient-background::after {

    content:
        "";

    position:
        absolute;

    inset:
        -8%;

    background-image:
        var(--wave-image);

    background-size:
        cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;

    opacity:
        .12;

    filter:
        blur(16px)
        saturate(1.7)
        brightness(1.15);

    mix-blend-mode:
        screen;

    transform:
        scale(1.12);

    animation:
        yxeWaveDepth
        var(--depth-speed)
        ease-in-out
        infinite
        alternate;

}


/* =========================================================
   ATMOSPHERIC FIELD
   ========================================================= */

.ambient-field {

    position:
        absolute;

    pointer-events:
        none;

    border-radius:
        50%;

    mix-blend-mode:
        screen;

    filter:
        blur(90px);

    will-change:
        transform;

}


/* =========================================================
   FIELD A
   ========================================================= */

.ambient-field-a {

    left:
        74%;

    top:
        28%;

    width:
        900px;

    height:
        900px;

    background:

        radial-gradient(
            circle,
            rgba(0,110,255,.25)
            0%,

            rgba(37,99,235,.16)
            24%,

            rgba(0,65,200,.07)
            45%,

            transparent 72%
        );

    opacity:
        .75;

    animation:
        yxeFieldA
        19s
        ease-in-out
        infinite
        alternate;

}


/* =========================================================
   FIELD B
   ========================================================= */

.ambient-field-b {

    left:
        8%;

    top:
        72%;

    width:
        800px;

    height:
        800px;

    background:

        radial-gradient(
            circle,
            rgba(0,78,255,.19)
            0%,

            rgba(29,78,216,.10)
            28%,

            transparent 72%
        );

    opacity:
        .55;

    animation:
        yxeFieldB
        25s
        ease-in-out
        infinite
        alternate;

}


/* =========================================================
   FIELD C
   ========================================================= */

.ambient-field-c {

    left:
        90%;

    top:
        10%;

    width:
        700px;

    height:
        700px;

    background:

        radial-gradient(
            circle,
            rgba(0,145,255,.15)
            0%,

            rgba(59,130,246,.08)
            30%,

            transparent 72%
        );

    opacity:
        .55;

    animation:
        yxeFieldC
        22s
        ease-in-out
        infinite
        alternate;

}


/* =========================================================
   CENTRAL BLUE CORE
   ========================================================= */

.ambient-core {

    position:
        absolute;

    left:
        var(--scene-x);

    top:
        var(--scene-y);

    width:
        750px;

    height:
        750px;

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

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,

            rgba(255,255,255,.055)
            0%,

            rgba(0,140,255,.16)
            10%,

            rgba(37,99,235,.13)
            25%,

            rgba(29,78,216,.06)
            45%,

            transparent 70%
        );

    filter:
        blur(45px);

    opacity:
        .65;

    animation:
        yxeCorePulse
        10s
        ease-in-out
        infinite
        alternate;

}


/* =========================================================
   MOVING ATMOSPHERIC HAZE
   ========================================================= */

.ambient-haze {

    position:
        absolute;

    inset:
        -40%;

    background:

        conic-gradient(
            from 210deg at 50% 50%,

            transparent 0deg,

            rgba(0,91,255,.045) 30deg,

            transparent 65deg,

            rgba(0,153,255,.055) 120deg,

            transparent 165deg,

            rgba(37,99,235,.065) 220deg,

            transparent 285deg,

            rgba(0,110,255,.045) 335deg,

            transparent 360deg
        );

    filter:
        blur(110px);

    opacity:
        .55;

    animation:
        yxeHazeRotate
        50s
        linear
        infinite;

}


/* =========================================================
   ENERGY BEAMS
   ========================================================= */

.energy-beam {

    position:
        absolute;

    width:
        145vw;

    height:
        2px;

    left:
        -22vw;

    transform-origin:
        center;

    pointer-events:
        none;

    background:

        linear-gradient(
            90deg,

            transparent 0%,

            transparent 12%,

            rgba(0,102,255,.03) 25%,

            rgba(59,130,246,.13) 37%,

            rgba(96,165,250,.48) 46%,

            rgba(220,240,255,.95) 49%,

            #ffffff 50%,

            rgba(220,240,255,.95) 51%,

            rgba(96,165,250,.48) 54%,

            rgba(59,130,246,.13) 63%,

            rgba(0,102,255,.03) 75%,

            transparent 88%,

            transparent 100%
        );

    box-shadow:

        0 0 4px rgba(255,255,255,.8),

        0 0 12px rgba(147,197,253,.7),

        0 0 28px rgba(59,130,246,.55),

        0 0 60px rgba(37,99,235,.38),

        0 0 120px rgba(0,75,255,.22);

    opacity:
        .18;

}


/* =========================================================
   BEAM A
   ========================================================= */

.energy-beam-a {

    top:
        28%;

    transform:
        rotate(-19deg);

    animation:
        yxeBeamA
        18s
        ease-in-out
        infinite
        alternate;

}


/* =========================================================
   BEAM B
   ========================================================= */

.energy-beam-b {

    top:
        54%;

    opacity:
        .10;

    transform:
        rotate(16deg);

    animation:
        yxeBeamB
        23s
        ease-in-out
        infinite
        alternate;

}


/* =========================================================
   BEAM C
   ========================================================= */

.energy-beam-c {

    top:
        78%;

    opacity:
        .07;

    transform:
        rotate(-28deg);

    animation:
        yxeBeamC
        27s
        ease-in-out
        infinite
        alternate;

}


/* =========================================================
   OPTIC STREAKS
   ========================================================= */

.optic-streak {

    position:
        absolute;

    width:
        580px;

    height:
        1px;

    pointer-events:
        none;

    background:

        linear-gradient(
            90deg,

            transparent,

            rgba(59,130,246,.08),

            rgba(96,165,250,.38),

            #ffffff,

            rgba(96,165,250,.38),

            rgba(59,130,246,.08),

            transparent
        );

    box-shadow:

        0 0 7px rgba(255,255,255,.85),

        0 0 20px rgba(96,165,250,.75),

        0 0 45px rgba(59,130,246,.60),

        0 0 90px rgba(37,99,235,.35);

    opacity:
        .28;

}


/* =========================================================
   STREAK A
   ========================================================= */

.optic-streak-a {

    top:
        30%;

    left:
        -220px;

    transform:
        rotate(-25deg);

    animation:
        yxeStreakA
        14s
        ease-in-out
        infinite
        alternate;

}


/* =========================================================
   STREAK B
   ========================================================= */

.optic-streak-b {

    top:
        63%;

    right:
        -220px;

    transform:
        rotate(23deg);

    animation:
        yxeStreakB
        17s
        ease-in-out
        infinite
        alternate;

}


/* =========================================================
   STREAK C
   ========================================================= */

.optic-streak-c {

    top:
        17%;

    left:
        38%;

    transform:
        rotate(-12deg);

    opacity:
        .18;

    animation:
        yxeStreakC
        21s
        ease-in-out
        infinite
        alternate;

}


/* =========================================================
   FLARE SYSTEM
   ========================================================= */

.page-lines {

    position:
        fixed;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;

    overflow:
        hidden;

}


/* =========================================================
   LARGE FLARE GLOW
   ========================================================= */

.page-lines::before,
.page-lines::after {

    content:
        "";

    position:
        absolute;

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        #ffffff;

    box-shadow:

        0 0 4px #ffffff,

        0 0 10px #ffffff,

        0 0 22px #bfdbfe,

        0 0 42px #60a5fa,

        0 0 75px #3b82f6,

        0 0 125px rgba(37,99,235,.8),

        0 0 200px rgba(0,90,255,.45);

    filter:
        blur(.4px);

    opacity:
        0;

}


/* =========================================================
   FLARE ONE
   ========================================================= */

.page-lines::before {

    top:
        47%;

    left:
        16%;

    animation:
        yxeFlareOne
        var(--flare-speed)
        ease-in-out
        infinite;

}


/* =========================================================
   FLARE TWO
   ========================================================= */

.page-lines::after {

    top:
        26%;

    left:
        70%;

    animation:
        yxeFlareTwo
        17s
        ease-in-out
        infinite;

}


/* =========================================================
   LIGHT LINE COMPATIBILITY
   ========================================================= */

.light-line {

    opacity:
        .13;

    filter:
        blur(.25px);

    transition:
        opacity 1.5s ease,
        filter 1.5s ease;

}


/* =========================================================
   SCENE CONTROLS
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

body[data-scene="hero"] {

    --wave-opacity:
        .82;

    --scene-x:
        76%;

    --scene-y:
        27%;

}


body[data-scene="hero"] .ambient-background {

    opacity:
        1;

}


/* ---------------------------------------------------------
   WEB
   --------------------------------------------------------- */

body[data-scene="web"] {

    --wave-opacity:
        .80;

    --scene-x:
        75%;

    --scene-y:
        40%;

}


/* ---------------------------------------------------------
   BRAND
   --------------------------------------------------------- */

body[data-scene="brand"] {

    --wave-opacity:
        .74;

    --scene-x:
        25%;

    --scene-y:
        45%;

}


body[data-scene="brand"] .ambient-core {

    filter:
        blur(55px);

}


/* ---------------------------------------------------------
   DIGITAL
   --------------------------------------------------------- */

body[data-scene="digital"] {

    --wave-opacity:
        .72;

    --scene-x:
        70%;

    --scene-y:
        45%;

}


/* ---------------------------------------------------------
   WORK
   --------------------------------------------------------- */

body[data-scene="work"] {

    --wave-opacity:
        .86;

    --scene-x:
        68%;

    --scene-y:
        38%;

}


body[data-scene="work"] .optic-streak {

    opacity:
        .42;

}


/* ---------------------------------------------------------
   CTA
   --------------------------------------------------------- */

body[data-scene="cta"] {

    --wave-opacity:
        .92;

    --scene-x:
        50%;

    --scene-y:
        45%;

}


body[data-scene="cta"] .ambient-core {

    opacity:
        .95;

}


body[data-scene="cta"] .page-lines::before,
body[data-scene="cta"] .page-lines::after {

    opacity:
        1;

}


/* =========================================================
   WAVE IMAGE MOVEMENT
   ========================================================= */

@keyframes yxeWaveMovement {

    0% {

        transform:
            scale(1.08)
            translate3d(-1.2%, -0.8%, 0);

        background-position:
            48% 49%;

    }

    25% {

        transform:
            scale(1.095)
            translate3d(.4%, .2%, 0);

        background-position:
            51% 48%;

    }

    50% {

        transform:
            scale(1.115)
            translate3d(1.1%, 1%, 0);

        background-position:
            53% 51%;

    }

    75% {

        transform:
            scale(1.10)
            translate3d(-.3%, 1.3%, 0);

        background-position:
            50% 53%;

    }

    100% {

        transform:
            scale(1.08)
            translate3d(-1%, -.5%, 0);

        background-position:
            47% 50%;

    }

}


/* =========================================================
   SECONDARY WAVE DEPTH
   ========================================================= */

@keyframes yxeWaveDepth {

    0% {

        transform:
            scale(1.12)
            translate3d(-1%, 0, 0);

    }

    50% {

        transform:
            scale(1.15)
            translate3d(1%, -1%, 0);

    }

    100% {

        transform:
            scale(1.13)
            translate3d(0, 1.5%, 0);

    }

}


/* =========================================================
   BODY ATMOSPHERE
   ========================================================= */

@keyframes yxeBodyAtmosphere {

    0% {

        transform:
            translate3d(-1%, -1%, 0)
            scale(1);

        opacity:
            .65;

    }

    50% {

        transform:
            translate3d(1%, 1%, 0)
            scale(1.04);

        opacity:
            .95;

    }

    100% {

        transform:
            translate3d(-.5%, 2%, 0)
            scale(1.07);

        opacity:
            .75;

    }

}


/* =========================================================
   FIELD A
   ========================================================= */

@keyframes yxeFieldA {

    0% {

        transform:
            translate(-50%, -50%)
            scale(.90);

    }

    50% {

        transform:
            translate(-47%, -53%)
            scale(1.08);

    }

    100% {

        transform:
            translate(-53%, -47%)
            scale(1.16);

    }

}


/* =========================================================
   FIELD B
   ========================================================= */

@keyframes yxeFieldB {

    0% {

        transform:
            translate(-50%, -50%)
            scale(.88);

    }

    50% {

        transform:
            translate(-43%, -47%)
            scale(1.06);

    }

    100% {

        transform:
            translate(-55%, -45%)
            scale(1.12);

    }

}


/* =========================================================
   FIELD C
   ========================================================= */

@keyframes yxeFieldC {

    0% {

        transform:
            translate(-50%, -50%)
            scale(.84);

    }

    50% {

        transform:
            translate(-55%, -46%)
            scale(1.05);

    }

    100% {

        transform:
            translate(-45%, -55%)
            scale(1.10);

    }

}


/* =========================================================
   CORE PULSE
   ========================================================= */

@keyframes yxeCorePulse {

    0% {

        transform:
            translate(-50%, -50%)
            scale(.90);

        opacity:
            .38;

        filter:
            blur(42px);

    }

    50% {

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

        opacity:
            .72;

        filter:
            blur(58px);

    }

    100% {

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

        opacity:
            .48;

        filter:
            blur(48px);

    }

}


/* =========================================================
   HAZE ROTATION
   ========================================================= */

@keyframes yxeHazeRotate {

    from {

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

    }

    to {

        transform:
            rotate(360deg)
            scale(1.08);

    }

}


/* =========================================================
   BEAM A
   ========================================================= */

@keyframes yxeBeamA {

    0% {

        margin-left:
            -4vw;

        opacity:
            .08;

    }

    40% {

        opacity:
            .20;

    }

    70% {

        margin-left:
            3vw;

        opacity:
            .24;

    }

    100% {

        margin-left:
            -1vw;

        opacity:
            .11;

    }

}


/* =========================================================
   BEAM B
   ========================================================= */

@keyframes yxeBeamB {

    0% {

        margin-left:
            3vw;

    }

    50% {

        margin-left:
            -2vw;

    }

    100% {

        margin-left:
            4vw;

    }

}


/* =========================================================
   BEAM C
   ========================================================= */

@keyframes yxeBeamC {

    0% {

        margin-left:
            -3vw;

    }

    50% {

        margin-left:
            2vw;

    }

    100% {

        margin-left:
            5vw;

    }

}


/* =========================================================
   STREAK A
   ========================================================= */

@keyframes yxeStreakA {

    0% {

        transform:
            translateX(-50px)
            rotate(-25deg);

        opacity:
            .05;

    }

    35% {

        opacity:
            .35;

    }

    65% {

        opacity:
            .48;

    }

    100% {

        transform:
            translateX(220px)
            rotate(-25deg);

        opacity:
            .10;

    }

}


/* =========================================================
   STREAK B
   ========================================================= */

@keyframes yxeStreakB {

    0% {

        transform:
            translateX(80px)
            rotate(23deg);

        opacity:
            .05;

    }

    40% {

        opacity:
            .30;

    }

    70% {

        opacity:
            .42;

    }

    100% {

        transform:
            translateX(-220px)
            rotate(23deg);

        opacity:
            .08;

    }

}


/* =========================================================
   STREAK C
   ========================================================= */

@keyframes yxeStreakC {

    0% {

        transform:
            translateX(-100px)
            rotate(-12deg);

        opacity:
            .04;

    }

    50% {

        opacity:
            .28;

    }

    100% {

        transform:
            translateX(180px)
            rotate(-12deg);

        opacity:
            .06;

    }

}


/* =========================================================
   FLARE ONE
   ========================================================= */

@keyframes yxeFlareOne {

    0% {

        transform:
            translate3d(-22vw, 12vh, 0)
            scale(.15);

        opacity:
            0;

        filter:
            blur(1px);

    }

    12% {

        opacity:
            .15;

    }

    25% {

        transform:
            translate3d(3vw, -2vh, 0)
            scale(.55);

        opacity:
            .65;

        filter:
            blur(.8px);

    }

    34% {

        transform:
            translate3d(15vw, -8vh, 0)
            scale(1.25);

        opacity:
            1;

        filter:
            blur(1.2px);

    }

    42% {

        transform:
            translate3d(28vw, -14vh, 0)
            scale(.85);

        opacity:
            .55;

    }

    56% {

        transform:
            translate3d(44vw, -22vh, 0)
            scale(.25);

        opacity:
            0;

    }

    100% {

        transform:
            translate3d(58vw, -28vh, 0)
            scale(.10);

        opacity:
            0;

    }

}


/* =========================================================
   FLARE TWO
   ========================================================= */

@keyframes yxeFlareTwo {

    0% {

        transform:
            translate3d(25vw, 13vh, 0)
            scale(.15);

        opacity:
            0;

    }

    15% {

        opacity:
            .16;

    }

    30% {

        transform:
            translate3d(4vw, 4vh, 0)
            scale(.55);

        opacity:
            .62;

    }

    42% {

        transform:
            translate3d(-10vw, -1vh, 0)
            scale(1.35);

        opacity:
            1;

    }

    52% {

        transform:
            translate3d(-24vw, -7vh, 0)
            scale(.72);

        opacity:
            .45;

    }

    68% {

        transform:
            translate3d(-40vw, -16vh, 0)
            scale(.25);

        opacity:
            0;

    }

    100% {

        transform:
            translate3d(-55vw, -23vh, 0)
            scale(.10);

        opacity:
            0;

    }

}


/* =========================================================
   HERO ENHANCEMENT
   ========================================================= */

body[data-scene="hero"] .ambient-background::before {

    filter:
        saturate(1.45)
        contrast(1.14)
        brightness(.92);

}


/* =========================================================
   CTA ENHANCEMENT
   ========================================================= */

body[data-scene="cta"] .ambient-background::before {

    filter:
        saturate(1.55)
        contrast(1.16)
        brightness(1.02);

}


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

@media (max-width: 900px) {

    .ambient-background::before {

        /*
           Still COVER.
           We do not switch to auto 100%.
        */

        background-size:
            cover;

        background-position:
            58% center;

        transform:
            scale(1.10);

    }


    .ambient-background::after {

        background-size:
            cover;

        background-position:
            58% center;

    }


    .ambient-field-a {

        width:
            650px;

        height:
            650px;

    }


    .ambient-field-b {

        width:
            550px;

        height:
            550px;

    }


    .ambient-field-c {

        width:
            500px;

        height:
            500px;

    }


    .ambient-core {

        width:
            520px;

        height:
            520px;

    }


    .energy-beam {

        width:
            180vw;

        left:
            -40vw;

    }


    .optic-streak {

        width:
            400px;

    }

}


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

@media (max-width: 600px) {

    .ambient-background::before {

        background-size:
            cover;

        background-position:
            62% center;

        transform:
            scale(1.12);

        opacity:
            .62;

        filter:
            saturate(1.30)
            contrast(1.10)
            brightness(.78);

    }


    .ambient-background::after {

        opacity:
            .08;

        filter:
            blur(18px);

    }


    body::before {

        opacity:
            .65;

        filter:
            blur(45px);

    }


    .ambient-field-a {

        width:
            500px;

        height:
            500px;

    }


    .ambient-field-b {

        width:
            450px;

        height:
            450px;

    }


    .ambient-field-c {

        width:
            400px;

        height:
            400px;

    }


    .ambient-core {

        width:
            400px;

        height:
            400px;

    }


    .energy-beam {

        width:
            230vw;

        left:
            -65vw;

        opacity:
            .06;

    }


    .optic-streak {

        width:
            300px;

    }

}


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

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

    body::before,
    body::after,

    .ambient-background::before,
    .ambient-background::after,

    .ambient-field,
    .ambient-core,
    .ambient-haze,

    .energy-beam,
    .optic-streak,

    .page-lines::before,
    .page-lines::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}