/* =========================================================
   MINECRFTMODS — PREMIUM MOTION WORLD V12
   FINAL OVERRIDE
   ========================================================= */

:root{
    --v12-purple:#9d6cff;
    --v12-cyan:#47d8ff;
    --v12-green:#62d889;
    --v12-dark:#07090d;
}


/* =========================================================
   HOME HERO — FIX GIANT GAP
   ========================================================= */

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

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

    overflow:hidden !important;

    margin:
        24px auto 0 !important;

    padding:
        58px 64px 62px !important;

    border-radius:
        24px !important;

    isolation:isolate;

    background:
        radial-gradient(
            420px circle at 84% 18%,
            rgba(151,95,255,.15),
            transparent 63%
        ),
        radial-gradient(
            360px circle at 72% 78%,
            rgba(64,202,255,.07),
            transparent 65%
        ),
        linear-gradient(
            145deg,
            #191e27,
            #0a0d12 68%
        ) !important;

    border:
        1px solid rgba(157,108,255,.16) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 30px 85px rgba(0,0,0,.40) !important;
}


/* Kill old spacing from V10/V11 */

body.mc-home-v12 .heroLabel{
    margin-top:
        0 !important;
}


body.mc-home-v12 .v10-blocks,
body.mc-home-v12 .mc-home-block-scene{
    position:absolute !important;

    float:none !important;

    margin:0 !important;

    pointer-events:none !important;
}


/* =========================================================
   HOME 3D SCENE
   NEVER PARTICIPATES IN LAYOUT
   ========================================================= */

.v12-home-scene{
    position:absolute;

    right:5%;
    top:7%;

    width:320px;
    height:240px;

    z-index:1;

    pointer-events:none;

    perspective:1000px;

    transform-style:preserve-3d;

    opacity:.72;
}


.v12-cube{
    --cube:#303640;
    --ore:#9d6cff;

    position:absolute;

    width:68px;
    height:68px;

    border-radius:5px;

    background:
        linear-gradient(
            145deg,
            color-mix(in srgb,var(--cube) 77%,white),
            var(--cube)
        );

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

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

    animation:
        v12CubeFloat 8s ease-in-out infinite alternate;

    will-change:transform;
}


.v12-cube::before{
    content:"";

    position:absolute;

    left:10px;
    right:10px;

    height:15px;

    top:-14px;

    background:
        color-mix(in srgb,var(--cube) 75%,white);

    transform:
        skewX(-45deg);

    opacity:.78;
}


.v12-cube::after{
    content:"";

    position:absolute;

    inset:16px;

    background:
        linear-gradient(
            135deg,
            transparent 0 36%,
            var(--ore) 36% 53%,
            transparent 53%
        );

    opacity:.76;

    filter:
        drop-shadow(
            0 0 8px
            color-mix(in srgb,var(--ore) 48%,transparent)
        );
}


.v12-cube:nth-child(1){
    left:10px;
    top:22px;

    --ore:#9d6cff;
}


.v12-cube:nth-child(2){
    left:112px;
    top:76px;

    --cube:#27363c;
    --ore:#47d8ff;

    animation-delay:-2s;
}


.v12-cube:nth-child(3){
    left:210px;
    top:16px;

    --cube:#352e3d;
    --ore:#bc80ff;

    animation-delay:-4s;
}


.v12-cube:nth-child(4){
    left:72px;
    top:164px;

    --cube:#29372e;
    --ore:#62d889;

    animation-delay:-1s;
}


@keyframes v12CubeFloat{

    from{
        transform:
            translate3d(0,0,0)
            rotateX(5deg)
            rotateY(-7deg);
    }

    to{
        transform:
            translate3d(0,-12px,18px)
            rotateX(-4deg)
            rotateY(6deg);
    }

}


/* hero content stays above scene */

body.mc-home-v12 .hero > *:not(.v12-home-scene){
    position:relative;

    z-index:5;
}


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

@media(max-width:700px){

    body.mc-home-v12 .hero{
        min-height:0 !important;

        height:auto !important;

        margin:
            20px 18px 0 !important;

        padding:
            30px 22px 34px !important;

        border-radius:
            20px !important;
    }


    /*
     Scene floats top-right.
     It DOES NOT create 300-800px empty space.
    */

    .v12-home-scene{
        right:-26px;

        top:4px;

        width:175px;
        height:112px;

        transform:
            scale(.62)
            rotate(-5deg);

        transform-origin:
            top right;

        opacity:.43;
    }


    .v12-cube{
        animation-duration:
            11s;
    }


    body.mc-home-v12 .heroLabel{
        margin-top:
            78px !important;

        position:relative;

        z-index:5;
    }


    body.mc-home-v12 .hero h1{
        margin-top:
            20px !important;

        font-size:
            clamp(42px,12vw,60px) !important;

        line-height:
            .96 !important;

        letter-spacing:
            -2px !important;
    }


    body.mc-home-v12 .hero p{
        margin-top:
            22px !important;

        line-height:
            1.58 !important;
    }

}


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

.v12-scrolltop{
    opacity:0 !important;

    visibility:hidden !important;

    pointer-events:none !important;

    transform:
        translate3d(0,18px,0)
        scale(.88) !important;

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


.v12-scrolltop.v12-show{
    opacity:1 !important;

    visibility:visible !important;

    pointer-events:auto !important;

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


/* =========================================================
   MOBILE DRAWER — PREMIUM
   ========================================================= */

.mobileDrawer{
    background:
        linear-gradient(
            180deg,
            rgba(18,22,28,.985),
            rgba(7,10,13,.995)
        ) !important;

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

    box-shadow:
        -30px 0 85px rgba(0,0,0,.55) !important;
}


.drawerLogoImage{
    width:42px !important;
    height:42px !important;

    display:block;

    object-fit:cover;

    border-radius:10px;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.08),
        0 8px 22px rgba(0,0,0,.35);
}


/* category icon slot */

.drawerIcon{
    width:50px !important;
    height:50px !important;

    padding:4px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    overflow:hidden;

    border-radius:11px !important;

    background:
        linear-gradient(
            145deg,
            #272d35,
            #15191e
        ) !important;

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


.drawerIcon img{
    width:100% !important;
    height:100% !important;

    object-fit:cover;

    border-radius:8px;
}


/* =========================================================
   DETAIL PAGES — 3D MINECRAFT WORLD
   ========================================================= */

body.mc-detail-v12{
    position:relative;

    background:
        transparent !important;
}


body.mc-detail-v12 main,
body.mc-detail-v12 .detailPage{
    position:relative;

    z-index:2;

    background:
        transparent !important;
}


.v12-world{
    position:fixed;

    inset:0;

    z-index:-1;

    overflow:hidden;

    pointer-events:none;

    perspective:1000px;

    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--accent,#916cff) 9%,
                #102033
            ) 0%,

            #0a1521 30%,

            #080c10 67%,

            #050708 100%
        );
}


/* sky glow */

.v12-sky-glow{
    position:absolute;

    width:600px;
    height:600px;

    top:-260px;
    right:-160px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            color-mix(
                in srgb,
                var(--accent,#916cff) 18%,
                transparent
            ),
            transparent 68%
        );

    animation:
        v12SkyGlow 12s ease-in-out infinite alternate;

    will-change:transform;
}


@keyframes v12SkyGlow{

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

    to{
        transform:
            translate3d(20px,-12px,0)
            scale(1.04);
    }

}


/* pixel clouds */

.v12-cloud{
    position:absolute;

    width:170px;
    height:34px;

    border-radius:3px;

    background:
        rgba(220,232,245,.055);

    box-shadow:
        42px -14px 0 rgba(220,232,245,.04),
        86px 2px 0 rgba(220,232,245,.042);

    animation:
        v12Cloud 40s linear infinite;

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


.v12-cloud.one{
    left:-260px;
    top:13%;
}


.v12-cloud.two{
    left:-450px;
    top:32%;

    opacity:.55;

    animation-duration:
        52s;

    animation-delay:
        -20s;
}


@keyframes v12Cloud{

    to{
        transform:
            translate3d(
                calc(100vw + 750px),
                0,
                0
            );
    }

}


/* =========================================================
   DETAIL 3D BLOCKS
   ========================================================= */

.v12-world-block{
    --block:#2d343b;

    position:absolute;

    width:72px;
    height:72px;

    border-radius:4px;

    transform-style:preserve-3d;

    background:
        linear-gradient(
            145deg,
            color-mix(in srgb,var(--block) 78%,white),
            var(--block)
        );

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

    box-shadow:
        0 20px 50px rgba(0,0,0,.30);

    opacity:.42;

    animation:
        v12WorldBlock 11s ease-in-out infinite alternate;

    will-change:transform;
}


.v12-world-block::before{
    content:"";

    position:absolute;

    left:10px;
    right:10px;

    height:16px;

    top:-15px;

    transform:
        skewX(-45deg);

    background:
        color-mix(in srgb,var(--block) 74%,white);

    opacity:.76;
}


.v12-world-block::after{
    content:"";

    position:absolute;

    inset:17px;

    background:
        linear-gradient(
            135deg,
            transparent 0 36%,
            var(--accent,#916cff) 36% 54%,
            transparent 54%
        );

    opacity:.70;

    filter:
        drop-shadow(
            0 0 8px
            color-mix(
                in srgb,
                var(--accent,#916cff) 48%,
                transparent
            )
        );
}


.v12-world-block.b1{
    left:5%;
    top:16%;
}


.v12-world-block.b2{
    right:5%;
    top:26%;

    width:92px;
    height:92px;

    animation-delay:-3s;
}


.v12-world-block.b3{
    left:10%;
    top:55%;

    width:54px;
    height:54px;

    animation-delay:-6s;
}


.v12-world-block.b4{
    right:14%;
    top:69%;

    width:65px;
    height:65px;

    animation-delay:-8s;
}


.v12-world-block.b5{
    left:44%;
    top:82%;

    width:48px;
    height:48px;

    animation-delay:-5s;
}


.v12-world-block.b6{
    right:38%;
    top:43%;

    width:42px;
    height:42px;

    animation-delay:-7s;
}


@keyframes v12WorldBlock{

    from{
        transform:
            translate3d(0,0,-20px)
            rotateX(5deg)
            rotateY(-5deg);
    }

    to{
        transform:
            translate3d(0,-20px,30px)
            rotateX(-5deg)
            rotateY(7deg);
    }

}


/* =========================================================
   MINECRAFT BLOCK FLOOR / CAVE
   ========================================================= */

.v12-block-floor{
    position:absolute;

    left:-5%;
    right:-5%;

    bottom:-50px;

    height:230px;

    opacity:.28;

    background:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            180deg,
            #252c31,
            #0c1013
        );

    background-size:
        48px 48px,
        48px 48px,
        auto;

    transform:
        perspective(700px)
        rotateX(62deg)
        scale(1.2);

    transform-origin:
        bottom center;
}


/* transparent premium cards allow world to show */

body.mc-detail-v12 .detailHero,
body.mc-detail-v12 .panel{
    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--accent,#916cff) 7%,
                rgba(20,23,30,.91)
            ),
            rgba(8,10,14,.94)
        ) !important;

    backdrop-filter:
        blur(5px);

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

    box-shadow:
        0 28px 75px rgba(0,0,0,.43),
        0 0 55px
        color-mix(
            in srgb,
            var(--accent,#916cff) 7%,
            transparent
        ),
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}


/* =========================================================
   PREMIUM MOTION REVEAL
   ========================================================= */

.v12-reveal{
    opacity:0;

    transform:
        translate3d(0,20px,0)
        scale(.99);

    transition:
        opacity .55s cubic-bezier(.2,.75,.2,1),
        transform .55s cubic-bezier(.2,.75,.2,1);
}


.v12-reveal.v12-visible{
    opacity:1;

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


/* =========================================================
   DETAIL MOBILE PERFORMANCE
   ========================================================= */

@media(max-width:700px){

    .v12-world{
        perspective:none;
    }


    .v12-cloud{
        display:none;
    }


    .v12-world-block{
        opacity:.22;

        animation-duration:
            14s;
    }


    .v12-world-block.b3,
    .v12-world-block.b5,
    .v12-world-block.b6{
        display:none;
    }


    .v12-world-block.b1{
        left:-28px;
    }


    .v12-world-block.b2{
        right:-32px;
    }


    body.mc-detail-v12 .detailHero,
    body.mc-detail-v12 .panel{
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }


    .v12-block-floor{
        opacity:.16;
    }

}


/* =========================================================
   ACCESSIBILITY / PERFORMANCE
   ========================================================= */

*{
    -webkit-tap-highlight-color:
        transparent;
}


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

    *,
    *::before,
    *::after{
        animation-duration:
            .001ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .001ms !important;
    }

}