/* =========================================================
   MOKSH — GIANT ARCH APPROACH
   CINEMATIC IMAGE-LED SEQUENCE
   ========================================================= */


/* =========================================================
   MASTER CONTAINER
   ========================================================= */

.moksh-approach {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    perspective: 1400px;

    opacity: 0;

    pointer-events: none;

    z-index: 20;

    transition:
        opacity 12s ease-in-out;
}


/* =========================================================
   SHARED CINEMATIC SHOT
   ========================================================= */

.approach-bg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

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

    transform:
        scale(1);

    transform-origin:
        center center;

    will-change:
        opacity,
        transform;
}


/* =========================================================
   SHOT 1 — DISTANT ARCH
   ========================================================= */

.approach-shot-1 {
    background-image:
        url("../assets/images/moksh-giant-arch-master.webp");

    opacity: 1;

    z-index: 1;

    transition:
        opacity 10s ease-in-out,
        transform 10s cubic-bezier(.45, 0, .2, 1);
}


/* =========================================================
   SHOT 2 — CLOSER ARCH
   ========================================================= */

.approach-shot-2 {
    background-image:
        url("../assets/images/moksh-giant-arch-shot-2.webp");

    opacity: 0;

    z-index: 2;

    transition:
        opacity 10s ease-in-out,
        transform 10s cubic-bezier(.45, 0, .2, 1);
}


/* =========================================================
   SHOT 3 — THRESHOLD
   ========================================================= */

.approach-shot-3 {
    background-image:
        url("../assets/images/moksh-giant-arch-shot-3.webp");

    opacity: 0;
    background-position: center 100%;

    z-index: 3;

    transition:
        opacity 10s ease-in-out;
}


/* =========================================================
   M1 — MOKSH WORLD ENTRY
   ========================================================= */

.approach-m1 {
    background-image:
        url("../assets/images/moksh-world-entry.webp");

    opacity: 0;

    z-index: 4;

    transform:
        none;

    transition:
        opacity 10s ease-in-out;
}


/* =========================================================
   FINAL REVELATION
   Show cinematic approach layer
   ========================================================= */

.garden.final-revelation .moksh-approach {
    opacity: 1;
}


/* =========================================================
   TRAVELER — REVELATION APPROACH BASE
   ========================================================= */

.traveler-revelation-approach {
    transform:
        translateX(-50%)
        translateY(-205px)
        scale(0.76);

    opacity: 0.90;

    transition:
        transform 6s cubic-bezier(.45, 0, .2, 1),
        opacity 5s ease;
}


/* =========================================================
   FINAL REVELATION CROSSFADE
   Traveler temporarily disappears while
   cinematic Arch scene establishes itself
   ========================================================= */

.garden.final-revelation .traveler-revelation-approach {
    opacity: 0;

    transition:
        opacity 4s ease-in-out;
}


/* =========================================================
   ARCH SETTLED
   Traveler reappears in front of Shot 1
   ========================================================= */

.garden.arch-settled .traveler-revelation-approach {
    transform:
        translateX(-50%)
        translateY(-5%)
        scale(1.52);

    opacity: 1;

    transition:
        opacity 3s ease-in-out,
        transform 0s;
}


/* =========================================================
   ARCH APPROACH
   Traveler moves forward
   SHOT 1 → SHOT 2 simultaneously
   ========================================================= */

.garden.arch-approach .traveler-revelation-approach {
    transform:
        translateX(-50%)
        translateY(-15px)
        scale(1.08);

    opacity: 0.96;

    transition:
        transform 7s cubic-bezier(.45, 0, .2, 1),
        opacity 5s ease;
}


/* ---------------------------------------------------------
   Camera movement with Traveler
   --------------------------------------------------------- */

.garden.arch-approach .approach-shot-1 {
    opacity: 0;

    transform:
        scale(1.08);

    transform-origin:
        center 48%;

    transition:
        opacity 10s ease-in-out,
        transform 10s cubic-bezier(.45, 0, .2, 1);
}

.garden.arch-approach .approach-shot-2 {
    opacity: 1;

    transform:
        scale(1.02);

    transform-origin:
        center 48%;

    transition:
        opacity 10s ease-in-out,
        transform 10s cubic-bezier(.45, 0, .2, 1);
}


/* =========================================================
   SHOT 2 → SHOT 3
   Traveler advances again
   ========================================================= */

.garden.arch-threshold .traveler-revelation-approach {
    transform:
        translateX(-50%)
        translateY(-30px)
        scale(1.10);

    opacity: 0.98;

    transition:
        transform 7s cubic-bezier(.45, 0, .2, 1),
        opacity 5s ease;
}


/* ---------------------------------------------------------
   Camera moves with Traveler
   --------------------------------------------------------- */

.garden.arch-threshold .approach-shot-2 {
    opacity: 0;

    transform:
        scale(1.10);

    transform-origin:
        center 48%;

    transition:
        opacity 10s ease-in-out,
        transform 10s cubic-bezier(.45, 0, .2, 1);
}

.garden.arch-threshold .approach-shot-3 {
    opacity: 1;

    transform:
        scale(1.02);

    transform-origin:
        center 48%;

    transition:
        opacity 10s ease-in-out,
        transform 10s cubic-bezier(.45, 0, .2, 1);
}


/* =========================================================
   FINAL CROSSING
   Traveler begins entering the gateway
   ========================================================= */

.garden.arch-crossing .traveler-revelation-approach {
    transform:
        translateX(-190%)
        translateY(-85px)
        scale(0.96);

    opacity: 1;

    filter:
        brightness(1.08);

    transition:
        transform 6s cubic-bezier(.45, 0, .2, 1),
        opacity 5s ease,
        filter 5s ease;
}


/* =========================================================
   ARCH → MOKSH WORLD
   Gateway recedes while M1 opens
   ========================================================= */

.garden.moksh-world-entry .approach-shot-3 {
    opacity: 0;
}


.garden.moksh-world-entry .approach-m1 {
    opacity: 1;

}