/* =========================================================
   MOKSH — RETURNING VISITOR
   M1 EXACT RETURN POSITION
   ========================================================= */

.garden.returning-visitor .traveler {
    transform:
        translateX(calc(-50% - 60px))
        translateY(-85px)
        scale(1.10);

    opacity: 0.98;

    filter: none;

    transition: none;
}

/* =========================================================
   RETURNING VISITOR — SHOW M1 DIRECTLY
   ========================================================= */

.garden.returning-visitor .moksh-approach {
    opacity: 1;
}

.garden.returning-visitor .approach-shot-1,
.garden.returning-visitor .approach-shot-2,
.garden.returning-visitor .approach-shot-3 {
    opacity: 0;
}

.garden.returning-visitor .approach-m1 {
    opacity: 1;

    transform:
        scale(1);

    transition:
        none;
}
/* =========================================================
   RETURNING VISITOR — HIDE FIRST-VISIT MESSAGE
   KEEP MOKSH TITLE
   ========================================================= */

body.returning-visitor .entrance-message .eyebrow,
body.returning-visitor .entrance-message .message,
body.returning-visitor .entrance-message .enter-garden,
body.returning-visitor .entrance-message .manifesto-link,
body.returning-visitor .entrance-message .title {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
}

/* =========================================================
   M1 — BEYOND THE GATE DISCOVERY
   ========================================================= */

.moksh-discovery {
    position: absolute;

    left: 50%;
    top: 58%;

    width: 38px;
    height: 38px;

    padding: 0;

    transform:
        translate(-50%, -50%);

    border: 1px solid rgba(252, 251, 249, 0.28);
    border-radius: 50%;

    background:
        rgba(7, 29, 18, 0.18);

    color:
        rgba(246, 207, 118, 0.82);

    cursor: pointer;

    z-index: 30;

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

    backdrop-filter: blur(3px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease,
        background 0.8s ease,
        border-color 0.8s ease;
}


.moksh-discovery-symbol {
    font-size: 15px;
    line-height: 1;

    opacity: 0.82;

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


.moksh-discovery:hover {
    background:
        rgba(10, 24, 17, 0.30);

    border-color:
        rgba(241, 226, 7, 0.52);

    transform:
        translate(-50%, -50%)
        scale(1.08);
}


.moksh-discovery:hover .moksh-discovery-symbol {
    opacity: 1;

    transform:
        scale(1.08);
}
/* =========================================================
   M1 DISCOVERY — ENABLE INTERACTION
   ========================================================= */

.moksh-approach {
    pointer-events: none;
}

.moksh-approach .moksh-discovery {
    pointer-events: auto !important;
    cursor: pointer;
}
/* =========================================================
   RETURNING M1 — READER MODE
   MAIN TRAVELER HIDDEN
   READER TRAVELER VISIBLE
   ========================================================= */

.garden.returning-visitor.reader-open
.traveler:not(.traveler-reader) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.garden.reader-open .traveler:not(.traveler-reader) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* =========================================================
   M1 — DISCOVERY POINT VISIBILITY
   Only visible when M1 is active
   ========================================================= */

.moksh-discovery-m1 {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* ---------------------------------------------------------
   First arrival at M1
   --------------------------------------------------------- */

.garden.moksh-world-entry .moksh-discovery-m1 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* ---------------------------------------------------------
   Returning visitor at M1
   --------------------------------------------------------- */

.garden.returning-visitor .moksh-discovery-m1 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* =========================================================
   M2 — THE SACRED WATERS
   ========================================================= */

.approach-m2 {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(5, 24, 16, 0.08),
            rgba(5, 24, 16, 0.08)
        ),
        url("../assets/images/moksh-world-m2-grove.webp");

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

    transform: scale(1.025);
    transition:
        opacity 1.8s ease,
        visibility 1.8s ease,
        transform 8s ease;
}

/* =========================================================
   M2 — THE SACRED WATERS
   ========================================================= */

.garden .approach-m2 {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 5;

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

    transform: scale(1.025);
    transition:
        opacity 1.8s ease,
        visibility 1.8s ease,
        transform 8s ease;
}

.garden.moksh-m2-active .approach-m2 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
}

/* =========================================================
   M2 — HIDE M1-ONLY ELEMENTS
   ========================================================= */

.garden.moksh-m2-active .moksh-discovery-m1 {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* =========================================================
   M2 — THE SACRED WATERS
   Initial Traveler placement
   ========================================================= */

.garden.moksh-m2-active .traveler {
    left: 25%;
    bottom: 2%;

    transform:
        translateX(-50%)
        translateY(0)
        scale(0.88);

    opacity: 0.94;
    visibility: visible;
    pointer-events: none;

    filter:
        drop-shadow(0 0 2px rgba(2, 7, 5, 0.78))
        drop-shadow(0 4px 7px rgba(0, 0, 0, 0.22));

    transition:
        transform 4.8s cubic-bezier(.45, 0, .2, 1),
        opacity 2.4s ease;
}
/* =========================================================
   M2 — SHOW ONLY THE MAIN TRAVELER
   ========================================================= */

.garden.moksh-m2-active .traveler-reader {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* =========================================================
   M2 — SACRED WATERS TRANSITION
   ========================================================= */

/* M1 remains visible initially */
.garden.moksh-m2-transition .approach-m1 {
    opacity: 1;
    visibility: visible;
    transition: opacity 3.8s ease;
}

/* M1 fades away during the crossing */
.garden.moksh-m2-transition .approach-m1 {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* M2 begins hidden */
.garden .approach-m2 {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 5;

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

    transform: scale(1.025);

    transition:
        opacity 3.8s ease,
        visibility 3.8s ease,
        transform 8s ease;
}

/* M2 fades in during the transition */
.garden.moksh-m2-transition .approach-m2 {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transform: scale(1);
}

/* Main Traveler starts from the M1 settled position */
.garden.moksh-m2-transition
.traveler:not(.traveler-reader) {
    left: 50%;
    bottom: calc(25% - 75px);

    opacity: 0.94;
    visibility: visible;
    pointer-events: none;

    transform:
        translateX(calc(-50% - 60px))
        translateY(-85px)
        scale(1.10);

    transition:
        left 4.8s cubic-bezier(.45, 0, .2, 1),
        bottom 4.8s cubic-bezier(.45, 0, .2, 1),
        transform 4.8s cubic-bezier(.45, 0, .2, 1),
        opacity 2s ease;
}

/* Traveler reaches the M2 position */
.garden.moksh-m2-arrived
.traveler:not(.traveler-reader) {
    left: 25%;
    bottom: 2%;

    opacity: 0.94;

    transform:
        translateX(-50%)
        translateY(0)
        scale(0.88);

    transition:
        left 4.8s cubic-bezier(.45, 0, .2, 1),
        bottom 4.8s cubic-bezier(.45, 0, .2, 1),
        transform 4.8s cubic-bezier(.45, 0, .2, 1),
        opacity 2s ease;
}

/* Reader Traveler must remain hidden */
.garden.moksh-m2-transition .traveler-reader,
.garden.moksh-m2-arrived .traveler-reader {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Hide M1 discovery marker */
.garden.moksh-m2-transition .moksh-discovery-m1,
.garden.moksh-m2-arrived .moksh-discovery-m1 {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.garden.moksh-m1-walking .traveler:not(.traveler-reader) {
    animation: mokshM1CurvedWalk 10s cubic-bezier(.45, 0, .2, 1) forwards;
}

@keyframes mokshM1CurvedWalk {
    0% {
        transform:
            translateX(calc(-50% - 40px))
            translateY(-55px)
            rotate(0deg)
            scale(1.10);
    }

    45% {
        transform:
            translateX(calc(-50% - 95px))
            translateY(-80px)
            rotate(1deg)
            scale(1.05);
    }

    75% {
        transform:
            translateX(calc(-50% - 55px))
            translateY(-115px)
            rotate(4deg)
            scale(1);
    }

    100% {
        transform:
            translateX(calc(-50% + 30px))
            translateY(-155px)
            rotate(3deg)
            scale(0.95);
    }
}

/* Phase 2: fade out the completed M1 scene */
.garden.moksh-m1-fading .approach-m1,
.garden.moksh-m1-fading .traveler:not(.traveler-reader) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
        opacity 4s ease,
        visibility 4s ease;
}

.garden.moksh-m1-fading .gate-area {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transition:
        opacity 1.8s ease,
        visibility 1.8s ease;
}
.garden.moksh-m1-fading .garden-mist,
.garden.moksh-m1-fading .presence-light,
.garden.moksh-m1-fading .garden-atmosphere {
    opacity: 0 !important;
    visibility: hidden !important;
    transition:
    opacity 5.5s ease,
    visibility 0s linear 5.5s;
}
.garden.moksh-m1-fading .garden-path {
    opacity: 0 !important;
    visibility: hidden !important;
    transition:
        opacity 1.8s ease,
        visibility 1.8s ease;
}
.garden.moksh-m1-fading .garden-weather-clouds,
.garden.moksh-m1-fading .garden-monsoon-rain,
.garden.moksh-m1-fading .garden-monsoon-wetness,
.garden.moksh-m1-fading .monsoon-lantern-reflections {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transition:
    opacity 5.5s ease,
    visibility 0s linear 5.5s;
}

.garden.moksh-m1-fading .cloud-puff,
.garden.moksh-m1-fading .reflection {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transition:
    opacity 5.5s ease,
    visibility 0s linear 5.5s;
}

/* Allow Traveler to reappear during M2 arrival */
.garden.moksh-m2-traveler-arrival .traveler:not(.traveler-reader) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none;
    z-index: 200;
}

/* Phase 3: smoother M2 sanctuary reveal */
.garden .approach-m2 {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 5;
    transform: scale(1.015);

    transition:
        opacity 7s cubic-bezier(.25, .1, .25, 1),
        visibility 7s ease,
        transform 10s cubic-bezier(.25, .1, .25, 1);
}

.garden.moksh-m2-active .approach-m2 {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    transform: scale(1);
}

/* Phase 4: Traveler arrives in M2 */
.garden.moksh-m2-active .traveler-reader {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

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

@keyframes mokshM2TravelerArrival {
    0% {
        opacity: 0;
        transform:
            translateX(calc(-50% + 5px))
            translateY(-50px)
            rotate(0deg)
            scale(1.10);
    }

    35% {
        opacity: .35;
    }

    70% {
        opacity: .78;
    }

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

/* M2: three independent pond ripples */
.garden .approach-m2 .moksh-water-ripple {
    position: absolute;
    width: 180px;
    height: 80px;
    border: 2px solid rgba(180, 255, 240, .42);
    border-radius: 50%;
    z-index: 20;
    pointer-events: none;
    animation-duration: 6s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

.moksh-water-ripple-1 {
    left: 52%;
    top: 70%;
    animation-name: mokshWaterRippleOne;
}

.moksh-water-ripple-2 {
    left: 42%;
    top: 70%;
    animation-name: mokshWaterRippleTwo;
    animation-delay: 2s;
}

.moksh-water-ripple-3 {
    left: 60%;
    top: 72%;
    animation-name: mokshWaterRippleThree;
    animation-delay: 4s;
}

@keyframes mokshWaterRippleOne {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.55);
    }

    20% {
        opacity: .65;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

@keyframes mokshWaterRippleTwo {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.55);
    }

    20% {
        opacity: .65;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

@keyframes mokshWaterRippleThree {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.55);
    }

    20% {
        opacity: .65;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.5);
    }
}

.garden .approach-m2 .moksh-discovery-m2 {
        left: 72%;
        top: 55%;
    }

.moksh-article-image {
    display: block;
    width: 80%;
    max-width: 520px;
    margin: 0 auto 30px;
    border-radius: 12px;
}
/* =========================================
   M2 — FORWARD TRAVEL CONTROL
   ========================================= */

.garden .moksh-travel-nav .moksh-travel-forward {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 2s ease,
        transform 2s ease;

    transform: translateY(8px);
}

.garden.moksh-m2-forward-visible
.moksh-travel-forward {
    opacity: .9;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);

    animation: mokshTravelForwardPulse 4s ease-in-out infinite;
}

@keyframes mokshTravelForwardPulse {
    0%, 100% {
        opacity: .65;
    }

    50% {
        opacity: 1;
    }
}
/* =========================================
   MOKSH — TRAVEL NAV POSITION
   ========================================= */
.garden .moksh-travel-nav {
    position: absolute;
    left: 60% !important;
    bottom: 8%;

    transform: translateX(-50%) !important;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;

    z-index: 300;
}
/* =========================================
   MOKSH — TRAVEL BUTTON
   Green circular footprint button
   ========================================= */

.garden .moksh-travel-step {
    width: 50px;
    height: 45px;

    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(120, 220, 150, .45);

    background: rgba(20, 65, 38, .88);

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

    box-shadow:
        0 0 10px rgba(70, 210, 110, .20),
        inset 0 0 8px rgba(120, 220, 150, .08);

    cursor: pointer;
}

.garden .moksh-travel-step:hover {
    background: rgba(25, 80, 45, .95);
    box-shadow:
        0 0 14px rgba(70, 210, 110, .30);
}

.garden .moksh-footstep {
    width: 50px;
    height: 50px;
}

/* =========================================
   MOKSH — BACK NAVIGATION
   Hidden until M3
   ========================================= */

.garden .moksh-travel-back {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.garden.moksh-m3-active .moksh-travel-back {
    opacity: .9;
    visibility: visible;
    pointer-events: auto;
}

.garden .moksh-travel-step {
    position: relative;
}

.garden .moksh-travel-step::after {
    content: attr(aria-label);

    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;

    transform: translateX(-50%) translateY(4px);

    padding: 6px 10px;
    border-radius: 8px;

    background: rgba(15, 35, 25, .92);
    border: 1px solid rgba(120, 220, 150, .28);

    color: rgba(220, 245, 225, .9);
    font-size: 12px;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

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

.garden .moksh-travel-step:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* =========================================
   M2 → M3 — TRAVELER DEPARTURE
   ========================================= */

.garden.moksh-m2-to-m3-walking
.traveler:not(.traveler-reader) {
    animation:
        mokshM3WalkFromM2
        15s
        cubic-bezier(.45, 0, .2, 1)
        forwards;
}
.garden.moksh-m2-settled
.traveler:not(.traveler-reader) {
    opacity: .94 !important;
    visibility: visible !important;
    pointer-events: none;
    animation: none !important;
}

.garden.moksh-m2-settled
.traveler:not(.traveler-reader) {
    transform:
        translateX(-190%)
        translateY(-85px)
        rotate(0deg)
        scale(.96);
}

@media (max-width: 600px) {
    .garden.moksh-m2-settled
    .traveler:not(.traveler-reader) {
        transform:
            translateX(-145%)
            translateY(-65px)
            rotate(0deg)
            scale(.96);
    }
}

/* M3 Scene */
.garden .approach-m3 {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 6;

    background-image: url("../assets/images/moksh-m3-sacred-peepal.webp");
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;

    transform: scale(1.015);

    transition:
        opacity 7s cubic-bezier(.25, .1, .25, 1),
        visibility 7s ease,
        transform 10s cubic-bezier(.25, .1, .25, 1);
}
@media (max-width: 600px) {
    .garden .approach-m3 {
        background-image: url("../assets/images/moksh-m3-sacred-peepal-mobile.webp");
        background-position: 50% 50%;
        background-size: cover;
    }
}
.garden.moksh-m3-active .approach-m3 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
}

.garden.moksh-m3-walking .traveler:not(.traveler-reader) {
    animation: mokshM3WalkFromM2 15s cubic-bezier(.45, 0, .2, 1) forwards;
}

@keyframes mokshM3WalkFromM2 {

    0% {
        transform:
            translateX(-190%)
            translateY(-105px)
            rotate(0deg)
            scale(.99);
    }

    35% {
        transform:
            translateX(-320%)
            translateY(-130px)
            rotate(-3deg)
            scale(.96);
    }

    70% {
        transform:
            translateX(-370%)
            translateY(-170px)
            rotate(-6deg)
            scale(.95);
    }

    100% {
        transform:
            translateX(-570%)
            translateY(-300px)
            rotate(-4deg)
            scale(.94);
    }
}

.garden.moksh-m3-fading .approach-m2,
.garden.moksh-m3-fading .traveler:not(.traveler-reader) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transition:
        opacity 4.5s ease,
        visibility 4.5s ease;
}

.garden.moksh-m3-active .approach-m3 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
}

.garden.moksh-m3-traveler-arrival .traveler:not(.traveler-reader) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none;
    z-index: 200;
    left: 60% !important;

    animation: mokshM3TravelerArrival 4s ease-out forwards;
}

@keyframes mokshM3TravelerArrival {
    0% {
        opacity: 0;
        transform:
            translateX(-50%)
            translateY(-50px)
            scale(.96);
    }

    100% {
        opacity: .94;
        transform:
            translateX(-50%)
            translateY(-50px)
            scale(.96);
    }
}

/* =========================================
   M3 — TRAVELER WALK TO PEEPAL
   ========================================= */

.garden.moksh-m3-walking .traveler:not(.traveler-reader) {
    left: 60% !important;

    animation:
        mokshM3WalkToPeepal
        10s
        cubic-bezier(.45, 0, .2, 1)
        forwards;
}

@keyframes mokshM3WalkToPeepal {

    0% {
        transform:
            translateX(-50%)
            translateY(-50px)
            rotate(0deg)
            scale(.96);
    }

    25% {
        transform:
            translateX(-35%)
            translateY(-100px)
            rotate(-2deg)
            scale(.91);
    }

    50% {
        transform:
            translateX(-20%)
            translateY(-150px)
            rotate(2deg)
            scale(.86);
    }

    75% {
        transform:
            translateX(-5%)
            translateY(-200px)
            rotate(-2deg)
            scale(.81);
    }

    100% {
        transform:
            translateX(30%)
            translateY(-300px)
            rotate(0deg)
            scale(.76);
    }
}

/* =========================================
   M3 — FALLING LEAVES
   ========================================= */

.garden .approach-m3 .moksh-m3-leaves {
    position: absolute;
    inset: 0;
    z-index: 15;
    pointer-events: none;
    overflow: hidden;
}

.garden .approach-m3 .m3-leaf {
    position: absolute;
    top: -8%;
    width: 7px;
    height: 12px;

    background: rgba(185, 145, 75, .55);

    border-radius: 70% 20% 70% 20%;

    transform: rotate(35deg);

    animation-name: mokshM3LeafFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Individual leaves */

.m3-leaf-1 {
    left: 18%;
    animation-duration: 13s;
    animation-delay: -4s;
}

.m3-leaf-2 {
    left: 31%;
    width: 5px;
    height: 9px;
    animation-duration: 17s;
    animation-delay: -11s;
}

.m3-leaf-3 {
    left: 48%;
    animation-duration: 15s;
    animation-delay: -7s;
}

.m3-leaf-4 {
    left: 63%;
    width: 6px;
    height: 10px;
    animation-duration: 19s;
    animation-delay: -14s;
}

.m3-leaf-5 {
    left: 76%;
    width: 5px;
    height: 9px;
    animation-duration: 16s;
    animation-delay: -2s;
}

.m3-leaf-6 {
    left: 88%;
    width: 6px;
    height: 11px;
    animation-duration: 21s;
    animation-delay: -9s;
}

@keyframes mokshM3LeafFall {
    0% {
        transform:
            translate3d(0, -10vh, 0)
            rotate(25deg);
        opacity: 0;
    }

    12% {
        opacity: .65;
    }

    45% {
        transform:
            translate3d(35px, 45vh, 0)
            rotate(150deg);
    }

    75% {
        transform:
            translate3d(-25px, 75vh, 0)
            rotate(280deg);
    }

    100% {
        transform:
            translate3d(20px, 115vh, 0)
            rotate(390deg);
        opacity: 0;
    }
}

@media (max-width: 600px) {

    .garden .approach-m3 .moksh-m3-leaves {
        z-index: 15;
    }

    .garden .approach-m3 .m3-leaf {
        width: 5px;
        height: 9px;
    }

    .m3-leaf-2,
    .m3-leaf-4,
    .m3-leaf-6 {
        display: none;
    }
}
/* =========================================
   M3 — DISTANT BIRDS
   ========================================= */

.garden .approach-m3 .moksh-m3-birds {
    position: absolute;
    inset: 0;
    z-index: 16;
    pointer-events: none;
    overflow: hidden;
}

.garden .approach-m3 .m3-bird {
    position: absolute;
    top: 18%;
    left: -8%;

    width: 30px;
    height: 10px;

    opacity: 1;

    animation:
        mokshM3BirdFlight
        15s
        linear
        infinite;
}

.garden .approach-m3 .m3-bird::before,
.garden .approach-m3 .m3-bird::after {
    content: "";
    position: absolute;
    top: 2px;

    width: 14px;
    height: 6px;

    border-top: 2px solid rgba(10, 25, 22, .9);
    border-radius: 50%;
}

.garden .approach-m3 .m3-bird::before {
    left: 0;
    transform: rotate(15deg);
}

.garden .approach-m3 .m3-bird::after {
    right: 0;
    transform: rotate(-15deg);
}

.m3-bird-1 {
    top: 18%;
    left: -8%;
    animation: mokshM3BirdFlight 18s linear infinite;
    animation-delay: -5s;
    opacity: 1
}

.m3-bird-2 {
    top: 35%;
    left: -8%;
    transform: scale(.75);
    animation-duration: 10s;
    animation-delay: -5s;
}

@keyframes mokshM3BirdFlight {

    0% {
        left: -8%;
        opacity: 1;
        transform: translateY(0) scale(.8);
    }

    10% {
        opacity: .95;
    }

    45% {
        transform: translateY(-12px) scale(.9);
    }

    80% {
        opacity: .35;
        transform: translateY(8px) scale(.85);
    }

    100% {
        left: 108%;
        opacity: 1;
        transform: translateY(-4px) scale(.8);
    }
}

@media (max-width: 600px) {

    .garden .approach-m3 .m3-bird {
        transform: scale(.7);
    }

    .m3-bird-2 {
        display: visible;
    }
}
/* =========================================
   M3 — SUBTLE WATER MIST
   ========================================= */

.garden .approach-m3 .moksh-m3-mist {
    position: absolute;
    inset: 0;
    z-index: 14;
    pointer-events: none;
    overflow: hidden;
}

.garden .approach-m3 .m3-mist-layer {
    position: absolute;
    left: -15%;
    width: 130%;
    height: 16%;
    bottom: 20%;

    background: rgba(185, 220, 210, .07);

    filter: blur(18px);
    border-radius: 50%;

    opacity: 0;

    animation:
        mokshM3MistDrift
        18s
        ease-in-out
        infinite;
}

.m3-mist-layer-1 {
    bottom: 19%;
    animation-delay: -6s;
}

.m3-mist-layer-2 {
    bottom: 27%;
    height: 11%;
    opacity: 0;
    animation-duration: 24s;
    animation-delay: -14s;
}

@keyframes mokshM3MistDrift {

    0% {
        transform: translateX(-8%);
        opacity: 0;
    }

    25% {
        opacity: .55;
    }

    50% {
        transform: translateX(6%);
        opacity: .7;
    }

    75% {
        opacity: .45;
    }

    100% {
        transform: translateX(-8%);
        opacity: 0;
    }
}

@media (max-width: 600px) {

    .garden .approach-m3 .m3-mist-layer {
        height: 12%;
        filter: blur(14px);
    }

    .m3-mist-layer-2 {
        bottom: 25%;
    }
}

/* =========================================
   M3 — FIREFLIES
   ========================================= */

.garden .approach-m3 .moksh-m3-fireflies {
    position: absolute;
    inset: 0;
    z-index: 17;
    pointer-events: none;
    overflow: hidden;
}

.garden .approach-m3 .m3-firefly {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: rgba(255, 220, 130, .8);

    box-shadow:
        0 0 6px rgba(255, 210, 110, .55),
        0 0 12px rgba(255, 200, 90, .25);

    opacity: 0;

    animation:
        mokshM3Firefly 5s ease-in-out infinite;
}

.m3-firefly-1 {
    left: 38%;
    top: 58%;
    animation-delay: -1s;
}

.m3-firefly-2 {
    left: 48%;
    top: 65%;
    animation-delay: -3.5s;
}

.m3-firefly-3 {
    left: 57%;
    top: 61%;
    animation-delay: -2s;
}

.m3-firefly-4 {
    left: 68%;
    top: 69%;
    animation-delay: -4s;
}

.m3-firefly-5 {
    left: 30%;
    top: 70%;
    animation-delay: -2.8s;
}

.m3-firefly-6 {
    left: 75%;
    top: 57%;
    animation-delay: -1.8s;
}

@keyframes mokshM3Firefly {

    0%,
    100% {
        opacity: 0;
        transform: translate(0, 0) scale(.65);
    }

    25% {
        opacity: .35;
    }

    50% {
        opacity: .8;
        transform: translate(5px, -8px) scale(1);
    }

    75% {
        opacity: .3;
        transform: translate(-4px, -3px) scale(.8);
    }
}

@media (max-width: 600px) {

    .garden .approach-m3 .m3-firefly {
        width: 4px;
        height: 4px;
    }

    .garden .approach-m3 .m3-firefly-1 {
        left: 35%;
    }

    .garden .approach-m3 .m3-firefly-2 {
        left: 48%;
    }

    .garden .approach-m3 .m3-firefly-3 {
        left: 62%;
    }

    .garden .approach-m3 .m3-firefly-4 {
        left: 72%;
    }

    .m3-firefly-5,
    .m3-firefly-6 {
        display: none;
    }
}
/* =========================================
   M3 — SMALL WATER RIPPLES
   ========================================= */

.garden .approach-m3 .moksh-m3-water-ripple {
    position: absolute;
    width: 200px;
    height: 38px;

    border: 2px solid rgba(180, 255, 240, .35);
    border-radius: 50%;

    pointer-events: none;
    z-index: 18;

    animation:
        mokshM3WaterRipple
        5s
        ease-out
        infinite;
}

.m3-ripple-left {
    left: 18%;
    top: 72%;
    animation-delay: -1.5s;
}

.m3-ripple-right {
    right: 8%;
    top: 72%;
    animation-delay: -3.5s;
}

@keyframes mokshM3WaterRipple {
    0% {
        opacity: 0;
        transform: scale(.55);
    }

    25% {
        opacity: .65;
    }

    100% {
        opacity: 0;
        transform: scale(1.35);
    }
}

@media (max-width: 600px) {
    .garden .approach-m3 .moksh-m3-water-ripple {
        width: 55px;
        height: 24px;
    }

    .m3-ripple-left {
        left: 10%;
        top: 74%;
    }

    .m3-ripple-right {
        right: 10%;
        top: 74%;
    }
}

/* =========================================
   M3 — DISCOVERY POINT 1
   ========================================= */

.garden .approach-m3 .moksh-discovery-m3-1 {
    position: absolute;

    left: 62%;
    top: 40%;

    width: 34px;
    height: 34px;

    z-index: 30;

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

    padding: 0;
    border: 1px solid rgba(255, 220, 150, .45);
    border-radius: 50%;

    background: rgba(20, 35, 30, .28);

    color: rgba(255, 225, 155, .9);

    cursor: pointer;

    box-shadow:
        0 0 10px rgba(255, 210, 120, .18);

    animation: mokshM3DiscoveryPulse 4s ease-in-out infinite;
}

.garden .approach-m3 .moksh-discovery-m3-1
.moksh-discovery-symbol {
    font-size: 16px;
    line-height: 1;
}

@keyframes mokshM3DiscoveryPulse {

    0%,
    100% {
        opacity: .65;
        transform: scale(.94);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.garden .approach-m3 .moksh-discovery-m3-1:hover {
    transform: scale(1.08);
}

/* =========================================
   M3 — READER POSITIONING
   ========================================= */

.garden.moksh-m3-active.reader-open .moksh-reader-panel {
    left: 31% !important;
    transform: translateX(-50%) translateY(35px) !important;
}

.garden.moksh-m3-active.reader-open .traveler-reader {
    left: 60% !important;
    bottom: 15% !important;
    transform: translateX(-50%) scale(1.15) !important;
}

/* =========================================
   M3 — DISCOVERY POINT 2
   ========================================= */

.garden .approach-m3 .moksh-discovery-m3-2 {
    position: absolute;

    left: 62%;
    top: 35%;

    width: 34px;
    height: 34px;

    z-index: 30;

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

    padding: 0;
    border: 1px solid rgba(255, 220, 150, .45);
    border-radius: 50%;

    background: rgba(20, 35, 30, .28);

    color: rgba(255, 225, 155, .9);

    cursor: pointer;

    box-shadow:
        0 0 10px rgba(255, 210, 120, .18);

    animation: mokshM3DiscoveryPulse2 4.5s ease-in-out infinite;
}

.garden .approach-m3 .moksh-discovery-m3-2
.moksh-discovery-symbol {
    font-size: 15px;
    line-height: 1;
}

@keyframes mokshM3DiscoveryPulse2 {

    0%,
    100% {
        opacity: .6;
        transform: scale(.94);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.garden .approach-m3 .moksh-discovery-m3-3 {
    position: absolute;
    left: 62%;
    top: 30%;

    width: 34px;
    height: 34px;

    z-index: 30;

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

    padding: 0;
    border: 1px solid rgba(255, 220, 150, .45);
    border-radius: 50%;

    background: rgba(20, 35, 30, .28);

    color: rgba(255, 225, 155, .9);

    cursor: pointer;

    box-shadow:
        0 0 10px rgba(255, 210, 120, .18);

    animation: mokshM3DiscoveryPulse3 5s ease-in-out infinite;
}

.garden .approach-m3 .moksh-discovery-m3-3
.moksh-discovery-symbol {
    font-size: 15px;
    line-height: 1;
}

@keyframes mokshM3DiscoveryPulse3 {
    0%,
    100% {
        opacity: .6;
        transform: scale(.94);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* =========================================
   M3 — DISCOVERY POINT 4
   ========================================= */

.garden .approach-m3 .moksh-discovery-m3-4 {
    position: absolute;

    left: 62%;
    top: 25%;

    width: 34px;
    height: 34px;

    z-index: 30;

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

    padding: 0;

    border: 1px solid rgba(255, 220, 150, .45);
    border-radius: 50%;

    background: rgba(20, 35, 30, .28);

    color: rgba(255, 225, 155, .82);

    cursor: pointer;

    box-shadow:
        0 0 9px rgba(255, 210, 120, .14);

    animation:
        mokshM3DiscoveryPulse4
        5.5s
        ease-in-out
        infinite;
}

.garden .approach-m3 .moksh-discovery-m3-4
.moksh-discovery-symbol {
    font-size: 16px;
    line-height: 1;
}

@keyframes mokshM3DiscoveryPulse4 {

    0%,
    100% {
        opacity: .5;
        transform: scale(.94);
    }

    50% {
        opacity: .9;
        transform: scale(1);
    }
}

/* =========================================
   M3 — DISCOVERY POINT 5
   ========================================= */

.garden .approach-m3 .moksh-discovery-m3-5 {
    position: absolute;

    left: 62%;
    top: 20%;

    width: 34px;
    height: 34px;

    z-index: 30;

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

    padding: 0;

    border: 1px solid rgba(255, 220, 150, .38);
    border-radius: 50%;

    background: rgba(20, 35, 30, .22);

    color: rgba(255, 225, 155, .82);

    cursor: pointer;

    box-shadow:
        0 0 9px rgba(255, 210, 120, .14);

    animation:
        mokshM3DiscoveryPulse5
        5.5s
        ease-in-out
        infinite;
}

.garden .approach-m3 .moksh-discovery-m3-5
.moksh-discovery-symbol {
    font-size: 16px;
    line-height: 1;
}

@keyframes mokshM3DiscoveryPulse5 {

    0%,
    100% {
        opacity: .6;
        transform: scale(.94);
    }

    50% {
        opacity: .9;
        transform: scale(1);
    }
}
@media (max-width: 600px) {

    /* Point 1 — ✦ */
    .garden .approach-m3 .moksh-discovery-m3-1 {
        left: 50%;
        top: 38%;
        width: 30px;
        height: 30px;
    }

    /* Point 2 — ◉ */
    .garden .approach-m3 .moksh-discovery-m3-2 {
        left: 50%;
        top: 33%;
        width: 30px;
        height: 30px;
    }

    /* Point 3 — ✧ */
    .garden .approach-m3 .moksh-discovery-m3-3 {
        left: 50%;
        top: 28%;
        width: 30px;
        height: 30px;
    }

    /* Point 4 — ↝ */
    .garden .approach-m3 .moksh-discovery-m3-4 {
        left: 50%;
        top: 23%;
        width: 30px;
        height: 30px;
    }

    /* Point 5 — ↑ */
    .garden .approach-m3 .moksh-discovery-m3-5 {
        left: 50%;
        top: 18%;
        width: 30px;
        height: 30px;
    }

}
@media (max-width: 600px) {

    .garden.moksh-m3-active.reader-open .moksh-reader-panel {
        width: 82vw;
        height: 68vh;

        left: 40% !important;
        margin-left: 0;

        transform: translateX(-50%) translateY(35px) !important;

        padding: 55px 25px 30px;
        border-radius: 90px 90px 14px 14px;
    }
    .garden.moksh-m3-active.reader-open .traveler-reader {
        left: 50% !important;
        bottom: 10% !important;
        transform: translateX(-50%) scale(1.2) !important;
    }
    .garden .approach-m3 .moksh-m3-water-ripple {
        width: 55px;
        height: 24px;
        border-width: 1.5px;
    }

    .garden .approach-m3 .m3-ripple-left {
        left: 10%;
        top: 60%;
    }

    .garden .approach-m3 .m3-ripple-right {
        left: 80%;
        top: 59%;
    }
}

/* =========================================
   M3 — CONTINUE JOURNEY
   ========================================= */

.garden .approach-m3 .moksh-m3-continue {
    position: absolute;
    left: 60%;
    bottom: 12%;

    width: 32px;
    height: 32px;

    z-index: 35;

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

    padding: 0;

    border: 1px solid rgba(255, 220, 150, .35);
    border-radius: 50%;

    background: rgba(11, 37, 4, 0.9);
    color: rgba(255, 225, 155, .82);

    cursor: pointer;
    pointer-events: none;

    opacity: 0;

    box-shadow:
        0 0 10px rgba(255, 210, 120, .14);

    transform: translateX(-50%) translateY(8px);

    transition:
        opacity 2s ease,
        transform 2s ease;
}

.garden .approach-m3 .moksh-m3-continue-symbol {
    font-size: 17px;
    line-height: 1;
}

/* Reveal after M3 arrival */
.garden.moksh-m3-continue-visible
.approach-m3 .moksh-m3-continue {
    opacity: .9;
    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);

    animation:
        mokshM3ContinuePulse
        4s
        ease-in-out
        infinite;
}

@keyframes mokshM3ContinuePulse {

    0%,
    100% {
        opacity: .65;
    }

    50% {
        opacity: 1;
    }
}

.garden .approach-m3 .moksh-m3-continue:hover {
    transform:
        translateX(-50%)
        translateY(-2px)
        scale(1.08);
}
/* =========================================
   MOKSH — REUSABLE FOOTPRINT
   ========================================= */

.moksh-footstep {
    display: inline-block;
    width: 34px;
    height: 34px;

    background-image: url("../assets/images/moksh-footprint.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    flex-shrink: 0;
}


/* Forward */
.moksh-travel-forward .moksh-footstep {
    transform: rotate(0deg);
}


/* Back */
.moksh-travel-back .moksh-footstep {
    transform: rotate(180deg);
}
.garden.moksh-m3-continue-visible
.moksh-travel-forward {
    opacity: .9;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    animation: mokshTravelForwardPulse 4s ease-in-out infinite;
}

@media (max-width: 600px) {
    .garden .moksh-travel-nav {
        left: 50% !important;
        bottom: 8% !important;
        transform: translateX(-50%) !important;
        z-index: 300 !important;
    }

    .garden .moksh-travel-step {
        width: 46px;
        height: 46px;
    }
}

.garden.moksh-m3-active
.moksh-travel-forward {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.garden.moksh-m3-active.moksh-m3-continue-visible
.moksh-travel-forward {
    opacity: .9;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    animation: mokshTravelForwardPulse 4s ease-in-out infinite;
}

@media (max-width: 600px) {
    .garden.moksh-m3-walking .traveler:not(.traveler-reader) {
        left: 60% !important;
        animation:
            mokshM3WalkToPeepal
            10s
            cubic-bezier(.45, 0, .2, 1)
            forwards !important;
    }
}
@media (max-width: 600px) {

    @keyframes mokshM3WalkToPeepalMobile {

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

        25% {
            transform:
                translateX(-100%)
                translateY(-125px)
                rotate(-2deg)
                scale(.91);
        }

        50% {
            transform:
                translateX(-100%)
                translateY(-205px)
                rotate(2deg)
                scale(.86);
        }

        75% {
            transform:
                translateX(-100%)
                translateY(-255px)
                rotate(-2deg)
                scale(.81);
        }

        100% {
            transform:
                translateX(-100%)
                translateY(-320px)
                rotate(0deg)
                scale(.76);
        }
    }

    .garden.moksh-m3-walking
    .traveler:not(.traveler-reader) {
        animation-name: mokshM3WalkToPeepalMobile !important;
    }
}