/* =========================================
   RESET
========================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    overflow-x: hidden;

    background:
        #020b1c;

    color:
        #f8fafc;

    font-family:
        "Vazirmatn",
        sans-serif;
}


button {
    font-family: inherit;
}


::selection {
    background:
        rgba(246, 211, 138, .25);

    color:
        #fff;
}


/* =========================================
   STARS
========================================= */

#stars {
    position: fixed;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    overflow: hidden;
}


.star {
    position: absolute;

    display: block;

    border-radius: 50%;

    background:
        #ffffff;

    opacity: .4;

    animation:
        starTwinkle
        var(--duration)
        ease-in-out
        infinite;
}


@keyframes starTwinkle {

    0%,
    100% {
        opacity: .15;

        transform:
            scale(.7);
    }

    50% {
        opacity: .9;

        transform:
            scale(1.25);
    }

}


/* =========================================
   PAGE LOADER
========================================= */

.page-loader {
    position: fixed;

    inset: 0;

    z-index: 999999;

    display: flex;

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

    background:
        radial-gradient(
            circle at center,
            #0b2d59 0%,
            #03142f 45%,
            #020617 100%
        );

    opacity: 1;

    visibility: visible;

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


.page-loader.loaded {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


.loader-content {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;
}


.loader-moon {

    position: relative;

    width: 92px;
    height: 92px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #fff5bf 0%,
            #ffe79a 30%,
            #f6c85f 65%,
            #d99a32 100%
        );

    box-shadow:
        0 0 25px
        rgba(255, 224, 130, .8),

        0 0 60px
        rgba(255, 199, 71, .35);

    animation:
        loaderMoonFloat
        3s
        ease-in-out
        infinite;
}


.loader-moon::after {

    content: "";

    position: absolute;

    width: 82px;
    height: 82px;

    top: -5px;
    right: -23px;

    border-radius: 50%;

    background:
        #061a38;
}


.loader-crater {

    position: absolute;

    z-index: 3;

    border-radius: 50%;

    background:
        rgba(143, 92, 25, .18);
}


.crater-a {
    width: 15px;
    height: 15px;

    top: 25px;
    left: 25px;
}


.crater-b {
    width: 10px;
    height: 10px;

    top: 48px;
    left: 39px;
}


.crater-c {
    width: 13px;
    height: 13px;

    bottom: 17px;
    left: 28px;
}


.loader-stars {

    position: absolute;

    width: 230px;
    height: 150px;

    top: -25px;

    pointer-events: none;
}


.loader-stars span {

    position: absolute;

    color:
        #dbeafe;

    font-size:
        15px;

    opacity:
        .7;

    animation:
        loaderTwinkle
        2s
        ease-in-out
        infinite;
}


.loader-stars span:nth-child(1) {
    top: 20px;
    left: 25px;
}


.loader-stars span:nth-child(2) {
    top: 70px;
    right: 10px;

    animation-delay:
        .4s;
}


.loader-stars span:nth-child(3) {
    bottom: 10px;
    left: 50px;

    animation-delay:
        .8s;
}


.loader-stars span:nth-child(4) {
    top: 45px;
    right: 50px;

    animation-delay:
        1.2s;
}


.loader-text {

    margin-top: 35px;

    font-family:
        "Amiri",
        serif;

    font-size:
        26px;

    color:
        #f8fafc;
}


.loader-subtext {

    margin-top: 5px;

    color:
        #94a3b8;

    font-size:
        11px;
}


.loader-progress {

    width: 175px;
    height: 2px;

    margin-top: 25px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, .12);
}


.loader-progress-bar {

    width: 0;
    height: 100%;

    background:
        linear-gradient(
            to right,
            #60a5fa,
            #fde68a
        );

    animation:
        loaderProgress
        5s
        linear
        forwards;
}


@keyframes loaderProgress {

    from {
        width: 0%;
    }

    to {
        width: 100%;
    }

}


@keyframes loaderMoonFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-10px);
    }

}


@keyframes loaderTwinkle {

    0%,
    100% {
        opacity: .2;

        transform:
            scale(.7);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.4);
    }

}


/* =========================================
   HEADER
========================================= */

.header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 70px;

    padding:
        12px 18px;

    display: flex;

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

    z-index: 100;

    background:
        linear-gradient(
            to bottom,
            rgba(1, 9, 25, .5),
            transparent
        );

    pointer-events: none;
}


.header > * {
    pointer-events: auto;
}


.logo {

    display: flex;

    align-items: center;

    gap: 7px;

    color:
        #f6d38a;

    font-family:
        "Amiri",
        serif;

    font-size:
        20px;

    text-shadow:
        0 2px 15px
        rgba(0, 0, 0, .5);
}


.logo span:first-child {

    font-size:
        28px;

    line-height:
        1;
}


.music-button {

    display: flex;

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

    gap: 6px;

    width: 44px;
    height: 44px;

    border:
        1px solid
        rgba(255, 255, 255, .2);

    border-radius:
        50%;

    background:
        rgba(3, 20, 47, .45);

    color:
        #e2e8f0;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    cursor:
        pointer;

    transition:
        .3s ease;
}


.music-button:hover {

    border-color:
        rgba(255, 220, 140, .55);

    color:
        #ffe29a;
}


.music-button.playing {

    color:
        #ffe29a;

    border-color:
        rgba(255, 215, 120, .45);

    box-shadow:
        0 0 20px
        rgba(255, 210, 100, .15);
}


.music-icon {
    font-size:
        17px;
}


.music-label {
    display:
        none;
}


/* =========================================
   HERO
========================================= */

.hero {

    position: relative;

    min-height:
        100svh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    isolation:
        isolate;
}


.hero-background {

    position:
        absolute;

    inset:
        0;

    z-index:
        -3;

    background:
        url("assets/night-sky.png")
        center top
        / cover
        no-repeat;

    transform:
        scale(1.03);

    will-change:
        transform;
}


.hero-overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    background:
        linear-gradient(
            180deg,

            rgba(1, 9, 24, .05)
            0%,

            rgba(1, 9, 24, .08)
            35%,

            rgba(1, 9, 24, .48)
            70%,

            rgba(1, 7, 20, .92)
            100%
        );
}


.hero-content {

    position:
        relative;

    width:
        calc(100% - 34px);

    max-width:
        680px;

    margin-top:
        3vh;

    text-align:
        center;

    z-index:
        5;
}


.small-title {

    margin-bottom:
        6px;

    font-family:
        "Amiri",
        serif;

    font-size:
        18px;

    color:
        rgba(255, 245, 220, .92);

    text-shadow:
        0 2px 15px
        rgba(0, 0, 0, .8);
}


.hero h1 {

    font-family:
        "Amiri",
        serif;

    font-size:
        43px;

    font-weight:
        700;

    line-height:
        1.4;

    color:
        #f6d38a;

    text-shadow:
        0 4px 25px
        rgba(0, 0, 0, .65);
}


.hero h2 {

    margin:
        0 0 16px;

    font-family:
        "Amiri",
        serif;

    font-size:
        24px;

    font-weight:
        400;

    line-height:
        1.8;

    color:
        #f8fafc;

    text-shadow:
        0 3px 20px
        rgba(0, 0, 0, .7);
}


.hero-description {

    font-size:
        14px;

    line-height:
        2.1;

    color:
        rgba(226, 232, 240, .86);

    text-shadow:
        0 2px 15px
        rgba(0, 0, 0, .8);
}


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

.divider {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    margin:
        12px auto;
}


.divider span {

    width:
        42px;

    height:
        1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(246, 211, 138, .8)
        );
}


.divider span:last-child {

    background:
        linear-gradient(
            to left,
            transparent,
            rgba(246, 211, 138, .8)
        );
}


.divider strong {

    color:
        #f6d38a;

    font-size:
        17px;

    font-weight:
        400;
}


/* =========================================
   SCROLL
========================================= */

.scroll-indicator {

    position:
        absolute;

    bottom:
        17px;

    left:
        50%;

    transform:
        translateX(-50%);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        5px;

    z-index:
        5;

    color:
        rgba(255, 255, 255, .72);

    font-size:
        11px;
}


.mouse {

    width:
        22px;

    height:
        34px;

    border:
        1px solid
        rgba(255, 255, 255, .7);

    border-radius:
        20px;

    display:
        flex;

    justify-content:
        center;

    padding-top:
        7px;
}


.mouse-wheel {

    width:
        3px;

    height:
        7px;

    border-radius:
        5px;

    background:
        #f6d38a;

    animation:
        scrollWheel
        1.8s
        infinite;
}


.scroll-arrow {

    font-size:
        18px;

    color:
        rgba(246, 211, 138, .8);

    animation:
        arrowMove
        1.8s
        infinite;
}


@keyframes scrollWheel {

    0% {
        opacity:
            0;

        transform:
            translateY(0);
    }

    30% {
        opacity:
            1;
    }

    100% {
        opacity:
            0;

        transform:
            translateY(11px);
    }

}


@keyframes arrowMove {

    0%,
    100% {
        transform:
            translateY(0);

        opacity:
            .4;
    }

    50% {
        transform:
            translateY(5px);

        opacity:
            1;
    }

}


/* =========================================
   POETRY
========================================= */

.poetry-section {

    position:
        relative;

    min-height:
        100svh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        70px 0;

    overflow:
        hidden;

    background:
        #020b1c;
}


.poetry-background {

    position:
        absolute;

    inset:
        0;

    background:
        url("assets/night-sky.png")
        center center
        / cover
        no-repeat;

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

    transform:
        scale(1.08);
}


.poetry-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            #020b1c 0%,
            rgba(2, 11, 28, .55) 40%,
            #020b1c 100%
        );
}


.poetry-content {

    position:
        relative;

    width:
        calc(100% - 32px);

    max-width:
        680px;

    padding:
        52px 20px;

    text-align:
        center;

    background:
        rgba(3, 18, 42, .68);

    border:
        1px solid
        rgba(246, 211, 138, .35);

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, .38),

        inset 0 0 40px
        rgba(255, 220, 140, .025);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    z-index:
        3;
}


/* گوشه‌های قاب */

.poetry-content::before,
.poetry-content::after {

    content:
        "";

    position:
        absolute;

    width:
        22px;

    height:
        22px;

    border-color:
        rgba(246, 211, 138, .75);

    border-style:
        solid;
}


.poetry-content::before {

    top:
        10px;

    right:
        10px;

    border-width:
        1px 1px 0 0;
}


.poetry-content::after {

    bottom:
        10px;

    left:
        10px;

    border-width:
        0 0 1px 1px;
}


/* گوشه‌های داخلی */

.poetry-ornament {

    position:
        absolute;

    color:
        rgba(246, 211, 138, .85);

    font-family:
        "Amiri",
        serif;

    font-size:
        25px;
}


.top-ornament {

    top:
        -13px;

    left:
        50%;

    transform:
        translateX(-50%);

    padding:
        0 12px;

    background:
        #06152d;
}


.bottom-ornament {

    bottom:
        -14px;

    left:
        50%;

    transform:
        translateX(-50%);

    padding:
        0 12px;

    background:
        #06152d;
}


.poet-name {

    display:
        inline-block;

    margin-bottom:
        20px;

    padding:
        5px 16px;

    border:
        1px solid
        rgba(246, 211, 138, .35);

    border-radius:
        50px;

    color:
        #f6d38a;

    font-size:
        11px;

    background:
        rgba(255, 255, 255, .025);
}


.poetry-content blockquote {

    margin:
        0;

    font-family:
        "Amiri",
        serif;

    font-size:
        21px;

    line-height:
        2.25;

    color:
        #f8fafc;

    text-shadow:
        0 3px 20px
        rgba(0, 0, 0, .65);
}


.poetry-line {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin:
        20px auto 12px;

    color:
        #f6d38a;
}


.poetry-line span {

    width:
        45px;

    height:
        1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(246, 211, 138, .6)
        );
}


.poetry-line span:last-child {

    background:
        linear-gradient(
            to left,
            transparent,
            rgba(246, 211, 138, .6)
        );
}


.poetry-author {

    font-family:
        "Amiri",
        serif;

    font-size:
        12px;

    color:
        rgba(246, 211, 138, .8);
}


/* =========================================
   MESSAGE
========================================= */

.message-section {

    min-height:
        100svh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        70px 0;

    background:
        radial-gradient(
            circle at center,
            #0a2850,
            #020b1c 70%
        );
}


.message-card {

    position:
        relative;

    width:
        calc(100% - 32px);

    max-width:
        650px;

    padding:
        48px 23px;

    text-align:
        center;

    border:
        1px solid
        rgba(246, 211, 138, .28);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .055),
            rgba(255, 255, 255, .012)
        );

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

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


.card-corner {

    position:
        absolute;

    width:
        18px;

    height:
        18px;

    border-color:
        rgba(246, 211, 138, .7);

    border-style:
        solid;
}


.top-right {

    top:
        10px;

    right:
        10px;

    border-width:
        1px 1px 0 0;
}


.top-left {

    top:
        10px;

    left:
        10px;

    border-width:
        1px 0 0 1px;
}


.bottom-right {

    bottom:
        10px;

    right:
        10px;

    border-width:
        0 1px 1px 0;
}


.bottom-left {

    bottom:
        10px;

    left:
        10px;

    border-width:
        0 0 1px 1px;
}


.message-small {

    color:
        rgba(246, 211, 138, .8);

    font-family:
        "Amiri",
        serif;

    font-size:
        16px;
}


.message-card h2 {

    margin-top:
        5px;

    font-family:
        "Amiri",
        serif;

    font-size:
        29px;

    color:
        #f8fafc;
}


.message-divider {

    margin:
        14px 0 22px;

    color:
        #f6d38a;
}


.typing-container {

    min-height:
        190px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        center;
}


.typing-container p {

    white-space:
        pre-line;

    font-size:
        14px;

    line-height:
        2.25;

    color:
        rgba(226, 232, 240, .85);
}


.open-letter {

    margin-top:
        25px;

    padding:
        11px 25px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    border:
        1px solid
        rgba(246, 211, 138, .45);

    border-radius:
        50px;

    background:
        rgba(246, 211, 138, .06);

    color:
        #f6d38a;

    font-size:
        13px;

    cursor:
        pointer;

    transition:
        .3s ease;
}


.open-letter:hover {

    background:
        rgba(246, 211, 138, .14);

    box-shadow:
        0 0 25px
        rgba(246, 211, 138, .1);
}


/* =========================================
   FINAL
========================================= */

.final-section {

    position:
        relative;

    min-height:
        100svh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    text-align:
        center;
}


.final-background {

    position:
        absolute;

    inset:
        0;

    background:
        url("assets/night-sky.png")
        center bottom
        / cover
        no-repeat;

    filter:
        brightness(.35)
        saturate(.7);
}


.final-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at center,
            rgba(2, 20, 48, .35),
            #020817 85%
        );
}


.final-content {

    position:
        relative;

    width:
        calc(100% - 34px);

    z-index:
        2;
}


.heart {

    margin-bottom:
        18px;

    font-size:
        65px;

    font-weight:
        300;

    color:
        #f6d38a;

    animation:
        heartFloat
        3s
        ease-in-out
        infinite;
}


.final-content h2 {

    font-family:
        "Amiri",
        serif;

    font-size:
        29px;

    line-height:
        1.9;

    color:
        #f8fafc;
}


.final-content p {

    margin-top:
        15px;

    font-size:
        14px;

    line-height:
        2.3;

    color:
        rgba(226, 232, 240, .75);
}


@keyframes heartFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }

}


/* =========================================
   MODAL
========================================= */

.letter-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        18px;

    background:
        rgba(0, 5, 16, .82);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        .35s ease;
}


.letter-modal.active {

    opacity:
        1;

    visibility:
        visible;
}


.letter {

    position:
        relative;

    width:
        100%;

    max-width:
        500px;

    max-height:
        88svh;

    overflow-y:
        auto;

    padding:
        45px 24px 35px;

    text-align:
        right;

    background:
        linear-gradient(
            145deg,
            #102b4e,
            #071a34
        );

    border:
        1px solid
        rgba(246, 211, 138, .35);

    box-shadow:
        0 30px 100px
        rgba(0, 0, 0, .65);

    transform:
        translateY(25px)
        scale(.97);

    transition:
        .4s ease;
}


.letter-modal.active .letter {

    transform:
        translateY(0)
        scale(1);
}


.close-letter {

    position:
        absolute;

    top:
        10px;

    left:
        12px;

    width:
        35px;

    height:
        35px;

    border:
        1px solid
        rgba(255, 255, 255, .15);

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, .05);

    color:
        #fff;

    font-size:
        25px;

    line-height:
        1;

    cursor:
        pointer;
}


.letter-icon {

    text-align:
        center;

    font-size:
        38px;
}


.letter-label {

    display:
        block;

    margin-top:
        7px;

    text-align:
        center;

    color:
        #f6d38a;

    font-size:
        11px;
}


.letter h2 {

    margin:
        15px 0 25px;

    text-align:
        center;

    font-family:
        "Amiri",
        serif;

    font-size:
        29px;

    color:
        #fff;
}


.letter-content p {

    margin-bottom:
        17px;

    font-size:
        13px;

    line-height:
        2.3;

    color:
        rgba(241, 245, 249, .84);
}


.final-letter-text {

    color:
        #f6d38a !important;

    padding-top:
        8px;
}


.letter-signature {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        2px;

    margin-top:
        30px;

    font-family:
        "Amiri",
        serif;

    color:
        rgba(226, 232, 240, .65);
}


.letter-signature strong {

    color:
        #f6d38a;

    font-size:
        22px;
}


/* =========================================
   TABLET / DESKTOP
========================================= */

@media (min-width: 701px) {


    .header {

        padding:
            18px 35px;
    }


    .music-button {

        width:
            auto;

        height:
            42px;

        padding:
            0 15px;

        border-radius:
            50px;
    }


    .music-label {

        display:
            inline;
    }


    .hero {

        min-height:
            100vh;
    }


    .hero-background {

        background-position:
            center center;
    }


    .hero-content {

        margin-top:
            0;
    }


    .small-title {

        font-size:
            22px;
    }


    .hero h1 {

        font-size:
            70px;
    }


    .hero h2 {

        font-size:
            36px;
    }


    .hero-description {

        font-size:
            16px;
    }


    .poetry-content {

        padding:
            60px 45px;
    }


    .poetry-content blockquote {

        font-size:
            28px;
    }


    .message-card {

        padding:
            60px 45px;
    }

}


/* =========================================
   REDUCE 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;
    }

}