/* ==========================================================
   MINECRFTMODS V27
   Premium visual / scroll / sliders / drawer
   ========================================================== */

:root{
    --v27-bg:#070a0f;
    --v27-panel:rgba(10,14,21,.76);
    --v27-panel2:rgba(17,22,31,.82);
    --v27-line:rgba(255,255,255,.09);
    --v27-text:#fff;
    --v27-muted:#aeb6c5;
    --v27-purple:#a56bff;
    --v27-blue:#45a9ff;
    --v27-green:#8ee36c;
}


/* ==========================================================
   GLOBAL SCROLL — NEVER LOCK NORMAL PAGE
   ========================================================== */

html{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    min-height:0 !important;
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden !important;
    overflow-y:auto !important;

    min-height:0 !important;
    height:auto !important;

    overscroll-behavior-y:auto;
    touch-action:pan-y;

    -webkit-overflow-scrolling:touch;
}

body:not(.v27-drawer-open){
    overflow-y:auto !important;
    touch-action:pan-y !important;
}


/* ==========================================================
   REAL UPLOADED BACKGROUND
   ========================================================== */

.v27-real-bg{
    position:fixed;

    inset:0;

    z-index:-20;

    pointer-events:none;

    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;

    transform:scale(1.025);

    filter:
        saturate(.85)
        contrast(1.03);

    will-change:transform;
}

.v27-real-bg::after{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(4,8,13,.54),
            rgba(4,8,13,.72) 55%,
            rgba(4,8,13,.88)
        ),
        radial-gradient(
            circle at 78% 12%,
            rgba(141,93,255,.17),
            transparent 34%
        ),
        radial-gradient(
            circle at 16% 30%,
            rgba(61,191,255,.10),
            transparent 32%
        );
}


/* ==========================================================
   HEADER — GLASS ONLY AFTER SCROLL
   ========================================================== */

header,
.siteHeader,
.topbar,
.header{
    transition:
        background .28s ease,
        backdrop-filter .28s ease,
        box-shadow .28s ease,
        border-color .28s ease !important;
}

body.v27-scrolled header,
body.v27-scrolled .siteHeader,
body.v27-scrolled .topbar,
body.v27-scrolled .header{
    background:
        rgba(5,9,14,.76) !important;

    backdrop-filter:
        blur(22px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(145%);

    border-bottom:
        1px solid rgba(255,255,255,.08) !important;

    box-shadow:
        0 16px 45px rgba(0,0,0,.28);
}


/* ==========================================================
   HOME HERO — CONTROLLED LAYOUT
   ========================================================== */

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

    width:min(
        1380px,
        calc(100% - 64px)
    ) !important;

    min-height:560px !important;
    height:auto !important;

    margin:
        30px auto 34px !important;

    padding:0 !important;

    overflow:hidden !important;

    border-radius:
        30px !important;

    border:
        1px solid rgba(190,165,255,.15) !important;

    background:
        linear-gradient(
            118deg,
            rgba(8,13,20,.88),
            rgba(10,13,22,.81) 58%,
            rgba(26,20,46,.68)
        ) !important;

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

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

    box-shadow:
        0 38px 100px rgba(0,0,0,.40),
        inset 0 1px 0 rgba(255,255,255,.06);
}


/* subtle animated holographic light */

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

    position:absolute;

    width:520px;
    height:520px;

    right:-180px;
    top:-210px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(159,101,255,.28),
            rgba(72,151,255,.08) 46%,
            transparent 70%
        );

    filter:blur(8px);

    animation:
        v27Orb 9s
        ease-in-out
        infinite alternate;

    pointer-events:none;
}

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

    position:absolute;

    inset:0;

    pointer-events:none;

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

    background-size:
        46px 46px;

    mask-image:
        linear-gradient(
            to right,
            #000,
            transparent 92%
        );

    opacity:.54;
}


@keyframes v27Orb{

    from{
        transform:
            translate3d(-12px,8px,0)
            scale(.94);
    }

    to{
        transform:
            translate3d(26px,-16px,0)
            scale(1.08);
    }

}


/* remove old hero generated graphics */

body.v27-home .v14-hero-scene,
body.v27-home .v13-scene,
body.v27-home .v12-home-scene,
body.v27-home .mc-home-block-scene,
body.v27-home .v10-blocks,
body.v27-home .heroVisual,
body.v27-home .heroArtwork,
body.v27-home .heroArt,
body.v27-home .heroDecoration,
body.v27-home .heroDecor{
    display:none !important;
}


/* our controlled content */

.v27-hero-content{
    position:relative;

    z-index:5;

    width:min(
        820px,
        65%
    );

    min-height:560px;

    padding:
        68px 40px 68px 72px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;
}

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

    margin:
        0 0 26px !important;

    transform:none !important;
}

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

    margin:0 !important;

    max-width:
        800px !important;

    font-size:
        clamp(
            64px,
            5.7vw,
            96px
        ) !important;

    line-height:
        .93 !important;

    letter-spacing:
        -4px !important;

    transform:none !important;
}

.v27-hero-content h1 span{
    color:
        var(--v27-purple) !important;

    -webkit-text-fill-color:
        var(--v27-purple) !important;

    background:none !important;
}

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

    margin:
        28px 0 0 !important;

    max-width:
        720px !important;

    color:
        #bbc2ce !important;

    font-size:
        18px !important;

    line-height:
        1.7 !important;

    transform:none !important;
}

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

    margin:
        32px 0 0 !important;

    transform:none !important;
}


/* ==========================================================
   REAL LOGO 3D HERO MOTION
   ========================================================== */

.v27-hero-motion{
    --rx:0deg;
    --ry:0deg;

    position:absolute;

    right:6%;
    top:50%;

    width:350px;
    height:350px;

    z-index:4;

    transform:
        translateY(-50%)
        perspective(1000px)
        rotateX(var(--rx))
        rotateY(var(--ry));

    transform-style:
        preserve-3d;

    pointer-events:none;

    transition:
        transform .18s ease-out;
}

.v27-motion-ring{
    position:absolute;

    inset:28px;

    border-radius:50%;

    border:
        1px solid
        rgba(161,107,255,.23);

    box-shadow:
        inset 0 0 80px
        rgba(84,139,255,.08);

    animation:
        v27Ring 14s
        linear
        infinite;
}

.v27-motion-ring::before{
    content:"";

    position:absolute;

    inset:40px;

    border-radius:50%;

    border:
        1px dashed
        rgba(80,196,255,.18);
}

@keyframes v27Ring{

    to{
        transform:
            rotate(360deg);
    }

}


.v27-logo-float{
    position:absolute;

    width:92px;
    height:92px;

    padding:11px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            rgba(32,39,52,.90),
            rgba(10,13,19,.76)
        );

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

    box-shadow:
        0 24px 48px rgba(0,0,0,.40),
        inset 0 1px 0 rgba(255,255,255,.08);

    backdrop-filter:
        blur(14px);

    animation:
        v27Float
        6.5s
        ease-in-out
        infinite alternate;

    transform-style:
        preserve-3d;
}

.v27-logo-float img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    border-radius:17px;
}

.v27-logo-float:nth-child(2){
    left:25px;
    top:65px;

    transform:
        translateZ(55px)
        rotate(-7deg);
}

.v27-logo-float:nth-child(3){
    right:24px;
    top:35px;

    animation-delay:
        -2.4s;

    transform:
        translateZ(85px)
        rotate(6deg);
}

.v27-logo-float:nth-child(4){
    left:128px;
    bottom:25px;

    animation-delay:
        -4.1s;

    transform:
        translateZ(120px)
        rotate(3deg);
}

@keyframes v27Float{

    from{
        translate:
            0 5px;
    }

    to{
        translate:
            0 -18px;
    }

}


/* ==========================================================
   PREMIUM SEARCH
   ========================================================== */

body.v27-home input[type="search"],
body.v27-home .searchInput,
body.v27-home #searchInput{
    border:
        1px solid
        rgba(148,214,120,.20) !important;

    background:
        rgba(5,12,8,.76) !important;

    backdrop-filter:
        blur(16px);

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.22) !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

body.v27-home input[type="search"]:focus,
body.v27-home .searchInput:focus,
body.v27-home #searchInput:focus{
    border-color:
        rgba(166,107,255,.55) !important;

    box-shadow:
        0 0 0 4px
        rgba(166,107,255,.07),
        0 22px 55px
        rgba(0,0,0,.30) !important;
}


/* ==========================================================
   HORIZONTAL HOME SLIDERS
   ========================================================== */

.v27-slider-section{
    position:relative;

    overflow:visible !important;
}

.v27-home-track,
.v27-related-track{
    display:flex !important;

    grid-template-columns:
        none !important;

    gap:18px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    padding:
        6px 6px 18px !important;

    scroll-snap-type:
        x proximity;

    scroll-behavior:
        smooth;

    overscroll-behavior-inline:
        contain;

    scrollbar-width:
        none;

    -webkit-overflow-scrolling:
        touch;
}

.v27-home-track::-webkit-scrollbar,
.v27-related-track::-webkit-scrollbar{
    display:none;
}


.v27-home-track > *,
.v27-related-track > *{
    flex:
        0 0
        clamp(
            280px,
            31vw,
            390px
        ) !important;

    width:auto !important;

    max-width:none !important;

    scroll-snap-align:
        start;
}


/* navigation arrows */

.v27-slider-nav{
    position:absolute;

    right:0;
    top:18px;

    z-index:10;

    display:flex;

    gap:8px;
}

.v27-slider-btn{
    width:44px;
    height:44px;

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

    border-radius:14px;

    display:grid;

    place-items:center;

    color:#fff;

    background:
        rgba(10,14,21,.80);

    backdrop-filter:
        blur(14px);

    cursor:pointer;

    font-size:24px;

    transition:
        transform .18s ease,
        background .18s ease;
}

.v27-slider-btn:hover{
    transform:
        translateY(-2px);

    background:
        rgba(31,25,53,.93);
}


/* ==========================================================
   RELATED RESOURCES
   ========================================================== */

.fp-related.v27-related{
    display:block !important;

    visibility:visible !important;

    opacity:1 !important;

    position:relative !important;

    width:min(
        1200px,
        calc(100% - 40px)
    ) !important;

    height:auto !important;
    min-height:0 !important;

    margin:
        32px auto 28px !important;

    padding:
        26px !important;

    border-radius:
        24px;

    background:
        rgba(8,13,20,.73);

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

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 26px 70px
        rgba(0,0,0,.30);
}

.v27-related-head{
    display:flex;

    align-items:end;

    justify-content:space-between;

    gap:20px;

    margin-bottom:
        20px;
}

.v27-related-kicker{
    margin-bottom:
        4px;

    color:
        var(--v27-green);

    font-size:
        13px;

    font-weight:
        900;

    letter-spacing:
        1.7px;

    text-transform:
        uppercase;
}

.v27-related-title{
    margin:0;

    color:#fff;

    font-size:
        clamp(
            28px,
            4vw,
            40px
        );

    line-height:1;
}

.v27-related-card{
    display:flex;

    align-items:center;

    gap:15px;

    min-height:104px;

    padding:15px;

    border-radius:
        20px;

    color:#fff;

    text-decoration:none;

    background:
        linear-gradient(
            145deg,
            rgba(15,20,28,.97),
            rgba(9,13,19,.94)
        );

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

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.22);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.v27-related-card:hover{
    transform:
        translateY(-5px);

    border-color:
        rgba(167,108,255,.33);

    box-shadow:
        0 22px 45px
        rgba(0,0,0,.34);
}

.v27-related-card img{
    width:70px !important;
    height:70px !important;

    flex:0 0 70px;

    object-fit:cover !important;

    border-radius:
        16px !important;

    display:block !important;

    opacity:1 !important;

    visibility:visible !important;
}

.v27-related-card strong{
    display:block;

    margin-bottom:5px;

    font-size:
        17px;

    color:#fff;
}

.v27-related-card span{
    color:
        #8e97a6;

    font-size:
        14px;
}


/* ==========================================================
   DETAIL PAGE NATURAL HEIGHT
   ========================================================== */

body.v27-detail,
body.v27-detail main,
body.v27-detail .detailPage{
    height:auto !important;

    min-height:0 !important;

    max-height:none !important;

    padding-bottom:0 !important;

    margin-bottom:0 !important;
}

body.v27-detail footer,
body.v27-detail .fp-footer,
body.v27-detail .detailFooter,
body.v27-detail .resourceFooter,
body.v27-detail .pageEnd,
body.v27-detail .page-end,
body.v27-detail .bottomScene,
body.v27-detail .bottom-scene,
body.v27-detail .worldSpacer,
body.v27-detail .world-spacer,
body.v27-detail .detailSpacer,
body.v27-detail .detail-spacer{
    display:none !important;
}


/* old generated worlds MUST NOT create document height */

body.v27-detail .v10-world,
body.v27-detail .v11-world,
body.v27-detail .v12-world,
body.v27-detail .v13-world,
body.v27-detail .mc-detail-world{
    position:fixed !important;

    inset:0 !important;

    width:100vw !important;
    height:100vh !important;

    min-height:0 !important;
    max-height:100vh !important;

    margin:0 !important;
    padding:0 !important;

    pointer-events:none !important;

    overflow:hidden !important;

    z-index:-10 !important;
}


/* ==========================================================
   DRAWER REAL LOGOS + PREMIUM ANIMATION
   ========================================================== */

.mobileDrawer,
.navDrawer,
.drawer,
#mobileDrawer{
    will-change:
        transform,
        opacity;

    backface-visibility:
        hidden;

    -webkit-font-smoothing:
        antialiased;
}

body.v27-drawer-open{
    overflow:hidden !important;
}

.v27-drawer-icon-img{
    width:100% !important;
    height:100% !important;

    display:block !important;

    object-fit:cover !important;

    border-radius:13px;

    visibility:visible !important;

    opacity:1 !important;
}

@keyframes v27DrawerIn{

    0%{
        opacity:0;

        transform:
            translate3d(42px,0,0)
            scale(.985);
    }

    60%{
        opacity:1;

        transform:
            translate3d(-4px,0,0)
            scale(1);
    }

    100%{
        opacity:1;

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

}

.v27-drawer-animation{
    animation:
        v27DrawerIn
        .36s
        cubic-bezier(.18,.8,.2,1)
        both !important;
}


/* ==========================================================
   SCROLL TOP — HIDDEN BY DEFAULT
   ========================================================== */

.v27-scroll-top,
.v12-scrolltop,
.scrollTop,
.scroll-top,
.backToTop,
.back-to-top{
    position:fixed !important;

    right:22px !important;
    bottom:24px !important;

    z-index:99999 !important;

    width:52px !important;
    height:52px !important;

    display:grid !important;

    place-items:center !important;

    border-radius:
        16px !important;

    color:#fff !important;

    border:
        1px solid
        rgba(255,255,255,.10) !important;

    background:
        linear-gradient(
            135deg,
            rgba(145,84,255,.95),
            rgba(55,161,242,.95)
        ) !important;

    box-shadow:
        0 16px 40px
        rgba(47,85,210,.30);

    opacity:0 !important;

    visibility:hidden !important;

    pointer-events:none !important;

    transform:
        translateY(15px)
        scale(.92) !important;

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease !important;
}

body.v27-show-top
.v27-scroll-top,
body.v27-show-top
.v12-scrolltop,
body.v27-show-top
.scrollTop,
body.v27-show-top
.scroll-top,
body.v27-show-top
.backToTop,
body.v27-show-top
.back-to-top{
    opacity:1 !important;

    visibility:visible !important;

    pointer-events:auto !important;

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


/* ==========================================================
   CATEGORY PAGE
   ========================================================== */

.v27-category-page{
    width:min(
        1200px,
        calc(100% - 40px)
    );

    margin:
        52px auto;

    position:relative;

    z-index:2;
}

.v27-category-hero{
    padding:
        54px;

    border-radius:
        28px;

    background:
        linear-gradient(
            135deg,
            rgba(9,14,21,.86),
            rgba(20,16,35,.74)
        );

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

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.32);
}

.v27-category-hero h1{
    margin:
        0 0 12px;

    color:#fff;

    font-size:
        clamp(
            42px,
            7vw,
            74px
        );

    line-height:.95;

    letter-spacing:
        -2px;
}

.v27-category-hero p{
    margin:0;

    color:
        var(--v27-muted);

    font-size:
        17px;

    line-height:
        1.7;
}

.v27-category-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:18px;

    margin-top:
        26px;
}

.v27-category-card{
    display:flex;

    gap:18px;

    align-items:center;

    padding:
        20px;

    min-height:
        126px;

    text-decoration:none;

    color:#fff;

    border-radius:
        22px;

    background:
        rgba(9,14,21,.84);

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

    backdrop-filter:
        blur(15px);

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.v27-category-card:hover{
    transform:
        translateY(-5px);

    border-color:
        rgba(164,104,255,.36);
}

.v27-category-card img{
    width:82px;
    height:82px;

    border-radius:18px;

    object-fit:cover;
}

.v27-category-card h3{
    margin:
        0 0 7px;

    font-size:
        20px;
}

.v27-category-card p{
    margin:0;

    color:
        #929baa;
}


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

@media(max-width:760px){

    body.v27-home .hero{
        width:auto !important;

        min-height:0 !important;

        margin:
            18px 16px 26px !important;

        border-radius:
            24px !important;
    }


    .v27-hero-content{
        width:auto;

        min-height:0;

        padding:
            42px 24px 38px;

        justify-content:
            flex-start;
    }


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


    .v27-hero-content h1{
        font-size:
            clamp(
                43px,
                12.3vw,
                62px
            ) !important;

        line-height:
            .95 !important;

        letter-spacing:
            -2px !important;

        max-width:
            100% !important;
    }


    .v27-hero-content > p{
        margin-top:
            22px !important;

        font-size:
            16px !important;

        line-height:
            1.65 !important;
    }


    .v27-hero-content .heroActions{
        width:100%;

        margin-top:
            27px !important;
    }


    .v27-hero-content .heroActions > *{
        width:100%;
    }


    .v27-hero-motion{
        width:170px;
        height:170px;

        right:-40px;
        top:75px;

        opacity:.24;

        transform:
            perspective(800px)
            scale(.8);
    }


    .v27-logo-float{
        width:55px;
        height:55px;

        padding:6px;

        border-radius:16px;
    }


    .v27-motion-ring{
        inset:15px;
    }


    .v27-slider-nav{
        top:9px;
    }


    .v27-slider-btn{
        width:38px;
        height:38px;

        border-radius:12px;

        font-size:20px;
    }


    .v27-home-track > *,
    .v27-related-track > *{
        flex:
            0 0
            min(
                82vw,
                340px
            ) !important;
    }


    .fp-related.v27-related{
        width:
            calc(100% - 28px) !important;

        margin:
            22px auto 16px !important;

        padding:
            20px 15px !important;

        border-radius:
            22px;
    }


    .v27-related-head{
        padding-right:
            88px;
    }


    .v27-related-title{
        font-size:
            29px;
    }


    .v27-related-card{
        min-height:
            102px;
    }


    .v27-related-card img{
        width:67px !important;
        height:67px !important;

        flex-basis:
            67px;
    }


    .v27-scroll-top,
    .v12-scrolltop,
    .scrollTop,
    .scroll-top,
    .backToTop,
    .back-to-top{
        right:
            15px !important;

        bottom:
            18px !important;

        width:
            50px !important;

        height:
            50px !important;
    }


    .v27-category-page{
        width:
            calc(100% - 30px);

        margin:
            28px auto;
    }


    .v27-category-hero{
        padding:
            34px 24px;
    }


    .v27-category-grid{
        grid-template-columns:
            1fr;
    }

}


/* accessibility */

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

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}