/* =========================================================
   MINECRFTMODS V22
   ONE FINAL LAYER
   ========================================================= */

:root{
    --v22-bg:
        url("/assets/backgrounds/minecraft-world.webp");

    --v22-accent:
        #9c6cff;

    --v22-accent2:
        #3fa8ff;

    --v22-panel:
        rgba(8,11,16,.78);

    --v22-border:
        rgba(255,255,255,.09);
}


html{
    background:#05070a !important;
    scroll-behavior:auto !important;
}


body{
    overflow-x:hidden !important;
}


/* =========================================================
   REAL PAGE BACKGROUND
   ========================================================= */

body.v22-page{
    position:relative !important;

    isolation:isolate !important;

    background:
        #05070a !important;
}


body.v22-page::before{
    content:"";

    position:fixed;

    inset:0;

    z-index:-3;

    pointer-events:none;

    background-image:

        linear-gradient(
            180deg,
            rgba(5,8,12,.54) 0%,
            rgba(5,8,12,.68) 38%,
            rgba(4,6,9,.86) 78%,
            rgba(4,6,9,.94) 100%
        ),

        var(--v22-bg);

    background-size:
        cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;

    transform:
        scale(1.015);

    filter:
        saturate(.95)
        contrast(1.04);
}


body.v22-page::after{
    content:"";

    position:fixed;

    inset:0;

    z-index:-2;

    pointer-events:none;

    background:

        radial-gradient(
            circle at 14% 18%,
            color-mix(
                in srgb,
                var(--v22-accent) 13%,
                transparent
            ),
            transparent 34%
        ),

        radial-gradient(
            circle at 86% 24%,
            color-mix(
                in srgb,
                var(--v22-accent2) 12%,
                transparent
            ),
            transparent 34%
        );
}


/* =========================================================
   REMOVE OLD GENERATED FAKE WORLDS
   ========================================================= */

.v10-blocks,
.v11-world,
.v12-world,
.v12-home-scene,
.v13-world,
.v13-scene,
.v14-hero-scene,
.mc-detail-world,
.mc-home-block-scene,
.v12-world-block,
.v13-world-block,
.mc-detail-block,
.v12-block-floor,
.v13-ground,
.mc-block-floor{
    display:none !important;
}


/* =========================================================
   GLASS HEADER
   ========================================================= */

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


body.v22-scrolled header,
body.v22-scrolled .topbar,
body.v22-scrolled .siteHeader{

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

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

    backdrop-filter:
        blur(18px)
        saturate(145%) !important;

    -webkit-backdrop-filter:
        blur(18px)
        saturate(145%) !important;

    box-shadow:
        0 14px 40px rgba(0,0,0,.32) !important;
}


/* =========================================================
   PREMIUM GLASS SURFACES
   ========================================================= */

body.v22-page .hero,
body.v22-page .detailHero,
body.v22-page .panel,
body.v22-page .resourceCard,
body.v22-page .recommendCard{

    background:
        linear-gradient(
            145deg,
            rgba(15,19,27,.80),
            rgba(5,8,13,.88)
        ) !important;

    border:
        1px solid var(--v22-border) !important;

    box-shadow:

        0 28px 70px rgba(0,0,0,.32),

        inset 0 1px 0
        rgba(255,255,255,.04) !important;

    backdrop-filter:
        blur(11px)
        saturate(125%) !important;

    -webkit-backdrop-filter:
        blur(11px)
        saturate(125%) !important;
}


/* subtle accent edge */

body.v22-detail .detailHero{
    box-shadow:

        0 28px 75px
        rgba(0,0,0,.36),

        0 0 0 1px
        color-mix(
            in srgb,
            var(--v22-accent) 12%,
            transparent
        ),

        inset 0 1px 0
        rgba(255,255,255,.04) !important;
}


/* =========================================================
   HOME HERO
   ========================================================= */

body.v22-home .hero{

    min-height:0 !important;

    height:auto !important;

    overflow:hidden !important;
}


body.v22-home .v14-hero-content{

    min-height:0 !important;

    height:auto !important;
}


/* =========================================================
   DETAIL PAGES — REMOVE EXTRA HEIGHT
   ========================================================= */

body.v22-detail,
body.v22-detail main,
body.v22-detail .detailPage{

    min-height:0 !important;

    height:auto !important;

    max-height:none !important;

    padding-bottom:0 !important;

    margin-bottom:0 !important;
}


/* no breadcrumb */

body.v22-detail .fp-breadcrumb,
body.v22-detail .breadcrumb,
body.v22-detail .breadcrumbs,
body.v22-detail .detailBreadcrumb,
body.v22-detail .detail-breadcrumb{

    display:none !important;
}


/* old floating Home */

body.v22-detail .premiumPageHome,
body.v22-detail .floatingHome,
body.v22-detail .premiumHomeButton{

    display:none !important;
}


/* legacy fake endings */

body.v22-detail .detailFooter,
body.v22-detail .detail-footer,
body.v22-detail .resourceFooter,
body.v22-detail .resource-footer,
body.v22-detail .worldSpacer,
body.v22-detail .world-spacer,
body.v22-detail .detailSpacer,
body.v22-detail .detail-spacer,
body.v22-detail .bottomScene,
body.v22-detail .bottom-scene,
body.v22-detail .pageEnd,
body.v22-detail .page-end{

    display:none !important;

    height:0 !important;

    min-height:0 !important;

    margin:0 !important;

    padding:0 !important;
}


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

body.v22-detail .fp-related{

    width:min(
        1340px,
        calc(100% - 44px)
    ) !important;

    height:auto !important;

    min-height:0 !important;

    margin:
        30px auto 26px !important;

    padding:0 !important;
}


body.v22-detail .fp-related-head{

    margin-bottom:
        18px !important;
}


body.v22-detail .fp-related-grid{

    display:flex !important;

    grid-template-columns:none !important;

    gap:14px !important;

    overflow-x:auto !important;

    overflow-y:hidden !important;

    scroll-snap-type:
        x mandatory;

    overscroll-behavior-inline:
        contain;

    -webkit-overflow-scrolling:
        touch;

    scrollbar-width:
        none;

    height:auto !important;

    min-height:0 !important;

    padding:
        4px 2px 14px !important;
}


body.v22-detail
.fp-related-grid::-webkit-scrollbar{

    display:none;
}


body.v22-detail .fp-related-card{

    flex:
        0 0 310px !important;

    width:
        310px !important;

    min-width:
        310px !important;

    max-width:
        310px !important;

    height:
        94px !important;

    min-height:
        94px !important;

    scroll-snap-align:
        start;

    display:flex !important;

    align-items:center !important;

    gap:
        15px !important;

    padding:
        14px !important;

    border-radius:
        17px !important;

    background:
        rgba(6,9,14,.86) !important;

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

    box-shadow:
        0 15px 34px
        rgba(0,0,0,.27) !important;

    backdrop-filter:
        blur(12px);
}


body.v22-detail
.fp-related-card img{

    width:
        64px !important;

    height:
        64px !important;

    min-width:
        64px !important;

    object-fit:
        cover;

    border-radius:
        14px !important;
}


/* =========================================================
   FOOTER = PHYSICAL PAGE END
   ========================================================= */

body.v22-detail .fp-footer{

    min-height:0 !important;

    height:auto !important;

    margin:
        0 !important;

    padding:
        36px 26px 42px !important;

    background:
        rgba(3,5,8,.91) !important;

    backdrop-filter:
        blur(13px);

    -webkit-backdrop-filter:
        blur(13px);
}


/* =========================================================
   DOWNLOAD PROGRESS MODAL
   ========================================================= */

.v22-download-overlay{

    position:fixed;

    inset:0;

    z-index:999999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:22px;

    background:
        rgba(2,4,7,.72);

    backdrop-filter:
        blur(18px);

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

    opacity:0;

    animation:
        v22OverlayIn .24s ease forwards;
}


.v22-download-box{

    width:min(
        470px,
        100%
    );

    padding:
        30px;

    border-radius:
        24px;

    background:

        radial-gradient(
            circle at 90% 0,
            color-mix(
                in srgb,
                var(--v22-accent) 17%,
                transparent
            ),
            transparent 42%
        ),

        rgba(10,14,20,.95);

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

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.52);

    transform:
        translateY(20px)
        scale(.97);

    animation:
        v22BoxIn .34s
        cubic-bezier(.18,.8,.25,1)
        forwards;
}


.v22-download-title{

    margin:0 0 8px;

    color:#fff;

    font-size:
        24px;

    font-weight:
        850;
}


.v22-download-status{

    color:
        #aeb5c0;

    margin-bottom:
        26px;

    line-height:
        1.5;
}


.v22-percent{

    display:flex;

    justify-content:
        space-between;

    align-items:center;

    margin-bottom:
        10px;

    color:
        white;

    font-weight:
        800;
}


.v22-percent strong{

    color:
        var(--v22-accent);
}


.v22-progress-track{

    height:
        12px;

    overflow:hidden;

    border-radius:
        999px;

    background:
        rgba(255,255,255,.08);

    box-shadow:
        inset 0 2px 6px
        rgba(0,0,0,.30);
}


.v22-progress-bar{

    width:0%;

    height:100%;

    border-radius:
        inherit;

    background:

        linear-gradient(
            90deg,
            var(--v22-accent),
            var(--v22-accent2)
        );

    box-shadow:
        0 0 20px
        color-mix(
            in srgb,
            var(--v22-accent) 35%,
            transparent
        );
}


.v22-download-note{

    margin-top:
        16px;

    color:
        #747c88;

    font-size:
        13px;
}


/* =========================================================
   PAGE TRANSITIONS
   ========================================================= */

body.v22-page{

    animation:
        v22PageEnter .42s
        cubic-bezier(.2,.76,.22,1)
        both;
}


body.v22-page.v22-leaving{

    animation:
        v22PageLeave .30s ease
        forwards !important;
}


@keyframes v22PageEnter{

    from{
        opacity:0;

        transform:
            translate3d(0,15px,0);

        filter:
            blur(3px);
    }

    to{
        opacity:1;

        transform:
            translate3d(0,0,0);

        filter:
            blur(0);
    }

}


@keyframes v22PageLeave{

    to{
        opacity:0;

        transform:
            translate3d(18px,0,0);

        filter:
            blur(4px);
    }

}


@keyframes v22OverlayIn{

    to{
        opacity:1;
    }

}


@keyframes v22BoxIn{

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

}


/* =========================================================
   DRAWER ANIMATION EVERY OPEN
   ========================================================= */

.v22-drawer-opening{

    animation:
        v22DrawerOpen .44s
        cubic-bezier(.16,.78,.22,1)
        both !important;

    transform-origin:
        right center;
}


@keyframes v22DrawerOpen{

    0%{
        transform:
            translate3d(105%,0,0)
            scale(.985);

        opacity:0;
    }

    72%{
        transform:
            translate3d(-7px,0,0)
            scale(1);

        opacity:1;
    }

    100%{
        transform:
            translate3d(0,0,0)
            scale(1);

        opacity:1;
    }

}


/* =========================================================
   SCROLL TOP BUTTON
   ========================================================= */

.v12-scrolltop,
.scrollTop,
.scroll-top{

    opacity:0 !important;

    visibility:hidden !important;

    transform:
        translateY(15px) !important;

    pointer-events:none !important;

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


body.v22-show-top
.v12-scrolltop,

body.v22-show-top
.scrollTop,

body.v22-show-top
.scroll-top{

    opacity:1 !important;

    visibility:visible !important;

    transform:
        translateY(0) !important;

    pointer-events:auto !important;
}


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

@media(max-width:700px){

    body.v22-home .hero{

        margin:
            30px 20px 0 !important;

        border-radius:
            24px !important;
    }


    body.v22-home
    .v14-hero-content{

        padding:
            58px 28px 56px !important;
    }


    body.v22-home
    .v14-hero-content
    .heroLabel{

        margin-bottom:
            30px !important;
    }


    body.v22-home
    .v14-hero-content h1{

        font-size:
            clamp(
                42px,
                11vw,
                57px
            ) !important;

        line-height:
            .99 !important;

        letter-spacing:
            -1.8px !important;
    }


    body.v22-home
    .v14-hero-content > p{

        margin-top:
            34px !important;

        font-size:
            17px !important;

        line-height:
            1.74 !important;
    }


    body.v22-home
    .v14-hero-content
    .heroActions{

        margin-top:
            40px !important;

        gap:
            16px !important;
    }


    body.v22-home
    .fp-filter-wrap{

        margin-top:
            62px !important;
    }


    body.v22-detail
    .fp-related{

        width:auto !important;

        margin:
            28px 0 24px !important;

        padding-left:
            20px !important;
    }


    body.v22-detail
    .fp-related-head{

        padding-right:
            20px !important;
    }


    body.v22-detail
    .fp-related-grid{

        padding-right:
            20px !important;
    }


    body.v22-detail
    .fp-related-card{

        flex-basis:
            278px !important;

        width:
            278px !important;

        min-width:
            278px !important;

        max-width:
            278px !important;

        height:
            102px !important;
    }


    body.v22-detail
    .fp-footer{

        padding:
            30px 22px 36px !important;
    }


    .v22-download-box{

        padding:
            25px 22px;

        border-radius:
            21px;
    }

}


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

    *,
    *::before,
    *::after{

        animation-duration:
            .001ms !important;

        transition-duration:
            .001ms !important;
    }

}