/* =========================================================
   NETMORE CREATIVE SHOWCASE
   FULL CSS
   Compatible with latest creative-showcase.php
========================================================= */


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

.netmore-showcase {
    --netmore-light-bg: #ffffff;
    --netmore-dark-bg: #111111;
    --netmore-light-text: #ffffff;
    --netmore-dark-text: #111111;

    position: relative;

    width: 100%;

    background:
        var(--netmore-light-bg);

    color:
        var(--netmore-dark-text);

    overflow: hidden;
}


.netmore-showcase *,
.netmore-showcase *::before,
.netmore-showcase *::after {
    box-sizing: border-box;
}


.netmore-showcase img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


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

.netmore-showcase-stage {
    position: relative;

    width: 100%;
    height: 100vh;

    min-height: 760px;

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   GENERAL SCENE
========================================================= */

.netmore-scene {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


/* =========================================================
   SCENE 1
========================================================= */

.netmore-scene-one {
    z-index: 10;

    background:
        var(--netmore-light-bg);

    color:
        var(--netmore-dark-text);

    overflow: hidden;
}


/* =========================================================
   SCENE 1 TITLE WRAPPER
   IMPORTANT:
   TITLE SITS BEHIND FLOATING IMAGES
========================================================= */

.netmore-scene-one-copy {
    position: absolute;

    z-index: 5;

    top: 50%;
    left: 50%;

    width:
        min(
            820px,
            64vw
        );

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

    text-align: center;

    pointer-events: none;
}


/* =========================================================
   SCENE 1 TITLE
========================================================= */

.netmore-scene-one-title {
    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 0;

    text-align: center;

    text-transform: uppercase;

    transform-origin:
        center center;

    will-change:
        transform,
        opacity;
}


/* =========================================================
   SCENE 1 TITLE LINES
========================================================= */

.netmore-title-line {
    position: relative;

    display: block;

    width: max-content;
    max-width: 100%;

    margin: 0;

    padding: 0;

    font-family:
        inherit;

    font-weight: 700;

    text-transform:
        uppercase;

    white-space:
        nowrap;

    transform-origin:
        center center;

    will-change:
        transform,
        opacity;
}


/* Creative */
.netmore-title-line-1 {
    color: #a5a5a5;

    font-size:
        clamp(
            72px,
            5.3vw,
            105px
        );

    line-height: 0.86;

    letter-spacing:
        -0.055em;
}


/* Portfolio */
.netmore-title-line-2 {
    color: #111111;

    font-size:
        clamp(
            100px,
            8vw,
            155px
        );

    line-height: 0.74;

    letter-spacing:
        -0.065em;
}


/* =========================================================
   FLOATING IMAGES WRAPPER
   ABOVE THE TITLE
========================================================= */

.netmore-floating-images {
    position: absolute;

    inset: 0;

    z-index: 20;

    pointer-events: none;
}


/* =========================================================
   FLOATING IMAGE BASE
========================================================= */

.netmore-floating-image {
    position: absolute;

    overflow: hidden;

    background:
        #eeeeee;

    opacity: 1;

    transform-origin:
        center center;

    will-change:
        transform,
        width,
        height,
        top,
        left,
        right,
        bottom,
        opacity;
}


.netmore-floating-image-element {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        center center;

    transform-origin:
        center center;

    will-change:
        transform;
}


/* =========================================================
   IMAGE 01
   TOP LEFT
========================================================= */

.netmore-floating-image-1 {
    top: 12%;
    left: 7%;

    width: 27vw;
    max-width: 500px;

    height: 26vh;
    min-height: 220px;

    z-index: 21;
}


/* =========================================================
   IMAGE 02
   TOP CENTER
========================================================= */

.netmore-floating-image-2 {
    top: 6%;
    left: 45%;

    width: 27vw;
    max-width: 500px;

    height: 26vh;
    min-height: 220px;

    z-index: 22;
}


/* =========================================================
   IMAGE 03
   RIGHT
========================================================= */

.netmore-floating-image-3 {
    top: 35%;
    right: -1.5%;

    width: 27vw;
    max-width: 500px;

    height: 27vh;
    min-height: 225px;

    z-index: 23;
}


/* =========================================================
   IMAGE 04
   LEFT LOWER
========================================================= */

.netmore-floating-image-4 {
    top: 49%;
    left: -2%;

    width: 26vw;
    max-width: 480px;

    height: 27vh;
    min-height: 225px;

    z-index: 24;
}


/* =========================================================
   IMAGE 05
   BOTTOM CENTER
========================================================= */

.netmore-floating-image-5 {
    left: 23%;
    bottom: -13%;

    width: 27vw;
    max-width: 500px;

    height: 30vh;
    min-height: 245px;

    z-index: 25;
}


/* =========================================================
   IMAGE 06
   HERO IMAGE
========================================================= */

.netmore-floating-image-6 {
    right: 10%;
    bottom: -4%;

    width: 26vw;
    max-width: 490px;

    height: 25vh;
    min-height: 220px;

    z-index: 30;

    transform-origin:
        center center;
}


.netmore-hero-image {
    transform-origin:
        center center;
}


.netmore-hero-image-element {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        center center;

    transform-origin:
        center center;
}


/* =========================================================
   STACK HELPERS
========================================================= */

.netmore-floating-image.is-stack-back {
    z-index:
        20 !important;
}


.netmore-floating-image.is-stack-front {
    z-index:
        35 !important;
}


/* =========================================================
   SCENE 2
   TRANSPARENT SCENE OVER HERO
========================================================= */

.netmore-scene-two {
    z-index: 40;

    background:
        transparent;

    color:
        var(--netmore-light-text);

    opacity: 0;

    visibility: hidden;

    overflow: hidden;

    pointer-events: none;
}


/* =========================================================
   SCENE 2 OVERLAY
   COLOR IS CONTROLLABLE FROM ELEMENTOR
========================================================= */

.netmore-dark-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background-color:
        #000000;

    opacity: 0;

    pointer-events: none;

    will-change:
        opacity;
}


/* =========================================================
   SCENE 2 CONTENT WRAPPER
========================================================= */

.netmore-dark-copy {
    position: absolute;

    z-index: 5;

    top: 50%;
    left: 50%;

    width:
        min(
            1500px,
            91vw
        );

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

    pointer-events: none;
}


/* =========================================================
   SCENE 2 TITLE WRAPPER
========================================================= */

.netmore-dark-title {
    position: relative;

    display: flex;

    flex-direction: column;

    align-items:
        flex-start;

    width: 100%;

    overflow: visible;
}


/* =========================================================
   SCENE 2 TITLE WORD BASE
   TYPOGRAPHY CAN BE OVERRIDDEN BY ELEMENTOR
========================================================= */

.netmore-dark-word {
    position: relative;

    display: block;

    width: max-content;

    max-width: 100%;

    margin: 0;

    padding: 0;

    color:
        var(--netmore-light-text);

    font-size:
        clamp(
            70px,
            8.7vw,
            168px
        );

    font-weight: 700;

    line-height: 0.82;

    letter-spacing:
        -0.065em;

    text-transform:
        uppercase;

    white-space:
        nowrap;

    transform-origin:
        center center;

    will-change:
        transform,
        opacity;
}


/* =========================================================
   SCENE 2 LINE POSITIONS
========================================================= */

.netmore-dark-word-1 {
    margin-left: 0;
}


.netmore-dark-word-2 {
    margin-left: 9vw;
}


.netmore-dark-word-3 {
    margin-left: 3vw;
}


.netmore-dark-word-4 {
    margin-left: 16vw;
}


/* =========================================================
   SCENE 2 DESCRIPTION
========================================================= */

.netmore-dark-description {
    position: relative;

    width: min(
        440px,
        33vw
    );

    max-width: 440px;

    margin-top: 38px;

    margin-left: 0px;

    margin-right: 0vw;

    color:
        var(--netmore-light-text);

    font-size: 16px;

    font-weight: 400;

    line-height: 1.55;

    letter-spacing: 0;

    opacity: 0.82;

    will-change:
        transform,
        opacity;
}


/* =========================================================
   HERO SAFETY
   JS CONTROLS ITS GEOMETRY DIRECTLY
========================================================= */

.netmore-floating-image-6 {
    transform-origin:
        center center;
}


.netmore-floating-image-6 img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        center center;
}


/* =========================================================
   SCENE 2 TEXT ANIMATION SUPPORT
========================================================= */

.netmore-dark-word-1,
.netmore-dark-word-2,
.netmore-dark-word-3,
.netmore-dark-word-4 {
    backface-visibility: hidden;

    -webkit-font-smoothing:
        antialiased;

    transform-style:
        preserve-3d;
}


/* =========================================================
   EDITOR SAFETY
========================================================= */

.elementor-editor-active
.netmore-showcase {
    min-height: 760px;
}


.elementor-editor-active
.netmore-showcase-stage {
    min-height: 760px;
}


/* =========================================================
   DESKTOP LARGE
========================================================= */

@media (min-width: 1600px) {

    .netmore-scene-one-copy {
        width:
            min(
                860px,
                58vw
            );
    }


    .netmore-title-line-1 {
        font-size:
            min(
                5.3vw,
                105px
            );
    }


    .netmore-title-line-2 {
        font-size:
            min(
                8vw,
                155px
            );
    }


    .netmore-dark-copy {
        width:
            min(
                1560px,
                90vw
            );
    }


    .netmore-dark-word {
        font-size:
            min(
                8.7vw,
                168px
            );
    }
}


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

@media (
    min-width: 1025px
)
and (
    max-width: 1500px
) {

    .netmore-showcase-stage {
        min-height: 700px;
    }


    .netmore-scene-one-copy {
        width: 62vw;
    }


    .netmore-title-line-1 {
        font-size:
            clamp(
                62px,
                5vw,
                86px
            );
    }


    .netmore-title-line-2 {
        font-size:
            clamp(
                88px,
                7.7vw,
                126px
            );
    }


    .netmore-floating-image-1 {
        width: 26vw;
        height: 25vh;
    }


    .netmore-floating-image-2 {
        width: 26vw;
        height: 25vh;
    }


    .netmore-floating-image-3 {
        width: 26vw;
        height: 26vh;
    }


    .netmore-floating-image-4 {
        width: 25vw;
        height: 26vh;
    }


    .netmore-floating-image-5 {
        width: 26vw;
        height: 28vh;
    }


    .netmore-floating-image-6 {
        width: 25vw;
        height: 24vh;
    }


    .netmore-dark-word {
        font-size:
            clamp(
                68px,
                8.3vw,
                135px
            );
    }


    .netmore-dark-description {
        width:
            min(
                390px,
                30vw
            );

        margin-right: 4vw;
    }
}


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

@media (max-width: 1024px) {

    .netmore-showcase-stage {
        min-height: 690px;
    }


    .netmore-scene-one-copy {
        width: 72vw;
    }


    .netmore-title-line-1 {
        font-size:
            clamp(
                55px,
                8vw,
                82px
            );
    }


    .netmore-title-line-2 {
        font-size:
            clamp(
                78px,
                11vw,
                112px
            );
    }


    .netmore-floating-image-1 {
        top: 14%;
        left: 4%;

        width: 31vw;

        height: 24vh;
    }


    .netmore-floating-image-2 {
        top: 10%;
        left: 47%;

        width: 31vw;

        height: 24vh;
    }


    .netmore-floating-image-3 {
        top: 45%;
        right: -5%;

        width: 31vw;

        height: 25vh;
    }


    .netmore-floating-image-4 {
        top: 58%;
        left: -5%;

        width: 31vw;

        height: 25vh;
    }


    .netmore-floating-image-5 {
        left: 25%;
        bottom: -4%;

        width: 31vw;

        height: 27vh;
    }


    .netmore-floating-image-6 {
        right: 6%;
        bottom: -2%;

        width: 30vw;

        height: 23vh;
    }


    .netmore-dark-copy {
        width: 90vw;
    }


    .netmore-dark-word {
        font-size:
            clamp(
                58px,
                10vw,
                110px
            );
    }


    .netmore-dark-word-2 {
        margin-left: 5vw;
    }


    .netmore-dark-word-3 {
        margin-left: 2vw;
    }


    .netmore-dark-word-4 {
        margin-left: 9vw;
    }


    .netmore-dark-description {
        width:
            min(
                390px,
                44vw
            );

        margin-top: 34px;

        margin-right: 4vw;
    }
}


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

@media (max-width: 767px) {

    .netmore-showcase-stage {
        height: 100svh;

        min-height: 620px;
    }


    .netmore-scene-one-copy {
        width: 86vw;
    }


    .netmore-title-line-1 {
        font-size:
            clamp(
                42px,
                12vw,
                60px
            );

        line-height: 0.88;

        white-space: normal;
    }


    .netmore-title-line-2 {
        font-size:
            clamp(
                56px,
                16vw,
                80px
            );

        line-height: 0.8;

        white-space: normal;
    }


    .netmore-floating-image-1 {
        top: 10%;
        left: 4%;

        width: 42vw;

        height: 18vh;

        min-height: 140px;
    }


    .netmore-floating-image-2 {
        top: 15%;

        left: auto;
        right: 4%;

        width: 40vw;

        height: 17vh;

        min-height: 135px;
    }


    .netmore-floating-image-3 {
        top: 45%;

        right: -7%;

        width: 44vw;

        height: 20vh;

        min-height: 150px;
    }


    .netmore-floating-image-4 {
        top: 57%;

        left: -7%;

        width: 44vw;

        height: 20vh;

        min-height: 150px;
    }


    .netmore-floating-image-5 {
        left: 15%;

        bottom: -2%;

        width: 42vw;

        height: 20vh;

        min-height: 150px;
    }


    .netmore-floating-image-6 {
        right: 5%;

        bottom: 3%;

        width: 40vw;

        height: 18vh;

        min-height: 140px;
    }


    .netmore-dark-copy {
        width:
            calc(
                100% - 36px
            );
    }


    .netmore-dark-title {
        width: 100%;
    }


    .netmore-dark-word {
        width: auto;

        max-width: 100%;

        font-size:
            clamp(
                42px,
                13vw,
                68px
            );

        line-height: 0.88;

        white-space: normal;
    }


    .netmore-dark-word-1,
    .netmore-dark-word-2,
    .netmore-dark-word-3,
    .netmore-dark-word-4 {
        margin-left: 0;
    }


    .netmore-dark-description {
        width: 78%;

        max-width: none;

        margin-top: 30px;

        margin-left: auto;

        margin-right: 0;

        font-size: 13px;

        line-height: 1.5;
    }
}


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

@media (max-width: 480px) {

    .netmore-showcase-stage {
        min-height: 600px;
    }


    .netmore-scene-one-copy {
        width: 90vw;
    }


    .netmore-title-line-1 {
        font-size:
            clamp(
                38px,
                12vw,
                54px
            );
    }


    .netmore-title-line-2 {
        font-size:
            clamp(
                50px,
                16vw,
                72px
            );
    }


    .netmore-dark-copy {
        width:
            calc(
                100% - 28px
            );
    }


    .netmore-dark-word {
        font-size:
            clamp(
                38px,
                13vw,
                60px
            );
    }


    .netmore-dark-description {
        width: 84%;

        font-size: 12px;
    }
}


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

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

    .netmore-showcase *,
    .netmore-showcase *::before,
    .netmore-showcase *::after {
        animation: none !important;

        transition: none !important;
    }
}