/* ==========================================================
   MINECRFTMODS V28
   HOME HERO / SEARCH / SINGLE SCROLL-TOP / PAGE TRANSITION
   ========================================================== */

html,
body{
    overflow-x:hidden !important;
}


/* ==========================================================
   HOME BACKGROUND
   ========================================================== */

body.v28-home .v27-real-bg{
    background-image:
        url("/assets/backgrounds/minecraft-world-home.webp") !important;

    background-position:
        center center !important;

    background-size:
        cover !important;

    filter:
        saturate(.87)
        contrast(1.04)
        brightness(.82) !important;
}


/* ==========================================================
   HOME HERO — HARD RESET OF OLD DIMENSIONS
   ========================================================== */

body.v28-home .hero{
    position:relative !important;

    box-sizing:border-box !important;

    width:
        min(
            1420px,
            calc(100% - 72px)
        ) !important;

    height:
        500px !important;

    min-height:
        500px !important;

    max-height:
        500px !important;

    margin:
        28px auto 34px !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    isolation:isolate;

    border-radius:
        30px !important;

    border:
        1px solid
        rgba(176,150,255,.18) !important;

    background:
        linear-gradient(
            112deg,
            rgba(7,12,19,.91) 0%,
            rgba(10,15,24,.87) 52%,
            rgba(24,18,43,.84) 100%
        ) !important;

    backdrop-filter:
        blur(19px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(19px)
        saturate(135%);

    box-shadow:
        0 34px 90px
        rgba(0,0,0,.38),
        inset 0 1px 0
        rgba(255,255,255,.065) !important;
}


/* kill old hero geometry */

body.v28-home .hero > *,
body.v28-home .v27-hero-content{
    min-height:
        0 !important;

    max-height:
        none !important;
}


body.v28-home .hero::before{
    content:"";

    position:absolute;

    width:480px;
    height:480px;

    right:-115px;
    top:-185px;

    z-index:-1;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(145,87,255,.24),
            rgba(68,142,255,.10) 45%,
            transparent 72%
        );

    filter:
        blur(8px);

    animation:
        v28HeroGlow 8s
        ease-in-out
        infinite alternate;
}


body.v28-home .hero::after{
    content:"";

    position:absolute;

    inset:0;

    z-index:-2;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(255,255,255,.014) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;

    opacity:.42;

    pointer-events:none;
}


@keyframes v28HeroGlow{

    from{
        transform:
            translate3d(-18px,10px,0)
            scale(.96);
    }

    to{
        transform:
            translate3d(18px,-14px,0)
            scale(1.07);
    }

}


/* ==========================================================
   HERO TEXT
   ========================================================== */

body.v28-home .v27-hero-content{
    position:relative !important;

    z-index:5 !important;

    box-sizing:border-box !important;

    width:
        min(
            790px,
            61%
        ) !important;

    height:
        500px !important;

    min-height:
        0 !important;

    padding:
        52px 28px 48px 66px !important;

    margin:0 !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:flex-start !important;

    justify-content:center !important;
}


body.v28-home .v27-hero-content .heroLabel{
    position:static !important;

    transform:none !important;

    margin:
        0 0 22px !important;
}


body.v28-home .v27-hero-content h1{
    position:static !important;

    width:auto !important;

    max-width:
        730px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    transform:
        none !important;

    font-size:
        clamp(
            58px,
            5vw,
            82px
        ) !important;

    line-height:
        .92 !important;

    letter-spacing:
        -3.5px !important;
}


body.v28-home .v27-hero-content > p{
    position:static !important;

    max-width:
        690px !important;

    margin:
        23px 0 0 !important;

    padding:0 !important;

    transform:none !important;

    font-size:
        17px !important;

    line-height:
        1.62 !important;

    color:
        #b8c0cc !important;
}


body.v28-home .v27-hero-content .heroActions{
    position:static !important;

    margin:
        27px 0 0 !important;

    padding:
        0 !important;

    transform:
        none !important;
}


/* ==========================================================
   HERO 3D LOGO AREA
   ========================================================== */

body.v28-home .v27-hero-motion{
    position:absolute !important;

    width:
        330px !important;

    height:
        330px !important;

    right:
        5.5% !important;

    top:
        50% !important;

    opacity:
        1 !important;

    z-index:
        4 !important;

    transform:
        translateY(-50%)
        perspective(1000px)
        rotateX(var(--rx,0deg))
        rotateY(var(--ry,0deg)) !important;

    pointer-events:
        none !important;
}


/* ==========================================================
   PREMIUM MINECRAFT-BLOCK SEARCH
   ========================================================== */

body.v28-home .v28-search-shell{
    position:relative;

    box-sizing:border-box;

    width:
        min(
            1460px,
            calc(100% - 76px)
        );

    min-height:
        76px;

    margin:
        24px auto 46px;

    padding:
        3px;

    border-radius:
        20px;

    overflow:hidden;

    isolation:isolate;

    background:
        linear-gradient(
            115deg,
            rgba(121,75,255,.68),
            rgba(46,172,255,.42),
            rgba(120,220,102,.38)
        );

    box-shadow:
        0 24px 65px rgba(0,0,0,.30);

    animation:
        v28SearchFloat
        5s ease-in-out
        infinite alternate;
}


body.v28-home .v28-search-shell::before{
    content:"";

    position:absolute;

    inset:0;

    z-index:-2;

    background:
        linear-gradient(
            90deg,
            rgba(164,107,255,.55),
            transparent 30%,
            rgba(68,169,255,.38) 65%,
            rgba(112,214,102,.34)
        );

    background-size:
        220% 100%;

    animation:
        v28SearchFlow
        7s linear infinite;
}


body.v28-home .v28-search-shell::after{
    content:"";

    position:absolute;

    inset:3px;

    z-index:-1;

    border-radius:
        17px;

    background:
        linear-gradient(
            115deg,
            rgba(4,10,8,.95),
            rgba(8,14,16,.92)
        );
}


@keyframes v28SearchFlow{

    from{
        background-position:
            0% 50%;
    }

    to{
        background-position:
            200% 50%;
    }

}


@keyframes v28SearchFloat{

    from{
        transform:
            translateY(0);
    }

    to{
        transform:
            translateY(-2px);
    }

}


body.v28-home .v28-search-shell .v28-search-pixels{
    position:absolute;

    right:25px;

    top:50%;

    width:9px;
    height:9px;

    transform:
        translateY(-50%);

    background:
        rgba(137,221,110,.82);

    box-shadow:
        -20px -13px 0 rgba(68,171,255,.55),
        -41px 10px 0 rgba(159,100,255,.60),
        -64px -8px 0 rgba(255,255,255,.16);

    pointer-events:none;

    animation:
        v28Pixels
        2.8s ease-in-out
        infinite alternate;
}


@keyframes v28Pixels{

    to{
        opacity:.48;

        transform:
            translateY(-50%)
            translateX(-7px);
    }

}


body.v28-home .v28-search-shell input[type="search"],
body.v28-home .v28-search-shell input{
    box-sizing:border-box !important;

    width:
        100% !important;

    min-height:
        70px !important;

    margin:
        0 !important;

    padding:
        0 110px 0 62px !important;

    border:
        0 !important;

    outline:
        0 !important;

    border-radius:
        17px !important;

    background:
        transparent !important;

    color:
        #fff !important;

    font-size:
        17px !important;

    box-shadow:
        none !important;
}


body.v28-home .v28-search-shell input::placeholder{
    color:
        #808996 !important;

    opacity:1;
}


body.v28-home .v28-search-shell:focus-within{
    box-shadow:
        0 0 0 4px
        rgba(159,101,255,.08),
        0 28px 70px
        rgba(0,0,0,.36);
}


/* ==========================================================
   REMOVE ALL LEGACY SCROLL-TOP BUTTONS
   ========================================================== */

.v12-scrolltop,
.v27-scroll-top,
.scrollTop,
.scroll-top,
.backToTop,
.back-to-top,
[data-scroll-top]{
    display:
        none !important;
}


/* ==========================================================
   ONE AND ONLY SCROLL TOP
   ========================================================== */

#v28ScrollTop{
    position:fixed;

    right:
        22px;

    bottom:
        22px;

    z-index:
        999999;

    width:
        54px;

    height:
        54px;

    padding:0;

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

    border-radius:
        17px;

    display:grid;

    place-items:center;

    color:#fff;

    font-size:
        24px;

    line-height:1;

    cursor:pointer;

    background:
        linear-gradient(
            135deg,
            #945eff,
            #3fa7f6
        );

    box-shadow:
        0 16px 38px
        rgba(65,98,230,.32),
        inset 0 1px 0
        rgba(255,255,255,.20);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

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

    transition:
        opacity .24s ease,
        visibility .24s ease,
        transform .24s
        cubic-bezier(.2,.8,.2,1);
}


body.v28-top-visible
#v28ScrollTop{
    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

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


#v28ScrollTop:hover{
    transform:
        translateY(-3px)
        scale(1.03);
}


/* ==========================================================
   DETAIL BACK TRANSITION
   ========================================================== */

body.v28-detail{
    transition:
        opacity .24s ease,
        transform .24s ease,
        filter .24s ease;
}


body.v28-detail.v28-leaving{
    opacity:
        0;

    transform:
        translate3d(0,10px,0)
        scale(.992);

    filter:
        blur(4px);
}


body.v28-detail.v28-enter{
    animation:
        v28Enter
        .30s
        cubic-bezier(.2,.8,.2,1)
        both;
}


@keyframes v28Enter{

    from{
        opacity:0;

        transform:
            translate3d(0,8px,0)
            scale(.994);
    }

    to{
        opacity:1;

        transform:
            translate3d(0,0,0)
            scale(1);
    }

}


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

@media(max-width:760px){

    body.v28-home .hero{
        width:
            calc(100% - 30px) !important;

        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            none !important;

        margin:
            18px auto 26px !important;

        border-radius:
            25px !important;
    }


    body.v28-home .v27-hero-content{
        width:
            100% !important;

        height:
            auto !important;

        min-height:
            0 !important;

        padding:
            38px 24px 34px !important;

        justify-content:
            flex-start !important;
    }


    body.v28-home .v27-hero-content .heroLabel{
        margin-bottom:
            21px !important;
    }


    body.v28-home .v27-hero-content h1{
        max-width:
            100% !important;

        font-size:
            clamp(
                44px,
                12.4vw,
                57px
            ) !important;

        line-height:
            .94 !important;

        letter-spacing:
            -2.2px !important;
    }


    body.v28-home .v27-hero-content > p{
        max-width:
            100% !important;

        margin-top:
            23px !important;

        font-size:
            16px !important;

        line-height:
            1.58 !important;
    }


    body.v28-home .v27-hero-content .heroActions{
        width:
            100% !important;

        margin-top:
            27px !important;
    }


    body.v28-home .v27-hero-content .heroActions > *{
        width:
            100% !important;
    }


    /* logos become decorative, not layout content */

    body.v28-home .v27-hero-motion{
        width:
            160px !important;

        height:
            160px !important;

        right:
            -42px !important;

        top:
            150px !important;

        opacity:
            .22 !important;

        transform:
            perspective(800px)
            scale(.80) !important;

        z-index:
            1 !important;
    }


    body.v28-home .v27-hero-content{
        z-index:
            5 !important;
    }


    body.v28-home .v28-search-shell{
        width:
            calc(100% - 30px);

        min-height:
            66px;

        margin:
            18px auto 34px;

        border-radius:
            18px;
    }


    body.v28-home .v28-search-shell::after{
        border-radius:
            15px;
    }


    body.v28-home .v28-search-shell input[type="search"],
    body.v28-home .v28-search-shell input{
        min-height:
            60px !important;

        padding:
            0 64px 0 48px !important;

        font-size:
            16px !important;

        border-radius:
            15px !important;
    }


    body.v28-home .v28-search-shell .v28-search-pixels{
        right:
            19px;

        transform:
            translateY(-50%)
            scale(.78);
    }


    #v28ScrollTop{
        right:
            15px;

        bottom:
            18px;

        width:
            50px;

        height:
            50px;

        border-radius:
            15px;
    }

}


/* ==========================================================
   SMALL PHONES
   ========================================================== */

@media(max-width:390px){

    body.v28-home .v27-hero-content{
        padding:
            32px 20px 30px !important;
    }


    body.v28-home .v27-hero-content h1{
        font-size:
            42px !important;

        letter-spacing:
            -1.8px !important;
    }


    body.v28-home .v27-hero-content > p{
        font-size:
            15px !important;
    }

}


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

@media(min-width:1500px){

    body.v28-home .hero{
        height:
            520px !important;

        min-height:
            520px !important;

        max-height:
            520px !important;
    }


    body.v28-home .v27-hero-content{
        height:
            520px !important;
    }

}