/* =========================================================
   MINECRFTMODS MOTION WORLD V11
   LOW-LAG 3D / DEPTH / BLOCKWORLD
   ========================================================= */

:root{
    --mc-v11-purple:#9a67ff;
    --mc-v11-cyan:#48d9ff;
    --mc-v11-green:#62d889;
    --mc-v11-dark:#07090d;
}


/* =========================================================
   GLOBAL
   ========================================================= */

html{
    background:#07090d;
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden !important;
}

body.mc-motion-v11{
    position:relative;
    background:#07090d !important;
}


/* =========================================================
   HOME HERO — IMPORTANT LAYOUT FIX
   ========================================================= */

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

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

    overflow:hidden !important;

    isolation:isolate;

    padding:
        72px 72px !important;

    margin-top:
        34px !important;

    border-radius:
        26px !important;

    background:
        radial-gradient(
            550px circle at 84% 18%,
            rgba(146,91,255,.16),
            transparent 60%
        ),
        radial-gradient(
            450px circle at 78% 78%,
            rgba(62,203,255,.075),
            transparent 65%
        ),
        linear-gradient(
            145deg,
            #191d26,
            #0b0e13 68%
        ) !important;

    border:
        1px solid rgba(164,126,255,.17) !important;

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


/* Block wall */

body.mc-home-v11 .hero::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:-3;

    pointer-events:none;

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

    background-size:
        48px 48px;

    opacity:.7;
}


/* glow */

body.mc-home-v11 .hero::after{
    content:"";

    position:absolute;

    width:380px;
    height:380px;

    right:-80px;
    top:-100px;

    z-index:-2;

    pointer-events:none;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(155,101,255,.17),
            rgba(66,190,255,.07) 46%,
            transparent 72%
        );

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

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


@keyframes mcGlowFloat{

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

    to{
        transform:
            translate3d(20px,-10px,0)
            scale(1.05);
    }

}


/* =========================================================
   HOME 3D BLOCK SCENE
   ABSOLUTE = NEVER PUSHES CONTENT
   ========================================================= */

.mc-home-block-scene{
    position:absolute !important;

    right:5%;
    top:12%;

    width:320px;
    height:270px;

    z-index:1;

    pointer-events:none;

    perspective:900px;

    transform-style:preserve-3d;

    opacity:.72;
}


.mc-home-block{
    --block:#303640;
    --ore:#9769ff;

    position:absolute;

    width:70px;
    height:70px;

    border-radius:6px;

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

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

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

    transform-style:preserve-3d;

    animation:
        mcCubeFloat 7s ease-in-out infinite alternate;

    will-change:transform;
}


.mc-home-block::before{
    content:"";

    position:absolute;

    left:11px;
    right:11px;

    height:15px;

    top:-14px;

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

    transform:
        skewX(-45deg);

    opacity:.8;
}


.mc-home-block::after{
    content:"";

    position:absolute;

    inset:17px;

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

    opacity:.72;

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


.mc-home-block:nth-child(1){
    left:10px;
    top:25px;

    --block:#303541;
    --ore:#9665ff;
}


.mc-home-block:nth-child(2){
    left:115px;
    top:82px;

    --block:#26373d;
    --ore:#48d9ff;

    animation-delay:-2s;
}


.mc-home-block:nth-child(3){
    left:210px;
    top:18px;

    --block:#342d3e;
    --ore:#be83ff;

    animation-delay:-4s;
}


.mc-home-block:nth-child(4){
    left:75px;
    top:175px;

    --block:#28372d;
    --ore:#62d889;

    animation-delay:-1s;
}


@keyframes mcCubeFloat{

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

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

}


/* =========================================================
   HOME TEXT DEPTH
   ========================================================= */

body.mc-home-v11 .hero > *:not(.mc-home-block-scene){
    position:relative;
    z-index:5;
}


body.mc-home-v11 .hero h1{
    max-width:760px !important;

    text-shadow:
        0 5px 20px rgba(0,0,0,.4) !important;
}


body.mc-home-v11 .hero h1 span{
    background:none !important;

    color:#a878ff !important;
    -webkit-text-fill-color:#a878ff !important;

    text-shadow:
        0 0 28px rgba(162,113,255,.20) !important;
}


/* =========================================================
   DETAIL PAGE WORLD BACKGROUND
   ========================================================= */

.mc-detail-world{
    position:fixed;

    inset:0;

    z-index:-5;

    pointer-events:none;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            color-mix(in srgb,var(--accent,#8e69ff) 8%,#0a1320) 0%,
            #07101a 32%,
            #080b0d 68%,
            #050708 100%
        );
}


/* Minecraft-like sky light */

.mc-detail-sky{
    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at 76% 12%,
            rgba(255,255,255,.10),
            transparent 12%
        ),
        radial-gradient(
            circle at 20% 15%,
            color-mix(in srgb,var(--accent,#8e69ff) 14%,transparent),
            transparent 28%
        );

    opacity:.8;
}


/* pixel clouds */

.mc-cloud{
    position:absolute;

    width:180px;
    height:38px;

    border-radius:4px;

    background:
        rgba(210,225,240,.055);

    box-shadow:
        45px -14px 0 rgba(210,225,240,.04),
        90px 4px 0 rgba(210,225,240,.045);

    animation:
        mcCloudMove 34s linear infinite;

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


.mc-cloud.c1{
    left:-220px;
    top:12%;
}


.mc-cloud.c2{
    left:-400px;
    top:29%;

    animation-duration:46s;
    animation-delay:-17s;

    opacity:.55;
}


@keyframes mcCloudMove{

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

}


/* =========================================================
   DETAIL FLOATING BLOCKS
   ========================================================= */

.mc-detail-block{
    --block:#2b3138;
    --accentBlock:var(--accent,#956aff);

    position:absolute;

    width:58px;
    height:58px;

    border-radius:5px;

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

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

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

    opacity:.38;

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

    will-change:transform;
}


.mc-detail-block::after{
    content:"";

    position:absolute;

    inset:14px;

    background:
        linear-gradient(
            135deg,
            transparent 0 37%,
            var(--accentBlock) 37% 54%,
            transparent 54%
        );

    opacity:.65;
}


.mc-detail-block.b1{
    left:7%;
    top:18%;

    animation-delay:-1s;
}


.mc-detail-block.b2{
    right:8%;
    top:31%;

    width:74px;
    height:74px;

    animation-delay:-4s;
}


.mc-detail-block.b3{
    left:16%;
    top:62%;

    width:42px;
    height:42px;

    animation-delay:-6s;
}


.mc-detail-block.b4{
    right:14%;
    top:74%;

    width:48px;
    height:48px;

    animation-delay:-2s;
}


.mc-detail-block.b5{
    left:52%;
    top:86%;

    width:38px;
    height:38px;

    animation-delay:-5s;
}


@keyframes mcDetailBlockFloat{

    from{
        transform:
            translate3d(0,0,0)
            rotate(0deg);
    }

    to{
        transform:
            translate3d(0,-18px,10px)
            rotate(4deg);
    }

}


/* =========================================================
   DETAIL PANELS ADD DEPTH
   ========================================================= */

body.mc-detail-v11 .detailHero,
body.mc-detail-v11 .panel{

    backdrop-filter:
        blur(4px);

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

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


body.mc-detail-v11 .detailHero{
    box-shadow:
        0 30px 85px rgba(0,0,0,.48),
        0 0 65px
        color-mix(in srgb,var(--accent,#926cff) 8%,transparent),
        inset 0 1px 0 rgba(255,255,255,.04) !important;
}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.mc-v11-reveal{
    opacity:0;

    transform:
        translate3d(0,24px,0)
        scale(.988);

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


.mc-v11-reveal.visible{
    opacity:1;

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


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

@media(max-width:700px){

    /* HOME HERO COMPACT */

    body.mc-home-v11 .hero{
        margin:
            22px 20px 0 !important;

        padding:
            34px 24px 38px !important;

        border-radius:
            20px !important;

        min-height:
            0 !important;

        height:
            auto !important;
    }


    /* ABSOLUTE DECORATION - NO LAYOUT GAP */

    .mc-home-block-scene{
        right:-30px !important;
        top:16px !important;

        width:210px !important;
        height:150px !important;

        transform:
            scale(.64)
            rotate(-4deg) !important;

        transform-origin:
            top right !important;

        opacity:
            .42 !important;
    }


    .mc-home-block{
        width:58px !important;
        height:58px !important;

        animation-duration:
            10s !important;
    }


    /* keep content starting near top */

    body.mc-home-v11 .heroLabel{
        margin-top:
            84px !important;
    }


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

        font-size:
            clamp(43px,12vw,62px) !important;

        line-height:
            .95 !important;

        letter-spacing:
            -2px !important;
    }


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

        font-size:
            16px !important;

        line-height:
            1.58 !important;
    }


    /* DETAIL BACKGROUND LIGHTER */

    .mc-detail-world{
        opacity:.72;
    }


    .mc-cloud{
        display:none;
    }


    .mc-detail-block{
        opacity:.20;

        animation-duration:
            13s !important;
    }


    .mc-detail-block.b1{
        left:-15px;
    }


    .mc-detail-block.b2{
        right:-22px;
    }


    .mc-detail-block.b3,
    .mc-detail-block.b5{
        display:none;
    }


    body.mc-detail-v11 .detailHero,
    body.mc-detail-v11 .panel{

        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }


    .mc-v11-reveal{
        transform:
            translate3d(0,16px,0);
    }

}


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

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

    *,
    *::before,
    *::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }

}