/* =========================================================
   MARYAM — CINEMATIC LOVE STORY
   style.css — نسخه نهایی با انیمیشن‌های آرام و شاعرانه
   ========================================================= */

/* =========================================================
   01 — ROOT
========================================================= */

:root {

    --night: #050506;
    --night-soft: #0b0a0c;
    --wine: #3a101c;
    --burgundy: #641d2d;
    --burgundy-light: #8f3d50;

    --gold: #c9a96a;
    --gold-soft: #e0c78d;

    --ivory: #eee6d8;
    --cream: #f3eadb;

    --text: #e8e0d5;
    --text-soft: #aaa19a;
    --text-dark: #312a25;

    --shadow: rgba(0, 0, 0, .65);

    --font-body:
        "Vazirmatn",
        "Tahoma",
        sans-serif;

    --font-poetic:
        "Noto Naskh Arabic",
        "Tahoma",
        serif;

    --font-name:
        "Noto Naskh Arabic",
        serif;

    --transition:
        cubic-bezier(.22, .61, .36, 1);

}


/* =========================================================
   02 — RESET
========================================================= */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: auto;

    background:
        var(--night);

}


body {

    margin: 0;

    background:
        var(--night);

    color:
        var(--text);

    font-family:
        var(--font-body);

    direction: rtl;

    overflow-x: hidden;

}


body.story-started {

    overflow-x: hidden;

}


button,
a {

    font-family:
        inherit;

}


button {

    border: 0;

    cursor: pointer;

}


img {

    max-width: 100%;

    display: block;

}


/* =========================================================
   03 — PAGE LOADER
========================================================= */

#page-loader {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        #050506;

    transition:
        opacity 1.2s ease,
        visibility 1.2s ease;

}


#page-loader.loaded {

    opacity: 0;

    visibility: hidden;

}


.loader-inner {

    text-align: center;

}


.loader-name {

    font-family:
        var(--font-name);

    font-size:
        clamp(3rem, 8vw, 6rem);

    color:
        var(--gold-soft);

    opacity: .9;

    animation: loaderPulse 2.5s ease-in-out infinite;

}


@keyframes loaderPulse {

    0%,
    100% {
        opacity: .9;
        transform: scale(1);
    }

    50% {
        opacity: .5;
        transform: scale(.97);
    }

}


.loader-line {

    width: 0;

    height: 1px;

    margin: 15px auto 0;

    background:
        var(--gold);

    animation:
        loaderLine 2s ease forwards;

}


@keyframes loaderLine {

    from {

        width: 0;

    }

    to {

        width: 140px;

    }

}


/* =========================================================
   04 — GLOBAL SCENE
========================================================= */

.scene {

    position: relative;

    min-height: 100vh;

    min-height: 100svh;

    width: 100%;

    overflow: hidden;

}


.scene > * {

    position: relative;

    z-index: 2;

}


/* =========================================================
   05 — FILM GRAIN (ثابت، بدون لرزش)
========================================================= */

.film-grain,
.story-grain {

    position: fixed !important;

    inset: 0;

    z-index: 9000 !important;

    pointer-events: none;

    opacity: .015;

    mix-blend-mode: screen;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");

    animation: none; /* حرکت دانه‌ها کاملاً غیرفعال شد */

}


/* =========================================================
   06 — VIGNETTE
========================================================= */

.vignette {

    position: absolute !important;

    inset: 0;

    z-index: 4 !important;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 25%,
            rgba(0,0,0,.2) 55%,
            rgba(0,0,0,.85) 100%
        );

}


/* =========================================================
   07 — SCROLL PROGRESS
========================================================= */

.scroll-progress {

    position: fixed;

    top: 0;

    right: 0;

    width: 0;

    height: 2px;

    z-index: 9998;

    background:
        linear-gradient(
            90deg,
            var(--burgundy),
            var(--gold-soft)
        );

    box-shadow:
        0 0 10px
        rgba(201,169,106,.45);

    transition: width 0.1s ease-out;

}


/* =========================================================
   08 — INTRO (با انیمیشن‌های آرام)
========================================================= */

.scene-intro {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 100vh;

    background:
        #030304;

}


.intro-background {

    position: absolute !important;

    inset: 0;

    z-index: 0 !important;

    background-image:
        linear-gradient(
            180deg,
            rgba(3,3,5,.3),
            rgba(3,3,5,.7)
        ),
        url("./images/intro.png");

    background-size: cover;

    background-position: center;

    filter:
        brightness(.42)
        contrast(1.12)
        saturate(.65);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);

}


.intro-color-grade {

    position: absolute !important;

    inset: 0;

    z-index: 1 !important;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(76,18,35,.18),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.15),
            rgba(0,0,0,.75)
        );

}


.intro-content {

    position: relative;

    z-index: 5 !important;

    width: min(900px, 90%);

    text-align: center;

    padding:
        80px 20px;

}


.intro-time {

    font-family:
        var(--font-poetic);

    color:
        var(--gold-soft);

    font-size:
        clamp(1rem, 2vw, 1.4rem);

    letter-spacing:
        .12em;

    opacity: 0;

    transform:
        translateY(20px);

    transition:
        1.6s var(--transition);

}


.intro-visible {

    opacity: 1 !important;

    transform:
        translateY(0) !important;

}


.opening-lines {

    max-width: 750px;

    margin:
        55px auto 0;

}


.opening-line {

    font-family:
        var(--font-poetic);

    font-size:
        clamp(1.25rem, 3vw, 2rem);

    line-height:
        2.2;

    color:
        var(--ivory);

    opacity: 0;

    transform:
        translateY(25px);

    transition:
        1.8s var(--transition);

}


.opening-line-small {

    margin-top: 30px;

    font-size:
        clamp(1rem, 2vw, 1.3rem);

    color:
        var(--text-soft);

}


.intro-maryam {

    margin-top: 55px;

    opacity: 0;

    transform:
        translateY(25px);

    transition:
        2.2s var(--transition);

}


.maryam-name {

    font-family:
        var(--font-name);

    font-size:
        clamp(4rem, 12vw, 9rem);

    line-height: 1;

    color:
        var(--gold-soft);

    text-shadow:
        0 0 35px
        rgba(201,169,106,.12);

    animation: namePulse 4s ease-in-out infinite;

}


@keyframes namePulse {

    0%,
    100% {
        text-shadow: 0 0 35px rgba(201,169,106,.12);
        transform: scale(1);
    }

    50% {
        text-shadow: 0 0 60px rgba(201,169,106,.25);
        transform: scale(1.015);
    }

}


.maryam-underline {

    width: 80px;

    height: 1px;

    margin:
        20px auto;

    background:
        var(--gold);

    opacity: .6;

}


.intro-quote {

    max-width: 650px;

    margin:
        20px auto 0;

    color:
        #b9b0a8;

    font-family:
        var(--font-poetic);

    font-size:
        1.05rem;

    line-height:
        2.1;

    opacity: 0;

    transform:
        translateY(20px);

    transition:
        2s var(--transition);

}


.enter-story-button {

    display: inline-flex;

    align-items: center;

    gap: 20px;

    margin-top: 55px;

    padding:
        15px 30px;

    color:
        var(--cream);

    background:
        rgba(45,9,20,.55);

    border:
        1px solid
        rgba(201,169,106,.35);

    border-radius:
        2px;

    font-size:
        .95rem;

    transition:
        .6s var(--transition);

    opacity: 0;

    transform:
        translateY(20px);

    position: relative;

    overflow: hidden;

}


.enter-story-button::after {

    content: '';

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(201,169,106,.15),
            transparent 70%
        );

    opacity: 0;

    transition:
        opacity .8s ease;

    pointer-events:
        none;

}


.enter-story-button:hover::after {

    opacity: 1;

}


.enter-story-button:hover {

    background:
        rgba(100,29,45,.7);

    border-color:
        rgba(201,169,106,.7);

    box-shadow:
        0 0 35px
        rgba(100,29,45,.4);

    transform:
        translateY(-3px);

}


.button-arrow {

    color:
        var(--gold-soft);

    font-size:
        1.2rem;

    animation:
        arrowFloat 2.8s ease-in-out infinite;

}


@keyframes arrowFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(5px);

    }

}


.intro-footer {

    position: absolute !important;

    z-index: 5 !important;

    bottom: 30px;

    left: 40px;

    right: 40px;

    display: flex;

    justify-content: space-between;

    color:
        rgba(230,220,210,.45);

    font-size:
        .72rem;

    letter-spacing:
        .08em;

}


/* =========================================================
   09 — RAIN
========================================================= */

.rain-layer {

    position: absolute !important;

    inset: 0;

    z-index: 3 !important;

    pointer-events: none;

}


/* =========================================================
   10 — GENERAL STORY BACKGROUND
========================================================= */

.story-overlay,
.memories-overlay,
.remains-overlay,
.masoud-overlay {

    position: absolute !important;

    inset: 0;

    z-index: 1 !important;

    background:
        linear-gradient(
            90deg,
            rgba(3,3,5,.78),
            rgba(3,3,5,.42),
            rgba(3,3,5,.78)
        );

}


.story-container,
.maryam-chapter-container,
.love-container,
.effect-container,
.unsaid-container,
.after-container,
.nights-container,
.love-final-container,
.remains-container,
.masoud-container,
.release-container {

    position: relative;

    z-index: 5 !important;

    width:
        min(800px, 90%);

    margin:
        0 auto;

    padding:
        130px 20px;

}


/* =========================================================
   11 — CHAPTER LABEL
========================================================= */

.chapter-label {

    color:
        var(--gold);

    font-size:
        .75rem;

    letter-spacing:
        .18em;

    margin-bottom:
        25px;

    opacity: .75;

}


/* =========================================================
   12 — TITLES
========================================================= */

.chapter-title {

    font-family:
        var(--font-poetic);

    font-size:
        clamp(2.5rem, 6vw, 5rem);

    font-weight:
        500;

    line-height:
        1.5;

    color:
        var(--ivory);

    text-shadow:
        0 10px 40px rgba(0,0,0,.5);

}


.chapter-divider {

    width:
        90px;

    height:
        1px;

    margin:
        35px 0;

    background:
        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );

}


.chapter-text {

    max-width:
        700px;

}


.chapter-text p {

    font-family:
        var(--font-poetic);

    font-size:
        clamp(1.1rem, 2.2vw, 1.4rem);

    line-height:
        2.5;

    color:
        rgba(236,229,220,.82);

    margin-bottom:
        32px;

}


/* =========================================================
   13 — BEGINNING
========================================================= */

.chapter-beginning {

    background:
        #080709;

}


.story-background {

    position: absolute !important;

    inset: 0;

    z-index: 0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(3,3,5,.82),
            rgba(3,3,5,.4),
            rgba(3,3,5,.75)
        ),
        url("./images/beginning.png");

    background-size:
        cover;

    background-position:
        center;

    filter:
        brightness(.55)
        saturate(.65);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);

}


.chapter-beginning::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            #050506 0%,
            transparent 25%,
            transparent 75%,
            #050506 100%
        );

    z-index: 3;

    pointer-events: none;

}


/* =========================================================
   14 — MARYAM CHAPTER
========================================================= */

.chapter-maryam {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #090708;

}


.maryam-background {

    position: absolute !important;

    inset: 0;

    z-index: 0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(4,3,5,.85),
            rgba(4,3,5,.35),
            rgba(4,3,5,.85)
        ),
        url("./images/maryam.png");

    background-size:
        cover;

    background-position:
        center;

    filter:
        brightness(.45)
        saturate(.45)
        sepia(.08);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);

}


.maryam-chapter-container {

    text-align:
        center;

}


.maryam-chapter-title {

    font-family:
        var(--font-name);

    font-size:
        clamp(5rem, 16vw, 12rem);

    line-height:
        1;

    color:
        var(--gold-soft);

    text-shadow:
        0 0 60px rgba(201,169,106,.15);

}


.maryam-chapter-line {

    width:
        80px;

    height:
        1px;

    margin:
        35px auto;

    background:
        var(--gold);

}


.maryam-chapter-text {

    width:
        min(700px, 100%);

    margin:
        0 auto;

}


.maryam-chapter-text p {

    font-family:
        var(--font-poetic);

    font-size:
        clamp(1.1rem, 2.3vw, 1.45rem);

    line-height:
        2.5;

    color:
        rgba(238,230,216,.84);

    margin-bottom:
        28px;

}


/* =========================================================
   15 — LOVE
========================================================= */

.chapter-love {

    background:
        #0b0709;

}


.love-background {

    position: absolute !important;

    inset: 0;

    z-index: 0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(5,3,5,.82),
            rgba(50,8,22,.28),
            rgba(5,3,5,.82)
        ),
        url("./images/love.png");

    background-size:
        cover;

    background-position:
        center;

    filter:
        brightness(.48)
        saturate(.75);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);

}


/* =========================================================
   16 — EFFECT
========================================================= */

.chapter-effect {

    display:
        flex;

    align-items:
        center;

    background:
        #080608;

}


.effect-background {

    position: absolute !important;

    inset: 0;

    z-index: 0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(3,3,4,.88),
            rgba(55,8,22,.32),
            rgba(3,3,4,.88)
        ),
        url("./images/effect.png");

    background-size:
        cover;

    background-position:
        center;

    filter:
        brightness(.43)
        saturate(.65);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);

}


/* =========================================================
   17 — MEMORIES
========================================================= */

.memories-section {

    background:
        #e7ddcc;

    color:
        var(--text-dark);

    padding:
        120px 0;

}


.memories-background {

    position: absolute !important;

    inset: 0;

    z-index: 0 !important;

    background:
        radial-gradient(
            circle at 50% 0%,
            #f5ecdd,
            #d8cbb7
        );

}


.memories-container {

    position: relative;

    z-index: 5;

    width:
        min(1150px, 92%);

    margin:
        0 auto;

    text-align:
        center;

}


.memories-section .chapter-label {

    color:
        #755b3e;

}


.memories-section .chapter-title {

    color:
        #332b24;

}


.memories-intro {

    max-width:
        600px;

    margin:
        25px auto 65px;

    font-family:
        var(--font-poetic);

    color:
        #665b4f;

    line-height:
        2.2;

}


.memory-gallery {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        40px;

    align-items:
        start;

}


.memory-card {

    padding:
        13px;

    background:
        #f4ede2;

    box-shadow:
        0 20px 50px
        rgba(50,35,20,.18);

    transform:
        rotate(-1deg);

    transition:
        .8s var(--transition);

}


.memory-card:nth-child(2) {

    transform:
        rotate(1.5deg)
        translateY(35px);

}


.memory-card:nth-child(3) {

    transform:
        rotate(-2deg)
        translateY(10px);

}


.memory-card:hover {

    transform:
        rotate(0)
        translateY(-10px)
        scale(1.02);

    box-shadow:
        0 30px 70px
        rgba(50,35,20,.25);

}


.memory-image {

    width:
        100%;

    aspect-ratio:
        4 / 5;

    background-size:
        cover;

    background-position:
        center;

    filter:
        sepia(.12)
        saturate(.75)
        contrast(1.05);

}


.memory-image-01 {

    background-image:
        url("./images/memories-01.png");

}


.memory-image-02 {

    background-image:
        url("./images/memories-02.png");

}


.memory-image-03 {

    background-image:
        url("./images/memories-03.png");

}


.memory-caption {

    padding:
        20px 10px 12px;

    text-align:
        right;

}


.memory-caption span {

    display:
        block;

    font-size:
        .7rem;

    color:
        #9b7844;

    margin-bottom:
        8px;

}


.memory-caption p {

    font-family:
        var(--font-poetic);

    font-size:
        1rem;

    line-height:
        2;

    color:
        #4a4036;

}


/* =========================================================
   18 — UNSAID
========================================================= */

.chapter-unsaid {

    background:
        #050506;

}


.unsaid-background {

    position: absolute !important;

    inset: 0;

    z-index: 0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(3,3,5,.92),
            rgba(12,8,12,.48),
            rgba(3,3,5,.92)
        ),
        url("./images/unsaid.png");

    background-size:
        cover;

    background-position:
        center;

    filter:
        brightness(.38)
        saturate(.5);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);

}


/* =========================================================
   19 — AFTER
========================================================= */

.chapter-after {

    background:
        #080709;

}


.after-background {

    position: absolute !important;

    inset: 0;

    z-index: 0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(3,3,5,.9),
            rgba(17,7,12,.45),
            rgba(3,3,5,.9)
        ),
        url("./images/after-you.png");

    background-size:
        cover;

    background-position:
        center;

    filter:
        brightness(.4)
        saturate(.55);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);

}


/* =========================================================
   20 — NIGHTS
========================================================= */

.chapter-nights {

    background:
        #030304;

}


.nights-background {

    position: absolute !important;

    inset: 0;

    z-index: 0 !important;

    background:
        radial-gradient(
            ellipse at 70% 20%,
            rgba(58,16,28,.22),
            transparent 35%
        ),
        linear-gradient(
            90deg,
            rgba(2,2,3,.92),
            rgba(8,7,10,.4),
            rgba(2,2,3,.92)
        ),
        url("./images/night.png");

    background-size:
        cover;

    background-position:
        center;

    filter:
        brightness(.38)
        saturate(.45);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);

}


/* =========================================================
   21 — FINAL LOVE STATEMENT
========================================================= */

.chapter-love-final {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #050506;

}


.love-final-background {

    position: absolute !important;

    inset: 0;

    z-index: 0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(3,3,5,.94),
            rgba(53,9,22,.32),
            rgba(3,3,5,.94)
        ),
        url("./images/love-final.png");

    background-size:
        cover;

    background-position:
        center;

    filter:
        brightness(.35)
        saturate(.55);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);

}


.love-final-container {

    width:
        min(1000px, 90%);

    text-align:
        center;

}


.love-final-text {

    max-width:
        650px;

    margin:
        0 auto 60px;

    font-family:
        var(--font-poetic);

    line-height:
        2.5;

    color:
        rgba(236,229,220,.7);

}


.main-statement {

    font-family:
        var(--font-poetic);

    font-size:
        clamp(2rem, 5vw, 4.2rem);

    line-height:
        1.7;

    color:
        var(--ivory);

    margin-bottom:
        15px;

}


.main-statement-second {

    font-family:
        var(--font-name);

    font-size:
        clamp(2rem, 6vw, 5rem);

    line-height:
        1.7;

    color:
        var(--gold-soft);

    text-shadow:
        0 0 45px
        rgba(201,169,106,.13);

}


/* =========================================================
   22 — LETTER
========================================================= */

.letter-section {

    min-height:
        100vh;

    padding:
        130px 0;

    background:
        #17100c;

}


.letter-background {

    position: absolute !important;

    inset: 0;

    z-index: 0 !important;

    background:
        radial-gradient(
            ellipse at 50% 30%,
            rgba(184,133,71,.12),
            transparent 45%
        ),
        url("./images/letter.png");

    background-size:
        cover;

    background-position:
        center;

    filter:
        brightness(.35)
        saturate(.6);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);

}


.letter-light {

    position: absolute !important;

    width:
        700px;

    height:
        700px;

    top:
        -250px;

    left:
        50%;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(255,207,128,.13),
            transparent 68%
        );

    filter:
        blur(20px);

    z-index:
        1 !important;

}


.letter-container {

    position:
        relative;

    z-index:
        5;

    width:
        min(780px, 90%);

    margin:
        0 auto;

}


.letter-container .chapter-label {

    text-align:
        center;

    color:
        var(--gold-soft);

}


.letter-paper {

    position:
        relative;

    margin:
        60px auto;

    padding:
        clamp(35px, 7vw, 80px);

    background:
        linear-gradient(
            145deg,
            #f4ead8,
            #e7d7bd
        );

    color:
        var(--text-dark);

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.55);

    transform:
        rotate(.4deg);

}


.letter-paper::before {

    content: "";

    position: absolute;

    inset:
        12px;

    border:
        1px solid
        rgba(110,76,38,.18);

    pointer-events:
        none;

}


.letter-paper-top {

    font-family:
        var(--font-name);

    font-size:
        clamp(2.5rem, 7vw, 5rem);

    color:
        #681d2d;

    margin-bottom:
        35px;

}


.letter-content p {

    font-family:
        var(--font-poetic);

    font-size:
        clamp(1rem, 2vw, 1.25rem);

    line-height:
        2.6;

    margin-bottom:
        24px;

    color:
        #3d3027;

}


.letter-signature {

    margin-top:
        45px;

    font-family:
        var(--font-name);

    font-size:
        3rem;

    color:
        #681d2d;

    text-align:
        left;

}


/* =========================================================
   23 — REMAINS
========================================================= */

.chapter-remains {

    background:
        #090708;

}


.remains-background {

    position: absolute !important;

    inset: 0;

    z-index: 0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(3,3,5,.9),
            rgba(12,9,10,.38),
            rgba(3,3,5,.9)
        ),
        url("./images/remains.png");

    background-size:
        cover;

    background-position:
        center;

    filter:
        brightness(.42)
        saturate(.5);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);

}


/* =========================================================
   24 — MASOUD
========================================================= */

.chapter-masoud {

    background:
        #09090a;

}


.masoud-background {

    position: absolute !important;

    inset: 0;

    z-index: 0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(3,3,4,.92),
            rgba(20,18,18,.38),
            rgba(3,3,4,.92)
        ),
        url("./images/masoud.png");

    background-size:
        cover;

    background-position:
        center;

    filter:
        grayscale(.2)
        brightness(.4)
        saturate(.5);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);

}


.masoud-container .chapter-title {

    font-family:
        var(--font-name);

    color:
        var(--gold-soft);

}


/* =========================================================
   25 — RELEASE
========================================================= */

.chapter-release {

    display:
        flex;

    align-items:
        center;

    background:
        #17120d;

}


.release-background {

    position: absolute !important;

    inset: 0;

    z-index: 0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(16,10,7,.86),
            rgba(92,59,28,.25),
            rgba(16,10,7,.86)
        ),
        url("./images/release.png");

    background-size:
        cover;

    background-position:
        center;

    filter:
        brightness(.5)
        saturate(.55);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);

}


.release-light {

    position: absolute !important;

    width:
        900px;

    height:
        500px;

    right:
        -300px;

    top:
        20%;

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,208,132,.13),
            transparent 70%
        );

    filter:
        blur(30px);

}


/* =========================================================
   26 — MORNING
========================================================= */

.final-scene {

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #e8dfcf;

    color:
        #302820;

}


.morning-background {

    position: absolute !important;

    inset: 0;

    z-index: 0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,250,238,.25),
            rgba(226,214,193,.75)
        ),
        url("./images/morning.png");

    background-size:
        cover;

    background-position:
        center;

    filter:
        brightness(1.05)
        saturate(.65);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);

}


.morning-light {

    position: absolute !important;

    width:
        1000px;

    height:
        700px;

    top:
        -300px;

    left:
        50%;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(255,240,193,.55),
            transparent 70%
        );

    filter:
        blur(30px);

}


.morning-container {

    position:
        relative;

    z-index:
        5;

    width:
        min(850px, 90%);

    text-align:
        center;

}


.morning-time {

    font-family:
        var(--font-poetic);

    font-size:
        1rem;

    color:
        #806f5a;

    margin-bottom:
        50px;

}


.morning-text {

    font-family:
        var(--font-poetic);

    font-size:
        clamp(1.25rem, 3vw, 1.9rem);

    line-height:
        2.4;

    color:
        #42382e;

}


.morning-name {

    margin-top:
        55px;

    font-family:
        var(--font-name);

    font-size:
        clamp(4rem, 11vw, 8rem);

    color:
        #74553d;

}


.morning-final {

    margin-top:
        35px;

    font-family:
        var(--font-poetic);

    font-size:
        1.1rem;

    color:
        #665a4d;

}


/* =========================================================
   27 — EPILOGUE
========================================================= */

.epilogue-scene {

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #eee6d8;

    color:
        #342c26;

}


.epilogue-container {

    width:
        min(850px, 90%);

    text-align:
        center;

}


.epilogue-line {

    font-family:
        var(--font-poetic);

    font-size:
        clamp(1.25rem, 3vw, 2rem);

    line-height:
        2.3;

    margin-bottom:
        35px;

    color:
        #51463b;

}


.epilogue-name {

    margin-top:
        60px;

    font-family:
        var(--font-name);

    font-size:
        clamp(4rem, 10vw, 7rem);

    color:
        #775940;

}


.epilogue-final {

    margin-top:
        60px;

    font-family:
        var(--font-poetic);

    font-size:
        1.2rem;

    color:
        #7b6c5d;

}


/* =========================================================
   28 — CONTINUE BUTTON (با افکت هاله‌ای)
========================================================= */

.continue-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        18px;

    margin-top:
        50px;

    padding:
        13px 25px;

    color:
        var(--gold-soft);

    background:
        rgba(40,12,20,.35);

    border:
        1px solid
        rgba(201,169,106,.25);

    font-size:
        .85rem;

    transition:
        .6s var(--transition);

    position: relative;

    overflow: hidden;

}


.continue-button::after {

    content: '';

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(201,169,106,.15),
            transparent 70%
        );

    opacity: 0;

    transition:
        opacity .8s ease;

    pointer-events:
        none;

}


.continue-button:hover::after {

    opacity: 1;

}


.continue-button:hover {

    background:
        rgba(100,29,45,.55);

    border-color:
        rgba(201,169,106,.65);

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.25);

}


.final-scene .continue-button,
.epilogue-scene .continue-button {

    display:
        none;

}


/* =========================================================
   29 — REVEAL (با زمان طولانی‌تر و آرام‌تر)
========================================================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(50px);

    transition:
        opacity 1.8s var(--transition),
        transform 1.8s var(--transition);

}


.reveal.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


/* =========================================================
   30 — PARTICLES
========================================================= */

.particles {

    position:
        fixed !important;

    inset:
        0;

    z-index:
        8990 !important;

    pointer-events:
        none;

    overflow:
        hidden;

}


/* =========================================================
   31 — MUSIC CONTROL
========================================================= */

.music-control {

    position:
        fixed;

    bottom:
        25px;

    left:
        25px;

    z-index:
        9997;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        10px 16px;

    color:
        rgba(240,230,218,.8);

    background:
        rgba(5,5,6,.55);

    border:
        1px solid
        rgba(201,169,106,.2);

    backdrop-filter:
        blur(10px);

    font-size:
        .72rem;

    transition:
        .4s ease;

}


.music-control:hover {

    border-color:
        rgba(201,169,106,.55);

    background:
        rgba(40,12,20,.65);

}


.music-control.is-playing {

    color:
        var(--gold-soft);

}


/* =========================================================
   32 — IMAGE ERROR
========================================================= */

.image-load-error {

    opacity:
        .25;

    filter:
        grayscale(1);

}


/* =========================================================
   33 — GPU ACCELERATION (رفع لرزش نهایی)
========================================================= */

.intro-background,
.story-background,
.maryam-background,
.love-background,
.effect-background,
.unsaid-background,
.love-final-background,
.letter-background,
.remains-background,
.masoud-background,
.release-background,
.morning-background,
.memory-image {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    image-rendering: -webkit-optimize-contrast;
}


/* =========================================================
   34 — MOBILE
========================================================= */

@media (max-width: 800px) {


    .intro-content {

        padding:
            60px 15px;

    }


    .opening-lines {

        margin-top:
            35px;

    }


    .intro-maryam {

        margin-top:
            35px;

    }


    .intro-quote {

        font-size:
            .95rem;

    }


    .intro-footer {

        left:
            20px;

        right:
            20px;

        bottom:
            20px;

    }


    .story-container,
    .maryam-chapter-container,
    .love-container,
    .effect-container,
    .unsaid-container,
    .after-container,
    .nights-container,
    .love-final-container,
    .remains-container,
    .masoud-container,
    .release-container {

        padding:
            90px 15px;

    }


    .chapter-text p,
    .maryam-chapter-text p {

        font-size:
            1.05rem;

        line-height:
            2.3;

    }


    .memory-gallery {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .memory-card:nth-child(2),
    .memory-card:nth-child(3) {

        transform:
            rotate(0);

    }


    .letter-paper {

        padding:
            40px 25px;

    }


    .letter-content p {

        font-size:
            1rem;

        line-height:
            2.35;

    }


    .music-control {

        bottom:
            15px;

        left:
            15px;

    }

}


/* =========================================================
   35 — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {


    .scene {

        min-height:
            100svh;

    }


    .chapter-label {

        font-size:
            .65rem;

    }


    .chapter-title {

        font-size:
            2.35rem;

    }


    .chapter-text p {

        font-size:
            1rem;

        line-height:
            2.25;

    }


    .main-statement {

        font-size:
            1.8rem;

    }


    .main-statement-second {

        font-size:
            2.4rem;

    }


    .morning-text {

        font-size:
            1.15rem;

        line-height:
            2.2;

    }


    .epilogue-line {

        font-size:
            1.15rem;

    }


}


/* =========================================================
   36 — REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;

    }

}


/* =========================================================
   IMAGE PATH / VISIBILITY FIX
   All story images are PNG files inside ./images/
========================================================= */

.intro-background,
.story-background,
.maryam-background,
.love-background,
.effect-background,
.unsaid-background,
.love-final-background,
.letter-background,
.remains-background,
.masoud-background,
.release-background,
.morning-background {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-attachment: scroll !important;
}

.intro-background { background-image: linear-gradient(180deg, rgba(3,3,5,.30), rgba(3,3,5,.70)), url("./images/intro.png") !important; }
.story-background { background-image: linear-gradient(90deg, rgba(3,3,5,.82), rgba(3,3,5,.40), rgba(3,3,5,.75)), url("./images/beginning.png") !important; }
.maryam-background { background-image: linear-gradient(90deg, rgba(4,3,5,.85), rgba(4,3,5,.35), rgba(4,3,5,.85)), url("./images/maryam.png") !important; }
.love-background { background-image: linear-gradient(90deg, rgba(5,3,5,.82), rgba(50,8,22,.28), rgba(5,3,5,.82)), url("./images/love.png") !important; }
.effect-background { background-image: linear-gradient(90deg, rgba(3,3,4,.88), rgba(55,8,22,.32), rgba(3,3,4,.88)), url("./images/effect.png") !important; }
.unsaid-background { background-image: linear-gradient(90deg, rgba(3,3,5,.92), rgba(12,8,12,.48), rgba(3,3,5,.92)), url("./images/unsaid.png") !important; }
.love-final-background { background-image: linear-gradient(90deg, rgba(3,3,5,.94), rgba(53,9,22,.32), rgba(3,3,5,.94)), url("./images/love-final.png") !important; }
.letter-background { background-image: radial-gradient(ellipse at 50% 30%, rgba(184,133,71,.12), transparent 45%), url("./images/letter.png") !important; }
.remains-background { background-image: linear-gradient(90deg, rgba(3,3,5,.90), rgba(12,9,10,.38), rgba(3,3,5,.90)), url("./images/remains.png") !important; }
.masoud-background { background-image: linear-gradient(90deg, rgba(3,3,4,.92), rgba(20,18,18,.38), rgba(3,3,4,.92)), url("./images/masoud.png") !important; }
.release-background { background-image: linear-gradient(90deg, rgba(16,10,7,.86), rgba(92,59,28,.25), rgba(16,10,7,.86)), url("./images/release.png") !important; }
.morning-background { background-image: linear-gradient(180deg, rgba(255,250,238,.25), rgba(226,214,193,.75)), url("./images/morning.png") !important; }

.memory-image-01 { background-image: url("./images/memories-01.png") !important; }
.memory-image-02 { background-image: url("./images/memories-02.png") !important; }
.memory-image-03 { background-image: url("./images/memories-03.png") !important; }

/* Make sure background layers remain visible behind their content. */
.intro-background,
.story-background,
.maryam-background,
.love-background,
.effect-background,
.unsaid-background,
.love-final-background,
.letter-background,
.remains-background,
.masoud-background,
.release-background,
.morning-background {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* =========================================================
   VOLUME CONTROL
========================================================= */

/* =========================================================
   VOLUME CONTROL — با ترنسپرنسی بالا
========================================================= */

.volume-control {

    position: fixed;

    bottom: 80px;

    left: 25px;

    z-index: 9996;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 16px;

    background:
        rgba(5,5,6,.65);

    border:
        1px solid
        rgba(201,169,106,.15);

    backdrop-filter:
        blur(12px);

    border-radius:
        30px;

    /* ====== ترنسپرنسی بالا ====== */
    opacity: 0.15;

    transition:
        opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
        background 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);

}


/* ====== وقتی ماوس می‌ره روش، پررنگ میشه ====== */
.volume-control:hover {

    opacity: 1;

    background:
        rgba(40,12,20,.75);

    border-color:
        rgba(201,169,106,.5);

    box-shadow:
        0 8px 30px
        rgba(0,0,0,.4);

}


.volume-mute-btn {

    background: none;

    border: 0;

    color:
        rgba(240,230,218,.8);

    font-size:
        1.2rem;

    padding:
        4px;

    cursor: pointer;

    transition:
        .3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

}


.volume-mute-btn:hover {

    color:
        var(--gold-soft);

    transform:
        scale(1.1);

}


.volume-mute-btn.muted {

    color:
        rgba(240,230,218,.4);

}


.volume-slider {

    width:
        80px;

    height:
        3px;

    -webkit-appearance:
        none;

    appearance:
        none;

    background:
        rgba(201,169,106,.3);

    border-radius:
        2px;

    outline:
        none;

    transition:
        .3s ease;

}


.volume-slider::-webkit-slider-thumb {

    -webkit-appearance:
        none;

    appearance:
        none;

    width:
        14px;

    height:
        14px;

    border-radius:
        50%;

    background:
        var(--gold-soft);

    cursor:
        pointer;

    box-shadow:
        0 0 15px
        rgba(201,169,106,.3);

    transition:
        .3s ease;

}


.volume-slider::-webkit-slider-thumb:hover {

    transform:
        scale(1.15);

    box-shadow:
        0 0 25px
        rgba(201,169,106,.5);

}


.volume-slider::-moz-range-thumb {

    width:
        14px;

    height:
        14px;

    border-radius:
        50%;

    border:
        0;

    background:
        var(--gold-soft);

    cursor:
        pointer;

}


.volume-percent {

    color:
        rgba(240,230,218,.7);

    font-size:
        .7rem;

    min-width:
        38px;

    text-align:
        center;

    font-family:
        var(--font-body);

}


/* =========================================================
   موبایل — تنظیم اندازه
========================================================= */

@media (max-width: 600px) {

    .volume-control {

        bottom: 70px;

        left: 15px;

        padding:
            8px 12px;

        gap:
            8px;

        opacity: 0.25;  /* در موبایل کمی بیشتر دیده بشه */

    }


    .volume-control:hover {

        opacity: 1;

    }


    .volume-slider {

        width:
            60px;

    }


    .volume-percent {

        font-size:
            .6rem;

        min-width:
            32px;

    }


    .volume-mute-btn {

        font-size:
            1rem;

    }

}




.volume-control:hover {

    border-color:
        rgba(201,169,106,.5);

    background:
        rgba(40,12,20,.7);

}


.volume-mute-btn {

    background: none;

    border: 0;

    color:
        rgba(240,230,218,.8);

    font-size:
        1.2rem;

    padding:
        4px;

    cursor: pointer;

    transition:
        .3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

}


.volume-mute-btn:hover {

    color:
        var(--gold-soft);

    transform:
        scale(1.1);

}


.volume-mute-btn.muted {

    color:
        rgba(240,230,218,.4);

}


.volume-slider {

    width:
        80px;

    height:
        3px;

    -webkit-appearance:
        none;

    appearance:
        none;

    background:
        rgba(201,169,106,.3);

    border-radius:
        2px;

    outline:
        none;

    transition:
        .3s ease;

}


.volume-slider::-webkit-slider-thumb {

    -webkit-appearance:
        none;

    appearance:
        none;

    width:
        14px;

    height:
        14px;

    border-radius:
        50%;

    background:
        var(--gold-soft);

    cursor:
        pointer;

    box-shadow:
        0 0 15px
        rgba(201,169,106,.3);

    transition:
        .3s ease;

}


.volume-slider::-webkit-slider-thumb:hover {

    transform:
        scale(1.15);

    box-shadow:
        0 0 25px
        rgba(201,169,106,.5);

}


.volume-slider::-moz-range-thumb {

    width:
        14px;

    height:
        14px;

    border-radius:
        50%;

    border:
        0;

    background:
        var(--gold-soft);

    cursor:
        pointer;

}


.volume-percent {

    color:
        rgba(240,230,218,.7);

    font-size:
        .7rem;

    min-width:
        38px;

    text-align:
        center;

    font-family:
        var(--font-body);

}


/* =========================================================
   موبایل — تنظیم اندازه
========================================================= */

@media (max-width: 600px) {

    .volume-control {

        bottom: 70px;

        left: 15px;

        padding:
            8px 12px;

        gap:
            8px;

    }


    .volume-slider {

        width:
            60px;

    }


    .volume-percent {

        font-size:
            .6rem;

        min-width:
            32px;

    }


    .volume-mute-btn {

        font-size:
            1rem;

    }

}