/* =========================
   ОБЩИЕ НАСТРОЙКИ
========================= */

* {
    box-sizing: border-box;
}


html {
    min-height: 100%;
}


body {
    margin: 0;

    min-height: 100vh;

    background: #070911;

    color: #ffffff;

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

    overflow-x: hidden;
}


/* =========================
   ФОН
========================= */

.background {

    position: fixed;

    inset: 0;

    background-image:
        url("sakura.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    z-index: -3;

    animation:
        backgroundMove
        18s
        ease-in-out
        infinite
        alternate;
}


@keyframes backgroundMove {

    0% {

        transform:
            scale(1.03)
            translateX(-5px)
            translateY(-3px);

    }


    100% {

        transform:
            scale(1.08)
            translateX(5px)
            translateY(3px);

    }

}


/* =========================
   ЗАТЕМНЕНИЕ
========================= */

.overlay {

    position: fixed;

    inset: 0;

    background:

        linear-gradient(
            to bottom,
            rgba(4, 6, 14, 0.72),
            rgba(4, 6, 14, 0.88)
        );

    z-index: -2;

}


/* =========================
   СТРАНИЦА
========================= */

.page {

    width: 100%;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    padding:

        60px
        20px
        80px;

}


/* =========================
   ОСНОВНОЙ КОНТЕНТ
========================= */

.content {

    width: 100%;

    max-width: 900px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}


/* =========================
   ВЕРХНИЙ ТЕКСТ
========================= */

.intro {

    width: 100%;

    margin-bottom: 45px;

    animation:

        introAppear
        1.2s
        ease
        both;

}


.small-text {

    margin:

        0
        0
        18px;

    font-family:

        Arial,
        sans-serif;

    font-size: 12px;

    letter-spacing: 6px;

    text-transform: uppercase;

    color:

        rgba(
            255,
            255,
            255,
            0.55
        );

}


.intro h1 {

    margin: 0;

    font-size:

        clamp(
            40px,
            6vw,
            82px
        );

    line-height: 1.05;

    font-weight: 400;

    text-shadow:

        0
        8px
        30px

        rgba(
            0,
            0,
            0,
            0.45
        );

}


@keyframes introAppear {

    from {

        opacity: 0;

        transform:

            translateY(
                -20px
            );

    }


    to {

        opacity: 1;

        transform:

            translateY(
                0
            );

    }

}


/* =========================
   ОБЛАСТЬ КОНВЕРТА
========================= */

.envelope-wrapper {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    position: relative;

    margin-top: 10px;

}


/* =========================
   ПОДСКАЗКА
========================= */

.click-text {

    margin:

        0
        0
        25px;

    font-family:

        Arial,
        sans-serif;

    font-size: 12px;

    letter-spacing: 4px;

    text-transform: uppercase;

    color:

        rgba(
            255,
            255,
            255,
            0.55
        );

    animation:

        hintPulse
        2s
        ease-in-out
        infinite;

}


@keyframes hintPulse {

    0%,
    100% {

        opacity: 0.4;

    }


    50% {

        opacity: 1;

    }

}


/* =========================
   КОНВЕРТ
========================= */

.envelope {

    width:

        min(
            520px,
            90vw
        );

    height:

        min(
            340px,
            58vw
        );

    min-height: 250px;

    position: relative;

    cursor: pointer;

    perspective: 1200px;

    transition:

        transform
        0.5s
        ease;

}


.envelope:hover {

    transform:

        translateY(
            -5px
        );

}


/* =========================
   ЗАДНЯЯ ЧАСТЬ
========================= */

.envelope-back {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            135deg,

            #e9dcc8,

            #d7c1a3
        );

    border-radius: 4px;

    box-shadow:

        0
        20px
        50px

        rgba(
            0,
            0,
            0,
            0.45
        );

}


/* =========================
   ПИСЬМО
========================= */

.letter {

    position: absolute;

    left: 50%;

    bottom: 18px;

    transform:

        translateX(-50%);

    width: 88%;

    height: 85%;

    background:

        #f7f1e7;

    color: #333;

    z-index: 2;

    overflow: hidden;

    transition:

        all
        0.8s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    box-shadow:

        0
        10px
        30px

        rgba(
            0,
            0,
            0,
            0.3
        );

}


/* =========================
   ТЕКСТ ПИСЬМА
========================= */

.letter-content {

    width: 100%;

    height: 100%;

    padding:

        45px
        55px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

}


.poem {

    margin: 0;

    font-size:

        clamp(
            16px,
            2vw,
            23px
        );

    line-height: 1.7;

    color: #39342e;

    font-weight: 400;

}


.poem-author {

    margin-top: 30px;

    font-size: 14px;

    letter-spacing: 2px;

    color:

        rgba(
            60,
            55,
            48,
            0.55
        );

}


/* =========================
   КЛАПАН
========================= */

.envelope-flap {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background:

        #dfcdb5;

    clip-path:

        polygon(
            0 0,
            50% 55%,
            100% 0
        );

    transform-origin:

        top;

    z-index: 5;

    transition:

        transform
        0.8s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* =========================
   ПЕРЕД КОНВЕРТА
========================= */

.envelope-front {

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

}


.left-fold {

    position: absolute;

    inset: 0;

    background:

        #e5d4bd;

    clip-path:

        polygon(
            0 0,
            50% 55%,
            0 100%
        );

}


.right-fold {

    position: absolute;

    inset: 0;

    background:

        #dcc7ac;

    clip-path:

        polygon(
            100% 0,
            50% 55%,
            100% 100%
        );

}


.bottom-fold {

    position: absolute;

    inset: 0;

    background:

        #eadcc9;

    clip-path:

        polygon(
            0 100%,
            50% 55%,
            100% 100%
        );

}


/* =========================
   ОТКРЫТИЕ КОНВЕРТА
========================= */

.envelope.open {

    cursor: default;

    height: auto;

    min-height: 0;

    transform: none;

}


.envelope.open:hover {

    transform: none;

}


/* КЛАПАН УЛЕТАЕТ */

.envelope.open .envelope-flap {

    transform:

        rotateX(
            180deg
        );

    opacity: 0;

    pointer-events: none;

}


/* ПЕРЕДНЯЯ ЧАСТЬ ИСЧЕЗАЕТ */

.envelope.open .envelope-front {

    opacity: 0;

    transition:

        opacity
        0.4s
        ease;

}


/* ЗАДНИК ИСЧЕЗАЕТ */

.envelope.open .envelope-back {

    opacity: 0;

    transition:

        opacity
        0.4s
        ease;

}


/* =========================
   ОТКРЫТОЕ ПИСЬМО
========================= */

.envelope.open .letter {

    position: relative;

    left: auto;

    bottom: auto;

    transform: none;

    width:

        min(
            760px,
            92vw
        );

    height: auto;

    min-height: 0;

    z-index: 20;

    overflow: visible;

    margin: 0 auto;

    animation:

        letterAppear
        0.9s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        forwards;

}


@keyframes letterAppear {

    0% {

        opacity: 0;

        transform:

            translateY(
                80px
            )
            scale(
                0.9
            );

    }


    100% {

        opacity: 1;

        transform:

            translateY(
                0
            )
            scale(
                1
            );

    }

}


/* =========================
   ОТКРЫТОЕ ПИСЬМО — ТЕКСТ
========================= */

.envelope.open .letter-content {

    height: auto;

    min-height: auto;

    padding:

        65px
        70px;

}


/* =========================
   КНОПКА
========================= */

.next-button {

    display: none;

    margin-top: 50px;

    padding:

        18px
        55px;

    border:

        1px
        solid

        rgba(
            255,
            255,
            255,
            0.35
        );

    border-radius: 50px;

    color: white;

    text-decoration: none;

    font-family:

        Arial,
        sans-serif;

    font-size: 13px;

    letter-spacing: 5px;

    transition:

        0.3s
        ease;

}


.next-button.show {

    display: inline-block;

    animation:

        buttonAppear
        0.8s
        ease
        forwards;

}


.next-button:hover {

    background:

        rgba(
            255,
            255,
            255,
            0.12
        );

    transform:

        translateY(
            -3px
        );

}


@keyframes buttonAppear {

    from {

        opacity: 0;

        transform:

            translateY(
                20px
            );

    }


    to {

        opacity: 1;

        transform:

            translateY(
                0
            );

    }

}


/* =========================
   ТЕЛЕФОН
========================= */

@media (
    max-width: 600px
) {


    .page {

        padding:

            45px
            15px
            60px;

    }


    /* ВЕРХ */

    .intro {

        margin-bottom: 35px;

    }


    .small-text {

        font-size: 9px;

        letter-spacing: 3px;

        margin-bottom: 15px;

    }


    .intro h1 {

        font-size:

            clamp(
                38px,
                11vw,
                58px
            );

        line-height: 1.05;

    }


    /* ПОДСКАЗКА */

    .click-text {

        font-size: 9px;

        letter-spacing: 3px;

        margin-bottom: 20px;

    }


    /* КОНВЕРТ */

    .envelope {

        width: 90vw;

        height: 55vw;

        min-height: 230px;

    }


    /* =========================
       ОТКРЫТОЕ ПИСЬМО
    ========================= */

    .envelope.open .letter {

        width: 92vw;

    }


    .envelope.open .letter-content {

        padding:

            38px
            22px
            45px;

    }


    /* СТИХ */

    .poem {

        font-size:

            clamp(
                16px,
                4.2vw,
                20px
            );

        line-height: 1.65;

    }


    .poem-author {

        margin-top: 25px;

        font-size: 11px;

        letter-spacing: 1px;

    }


    /* КНОПКА */

    .next-button {

        margin-top: 35px;

        padding:

            17px
            45px;

        font-size: 11px;

        letter-spacing: 4px;

    }

}