/* ------------------------------------------------ */
/* Root Variables                                   */
/* ------------------------------------------------ */

:root {

    --bg: #F8F5EF;
    --bg-gradient: #F1ECE2;

    --text: #2C2A28;
    --muted: #6C6862;

    --max-width: 620px;

    --transition: 450ms ease;

}

body.night {

    --bg: #15181E;
    --bg-gradient: #222834;

    --text: #F4EFE8;
    --muted: #B6AEA2;

}

/* ------------------------------------------------ */
/* Reset                                            */
/* ------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {

    font-size: 16px;
    scroll-behavior: smooth;

}

body {

    margin: 0;

    min-height: 100vh;

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

    padding-top: 12vh;

    background:
        radial-gradient(
            circle at top,
            var(--bg),
            var(--bg-gradient)
        );

    color: var(--text);

    font-family: "Cormorant Garamond", serif;

    transition:
        background var(--transition),
        color var(--transition);

}

/* ------------------------------------------------ */
/* Layout                                           */
/* ------------------------------------------------ */

.page {

    width: 100%;
    max-width: var(--max-width);

}

.letter {

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

}

/* ------------------------------------------------ */
/* Greeting                                         */
/* ------------------------------------------------ */

.greeting {

    margin: 0;
    margin-bottom: 4rem;

    font-weight: 500;

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

    line-height: 1.15;

    letter-spacing: 0.02em;

    opacity: 0;

    animation: fadeUp .8s forwards;

}

/* ------------------------------------------------ */
/* Letter                                           */
/* ------------------------------------------------ */

.message {

    margin-top: 3rem;
    margin-bottom: 5rem;

    font-size: clamp(1.55rem, 2.2vw, 2rem);

    line-height: 1.75;

    max-width: 32em;

    white-space: pre-wrap;

    opacity: 0;

    animation:
        fadeUp .8s .25s forwards;

}

/* ------------------------------------------------ */
/* Signature                                        */
/* ------------------------------------------------ */

.signature {

    margin-top: 3.5rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;

    opacity: 0;

    animation:
        fadeUp .8s .5s forwards;

}

.love {

    font-size: 1.3rem;

    color: var(--muted);

}

.signed {

    font-family: "Parisienne", cursive;

    font-size: 3rem;

    color: var(--text);

}

/* ------------------------------------------------ */
/* Date                                             */
/* ------------------------------------------------ */

.date {

    position: fixed;
    top: 32px;
    left: 40px;

    font-size: .95rem;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;

    color: var(--muted);
    opacity: .8;

}

/* ------------------------------------------------ */
/* Grain                                            */
/* ------------------------------------------------ */

body::before {

    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;

    opacity: .16;
    background-image: url("grain.svg");
    background-size: 180px 180px;
    mix-blend-mode: soft-light;

}

/* ------------------------------------------------ */
/* Loading                                          */
/* ------------------------------------------------ */

.loading {

    opacity: .55;

}

/* ------------------------------------------------ */
/* Animation                                        */
/* ------------------------------------------------ */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(12px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

/* ------------------------------------------------ */
/* Mobile                                           */
/* ------------------------------------------------ */

@media (max-width: 768px) {

    body {

        padding: 28px;
        padding-top: 80px;

    }

    .date {

        top: 16px;
        left: 20px;
        font-size: .75rem;

    }

    .message {

        margin-top: 2.2rem;

        line-height: 1.65;

    }

    .signature {

        margin-top: 2.8rem;

    }

}