/* =========================================================
   MOKSH READER — TRAVELER FACING REVELATION
   FINAL VISUAL DIRECTION
   ========================================================= */

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

    z-index: 100;

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

    padding-top: 7vh;

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

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

.moksh-reader.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.moksh-reader {
    background:
        radial-gradient(
            circle at 50% 55%,
            rgba(0, 12, 8, 0.38) 0%,
            rgba(0, 7, 5, 0.58) 55%,
            rgba(0, 4, 3, 0.70) 100%
        );
}
/* =========================================================
   ANCIENT READER WINDOW
   ========================================================= */
.moksh-reader-panel {
    position: relative;

    width: min(800px, 82vw);
    height: min(650px, 72vh);

    padding: 72px 90px 65px;

    box-sizing: border-box;
    overflow: hidden;

    /* Dark ancient reading surface */
    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(8, 14, 10, 0.98) 0%,
            rgba(9, 27, 19, 0.99) 65%,
            rgba(3, 14, 10, 1) 100%
        );

    /* Broad antique frame */
    border: 5px solid rgba(155, 119, 43, 0.85);

    border-radius: 135px 135px 22px 22px;

    box-shadow:
    /* Main depth */
    0 20px 65px rgba(0, 0, 0, 0.80),

    /* Broad bottom grounding shadow */
    0 28px 38px -12px rgba(0, 0, 0, 0.88),

    /* Very subtle warm grounding beneath frame */
    0 12px 24px -10px rgba(177, 139, 57, 0.22),

    /* Inner depth */
    inset 0 0 35px rgba(0, 0, 0, 0.95);
     --gold: rgba(177, 139, 57, 0.75);
    z-index: 1;
}
.moksh-reader.is-open .moksh-reader-panel {
    transform:
        translateY(0)
        scale(1);
}

/* =========================================================
   SUBTLE INNER LIGHT
   ========================================================= */
.moksh-reader-panel::before {
    content: "";

    position: absolute;

    inset: 15px;

    border: 3px solid rgba(177, 139, 57, 0.60);

    border-radius:
        120px 120px 14px 14px;

    box-shadow:
        inset 0 0 25px rgba(0, 0, 0, 0.45);

    pointer-events: none;

    z-index: 0;
}
.moksh-reader-panel::after {
    content: "";

    position: absolute;

    inset: 20px;

    border: 2px solid rgba(180, 145, 69, 0.28);

    border-radius:
        120px 120px 10px 10px;

    pointer-events: none;

    z-index: 0;
}

.moksh-reader-panel::before,
.moksh-reader-panel::after {
    pointer-events: none !important;
}
/* =========================================================
   TOP LABEL
   ========================================================= */

.moksh-reader-label {
    position: relative;
    z-index: 2;

    margin-bottom: 12px;

    text-align: center;

    color: #b49b61;
    font-size: 11px;

    letter-spacing: 5px;

    text-transform: uppercase;
}


/* =========================================================
   TITLE
   ========================================================= */

.moksh-reader-title {
    position: relative;
    z-index: 2;

    margin: 0 0 12px;

    text-align: center;

    color: #eee5cf;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(42px, 5vw, 68px);

    font-weight: 500;

    line-height: 1.05;
}


/* =========================================================
   SMALL DIVIDER
   ========================================================= */

.moksh-reader-title::after {
    content: "";

    display: block;

    width: 70px;
    height: 1px;

    margin: 20px auto 0;

    background:
        rgba(190, 158, 92, 0.55);
}


/* =========================================================
   SUBTITLE
   ========================================================= */

.moksh-reader-subtitle {
    position: relative;
    z-index: 2;

    margin-top: 20px;

    max-width: 620px;

    text-align: center;

    color:#b8aa8c;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;

    font-style: italic;

    line-height: 1.6;
}
.moksh-reader-body {

    margin-top: 38px;

    color: #d7cfba;

    font-size: 18px;

    line-height: 2;

}

/* =========================================================
   ARTICLE CONTENT
   ========================================================= */

.moksh-reader-content {
    position: relative;
    z-index: 2;

    max-width: 700px;
    height: 100%;

    overflow-y: auto;
    margin: 0 auto;
    padding-right: 14px;

    box-sizing: border-box;

    color:
        rgba(235, 231, 216, 0.88);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;

    line-height: 1.9;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(190, 158, 92, 0.22)
        transparent;
    text-align: center;
}

.moksh-reader-content::-webkit-scrollbar {
    width: 3px;
}

.moksh-reader-content::-webkit-scrollbar-track {
    background: transparent;
}

.moksh-reader-content::-webkit-scrollbar-thumb {
    background:
        rgba(190, 158, 92, 0.22);

    border-radius: 10px;
}

.moksh-reader-content::-webkit-scrollbar-thumb:hover {
    background:
        rgba(190, 158, 92, 0.36);
}
.moksh-reader-content p {
    margin: 0 0 24px;
}


/* =========================================================
   CLOSE
   ========================================================= */
.moksh-reader-close {
    position: absolute;

    top: 24px;
    right: 40px;

    z-index: 9999 !important;

    pointer-events: auto !important;

    touch-action: manipulation;

    cursor: pointer;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    border: 2px solid rgba(190, 151, 63, 0.80);

    background:
        radial-gradient(
            circle,
            rgba(32, 24, 10, 0.9),
            rgba(10, 19, 13, 0.95)
        );

    color: #bd6f09;

    font-size: 19px;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}

.moksh-reader-close:hover {
    transform: rotate(90deg);

    background:
        radial-gradient(
            circle,
            rgba(104, 77, 31, 0.85),
            rgba(10, 19, 13, 0.95)
        );

    color: #f2e5c1;
}

/* =========================================================
   CONTINUE JOURNEY
   ========================================================= */

.moksh-reader-continue {
    position: relative;
    z-index: 3;

    display: flex;

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

    gap: 12px;

    margin: 32px auto 0;

    padding: 11px 25px;

    border: 1px solid rgba(190, 158, 92, 0.42);

    border-radius: 30px;

    background:
        rgba(95, 72, 37, 0.28);

    color: #dbc68e;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    cursor: pointer;

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

.moksh-reader-continue:hover {
    background:
        rgba(120, 91, 48, 0.38);

    border-color:
        rgba(215, 184, 111, 0.65);

    transform: translateY(-2px);
}


/* =========================================================
   OPTIONAL IMAGE
   ========================================================= */

.moksh-reader-image {
    position: relative;
    z-index: 2;

    max-width: 620px;

    margin: 0 auto 28px;

    overflow: hidden;

    border-radius: 12px;

    border:
        1px solid rgba(190, 158, 92, 0.25);
}

.moksh-reader-image img {
    display: block;

    width: 100%;
    height: auto;
}

/* =========================================================
   GARDEN LOGO — READER OPEN STATE
   ========================================================= */

.entrance-message h1 {
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}

.entrance-message.reader-logo-hidden h1 {
    opacity: 0 !important;
    transform: translateY(-10px) !important;
    pointer-events: none;
}
/* =========================================================
   READER OPEN — ENTRANCE MESSAGE MUST NOT BLOCK READER
   ========================================================= */

.entrance-message.reader-logo-hidden {
    pointer-events: none !important;
}
/* =========================================================
   READER TRAVELER
   Hidden until the Reader opens
   ========================================================= */

.traveler-reader {
    position: absolute;

    left: 50%;
    bottom: 20%;

    width: 50px;
    height: 114px;

    transform:
        translateX(-50%);

    transform-origin:
        center bottom;

    z-index: 250;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.5s ease;
}

/* =========================================================
   READER TRAVELER
   Subtle darkening toward lower sides
   ========================================================= */

.garden.reader-open .traveler-reader .traveler-body {

    background:
        radial-gradient(
            ellipse at 50% 28%,
            rgba(255, 246, 205, 0.98) 0%,
            rgba(242, 219, 161, 0.92) 48%,
            rgba(73, 62, 36, 0.72) 72%,
            rgba(32, 29, 18, 0.48) 100%
        );

    box-shadow:
        0 0 12px rgba(255, 224, 151, 0.32),
        inset 7px -5px 10px rgba(20, 20, 12, 0.20),
        inset -7px -5px 10px rgba(20, 20, 12, 0.20);
}

/* =========================================================
   READER TRAVELER — STABILIZE GLOW
   ========================================================= */

.garden.reader-open .traveler-reader .traveler-glow {
    animation: none !important;
    opacity: 0.55 !important;
    transform:
        translateX(-50%)
        scale(1) !important;
}

.garden.reader-open .traveler-reader {
    opacity: 0.95 !important;
    visibility: visible;
    display: block !important;

    transform:
        translateX(-50%)
        scale(1.15) !important;
}

.garden.reader-open .traveler-reader {
    opacity: 0.95 !important;
    visibility: visible !important;
    pointer-events: none;
}
.garden.moksh-m2-active.reader-open .traveler-reader {
    opacity: 0.95 !important;
    visibility: visible !important;
    pointer-events: none !important;
}

.garden.reader-open .moksh-reader-panel {
    transform: translateY(45px);
}
.garden.reader-open .traveler-reader {
    left: 49% !important;
    bottom: 12% !important;
    transform: translateX(-50%) scale(1.15) !important;
}

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

@media (max-width: 600px) {

    .moksh-reader {
        align-items: flex-start;
    }

    .moksh-reader-panel {
        width: 88vw;

        height: 68vh;

        margin-top: 5vh;

        padding:
            55px 25px 30px;

        border-radius:
            90px 90px 14px 14px;
    }

    .moksh-reader-label {
        font-size: 8px;
        letter-spacing: 3px;
    }

    .moksh-reader-title {
        font-size: 34px;
    }

    .moksh-reader-subtitle {
        margin-bottom: 25px;

        font-size: 14px;
    }

    .moksh-reader-content {
        font-size: 15px;
        line-height: 1.8;
    }

    .moksh-reader-continue {
        font-size: 14px;
        padding: 10px 20px;
    }
    

}