/* =========================================================
   MOBILE — GATE PROPORTIONS
   ========================================================= */

@media (max-width: 600px) {

    .gate-area {
        width: 52vw;
        height: 32vh;

        left: 50%;
        bottom: 23%;

        transform:
            translateX(-50%)
            scale(1);

        transform-origin: center bottom;
    }
    .gate-wall {
        width: 100%;
        height: 50%;
    }
    
.traveler {
    left: 50%;
    bottom: calc(25% - 75px);
    transform-origin: bottom center;
}

    .gate-area.threshold-receding {

        transform:
            translateX(-50%)
            translateY(-50%)
            translateZ(1000px)
            scale(0.72);

        opacity: 0.9;

        filter: brightness(0.92);
    }
    .garden-world {
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
    }
    .distant-trees {
        width: 150%;
        left: 50%;
    }
    .shrub-cluster {
        width: 40%;
        height: 15%;

        bottom: 15%;
    }
    .shrub-left-1 {
        left: -20%;
        bottom: 12%;

        width: 210px;
        height: 205px;

        transform:
            translateZ(-90px)
            scale(0.78);
    }

    .shrub-left-2 {
        left: -18%;
        bottom: 22%;

        width: 210px;
        height: 140px;

        transform:
            translateZ(-115px)
            scale(0.70);
    }

    .shrub-left-2b {
        left:0%;
        bottom: 15%;

        width: 220px;
        height: 155px;

        transform:
            translateZ(-115px)
            scale(0.68);
    }

    .shrub-left-3 {
        left: 0%;
        bottom: 25%;

        width: 150px;
        height: 255px;

        transform:
            translateZ(-145px)
            scale(0.60);
    }

    .shrub-left-3b {
        left: 0%;
        bottom: 19%;

        width: 210px;
        height: 300px;

        transform:
            translateZ(-145px)
            scale(0.58);
    }

    .shrub-left-3c {
        left: 2%;
        bottom: 32%;

        width: 230px;
        height: 160px;

        transform:
            translateZ(-145px)
            scale(0.58);
    }

    .shrub-left-3d {
        left: 5%;
        bottom: 28%;

        width: 175px;
        height: 205px;

        transform:
            translateZ(-145px)
            scale(0.58);
    }

    .shrub-left-3e {
        left: -8%;
        bottom: 11%;

        width: 265px;
        height: 430px;

        transform:
            translateZ(-160px)
            scale(0.54);
    }

    .shrub-left-4 {
        left: 4%;
        bottom: 25%;

        width: 220px;
        height: 140px;

        transform:
            translateZ(-170px)
            scale(0.52);
    }

    .shrub-left-5 {
        left: 5%;
        bottom: 27%;

        width: 155px;
        height: 165px;

        transform:
            translateZ(-125px)
            scale(0.65);
    }

    .shrub-left-5b {
        left: -10%;
        bottom: 25%;

        width: 180px;
        height: 165px;

        transform:
            translateZ(-125px)
            scale(0.65);
    }

    .shrub-left-6 {
        left: -7%;
        bottom: 25%;

        width: 240px;
        height: 170px;

        transform:
            translateZ(-125px)
            scale(0.60);
    }

    .shrub-left-6b {
        left: 3%;
        bottom: 22%;

        width: 200px;
        height: 130px;

        transform:
            translateZ(-125px)
            scale(0.60);
    }


    /* =========================================
       RIGHT VEGETATION
       ========================================= */

    .shrub-right-1 {
        right: -19%;
        bottom: 10%;

        width: 210px;
        height: 215px;

        transform:
            translateZ(-90px)
            scale(0.76);
    }

    .shrub-right-2 {
        right: -2%;
        bottom: 15%;

        width: 190px;
        height: 220px;

        transform:
            translateZ(-115px)
            scale(0.70);
    }

    .shrub-right-2b {
        right: -20%;
        bottom: 10%;

        width: 240px;
        height: 370px;

        transform:
            translateZ(-120px)
            scale(0.68);
    }

    .shrub-right-3 {
        right: 3%;
        bottom: 20%;

        width: 210px;
        height: 300px;

        transform:
            translateZ(-145px)
            scale(0.58);
    }

    .shrub-right-3b {
        right: -4%;
        bottom: 14%;

        width: 265px;
        height: 360px;

        transform:
            translateZ(-145px)
            scale(0.58);
    }

    .shrub-right-3c {
        right: -22%;
        bottom: 14%;

        width: 280px;
        height: 300px;

        transform:
            translateZ(-145px)
            scale(0.58);
    }

    .shrub-right-3d {
        right: 2%;
        bottom: 29%;

        width: 125px;
        height: 140px;

        transform:
            translateZ(-145px)
            scale(0.58);
    }

    .shrub-right-3e {
        right: 8%;
        bottom: 28%;

        width: 150px;
        height: 225px;

        transform:
            translateZ(-160px)
            scale(0.54);
    }

    .shrub-right-4 {
        right: 4%;
        bottom: 30%;

        width: 120px;
        height: 165px;

        transform:
            translateZ(-175px)
            scale(0.50);
    }

    .shrub-right-5 {
        right: 8%;
        bottom: 15%;

        width: 105px;
        height: 190px;

        transform:
            translateZ(-125px)
            scale(0.65);
    }

    .shrub-right-5b {
        right: 2%;
        bottom: 25%;

        width: 210px;
        height: 155px;

        transform:
            translateZ(-125px)
            scale(0.65);
    }

    .shrub-right-6 {
        right: 7%;
        bottom: 20%;

        width: 200px;
        height: 255px;

        transform:
            translateZ(-145px)
            scale(0.58);
    }

    .shrub-right-6b {
        right: 10%;
        bottom: 26%;

        width: 210px;
        height: 140px;

        transform:
            translateZ(-145px)
            scale(0.58);
    }

    .shrub-cloud-cluster {
        width: 48%;
        height: 15%;

        bottom: 3%;
    }

    .shrub-left {
        left: -10%;
    }

    .shrub-right {
        right: -10%;
    }
    

    .cloud-puff.puff-1 {
        width: 100px;
        height: 100px;
    }
    .cloud-puff.puff-2 {
        width: 80px;
        height: 150px;
    }
    .cloud-puff.puff-3 {
        width: 100px;
        height: 150px;
    }

    .cloud-puff.puff-4 {
        width: 110px;
        height: 120px;
    }

    .cloud-puff.puff-5 {
        width: 100px;
        height: 130px;
    }

    .cloud-puff.puff-6 {
        width: 80px;
        height: 140px;
    }

    .cloud-puff.puff-7 {
        width: 90px;
        height: 150px;
    }

    .cloud-puff.puff-8 {
        width: 80px;
        height: 160px;
    }
    .garden-path {
        width: 50%;
        left: 50%;
        bottom:-4%;

        /* Keep the path visually centered */
        transform-origin: bottom center;
    }
    .garden-path::before {
        opacity: 0.75;
    }
     .garden-figure {
        transform: scale(0.78);
        transform-origin: bottom center;
    }

    .garden .approach-m2 {
        background-position: 65% 50% !important;
    }

    .garden.moksh-m2-traveler-arrival .traveler:not(.traveler-reader) {
        animation:
            mokshM2TravelerArrivalMobile
            6s
            cubic-bezier(.45, 0, .2, 1)
            forwards;
    }
    
    .garden.moksh-m2-traveler-arrival .traveler:not(.traveler-reader) {
        animation-name: mokshM2TravelerArrivalMobile !important;
    }

    @keyframes mokshM2TravelerArrivalMobile {

        0% {
            opacity: 0;
            transform:
                translateX(100%)
                translateY(-30px)
                rotate(1deg)
                scale(.96);
        }

        /* LAND — bottom center */
        45% {
            opacity: .94;
            transform:
                translateX(-50%)
                translateY(-50px)
                rotate(0deg)
                scale(.96);
        }

        /* Brief pause after landing */
        58% {
            opacity: .94;
            transform:
                translateX(-50%)
                translateY(-50px)
                rotate(0deg)
                scale(.96);
        }

        /* Start walking left */
        72% {
            transform:
                translateX(-85%)
                translateY(-58px)
                rotate(-3deg)
                scale(.96);
        }

        /* Finish on left */
        100% {
            opacity: .94;
            transform:
                translateX(-145%)
                translateY(-65px)
                rotate(0deg)
                scale(.96);
        }
    }
    
    .garden .approach-m2 .moksh-discovery-m2 {
        left: 88%;
        top: 56%;
    }
    
    
}

/* =========================================================
   MOBILE READER — CLOSE BUTTON
   Keep it above every Reader layer
   ========================================================= */

@media (max-width: 768px) {
 .moksh-reader-close {
        top: 30px;
        right: 20px;

        width: 26px;
        height: 26px;

        z-index: 9999 !important;

        pointer-events: auto !important;

        touch-action: manipulation;
    }

    

    .moksh-reader-panel::before,
    .moksh-reader-panel::after {
        pointer-events: none;
    }
}