/* =========================================
   WEDDING INVITATION PAGE
   ========================================= */


/* =========================================
   FONTS
   ========================================= */

   @font-face {

    font-family: "Breathing";

    src:
        url("fonts/breathing.ttf")
        format("truetype");

    font-weight:
        normal;

    font-style:
        normal;

    font-display:
        swap;
}


@font-face {

    font-family: "Typewriter";

    src:
        url("fonts/typewriter.ttf")
        format("truetype");

    font-weight:
        normal;

    font-style:
        normal;

    font-display:
        swap;
}


/* =========================================
   VARIABLES
   ========================================= */

:root {

    --cream:
        #f5f0e7;

    --black:
        #171614;

    /*
        Space between the browser edge
        and the invitation border.
    */

    --page-margin:
        24px;

}


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

* {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    background:
        var(--cream);

    color:
        var(--black);

    font-family:
        "Typewriter",
        monospace;

    -webkit-font-smoothing:
        antialiased;

}


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

.invitation-page {

    /*
        Make the invitation at least as tall
        as the visible browser window.
    */

    min-height:
        calc(
            100vh -
            (var(--page-margin) * 2)
        );


    /*
        Keep the invitation inset from
        the browser edges.
    */

    width:
        calc(
            100% -
            (var(--page-margin) * 2)
        );


    /*
        Center the page horizontally.
    */

    margin:
        var(--page-margin)
        auto;


    /*
        Border belongs to the actual
        invitation page.
    */

    border:
        1px solid
        rgba(
            23,
            22,
            20,
            0.08
        );


    /*
        Internal page spacing.
    */

    padding:
        8vh
        24px
        10vh;


    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;


    /*
        Prevent postcard animations and
        other content from creating
        horizontal scrolling.
    */

    overflow-x:
        hidden;

}


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

.invitation-header {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

}


/* =========================================
   HEADLINE
   ========================================= */

.headline {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

    font-size:
        clamp(
            1.8rem,
            5vw,
            3.5rem
        );

    font-weight:
        500;

    line-height:
        0.9;

    letter-spacing:
        0.15em;

}


.script {

    display:
        block;

    margin-top:
        28px;

    font-family:
        "Breathing",
        cursive;

    font-size:
        1em;

    font-weight:
        normal;

    line-height:
        0.7;

    letter-spacing:
        0;

}


/* =========================================
   DATE
   ========================================= */

.wedding-date {

    margin:
        30px
        0
        0;

    font-size:
        clamp(
            1.1rem,
            3vw,
            1.5rem
        );

    letter-spacing:
        0.1em;

}


/* =========================================
   POSTCARD SECTION
   ========================================= */

.postcard-section {

    width:
        100%;

    display:
        flex;

    justify-content:
        center;

    margin-top:
        75px;

}


/* =========================================
   POSTCARD STACK
   ========================================= */

.postcard-stack {

    position:
        relative;

    /*
        Desktop maximum width.
    */

    width:
        min(
            440px,
            82vw
        );

    /*
        The entire postcard composition
        maintains a fixed aspect ratio.

        This allows the composition to
        scale proportionally on smaller
        screens rather than becoming
        vertically compressed.
    */

    aspect-ratio:
        440 / 430;

    /*
        Do not use a fixed height.

        The height is automatically
        calculated from the width.
    */

    height:
        auto;

}


/* =========================================
   POSTCARDS
   ========================================= */

.postcard {

    position:
        absolute;

    background:
        #ffffff;

    box-shadow:
        0
        12px
        28px
        rgba(
            0,
            0,
            0,
            0.13
        );

    opacity:
        0;

}


/*
    Preserve the original proportions
    of the postcard JPG.
*/

.postcard img {

    display:
        block;

    width:
        100%;

    height:
        auto;

}


/* =========================================
   TOP POSTCARD
   ========================================= */

.postcard-top {

    /*
        Width controls size.
    */

    width:
        90%;

    /*
        Same proportional position
        at every screen size.
    */

    top:
        -10%;

    left:
        4%;

    /*
        Lean LEFT.
    */

    transform:
        rotate(-6deg)
        translateX(100vw);

    z-index:
        2;

}


/* =========================================
   BOTTOM POSTCARD
   ========================================= */

.postcard-bottom {

    width:
        90%;

    /*
        Same proportional position
        at every screen size.
    */

    top:
        52%;

    left:
        13%;

    /*
        Lean RIGHT.
    */

    transform:
        rotate(6deg)
        translateX(-100vw);

    z-index:
        3;

}


/* =========================================
   PHOTO STRIP
   ========================================= */

.photostrip {

    position:
        absolute;

    /*
        Relative size remains consistent
        with the postcard composition.
    */

    width:
        10%;

    /*
        Same proportional position
        at every screen size.
    */

    top:
        79%;

    left:
        10%;

    transform:
        rotate(-9deg)
        translateY(40px);

    opacity:
        0;

    z-index:
        5;

    filter:
        drop-shadow(
            0
            8px
            10px
            rgba(
                0,
                0,
                0,
                0.18
            )
        );

}


.photostrip img {

    display:
        block;

    width:
        100%;

    height:
        auto;

}


/* =========================================
   POSTCARD ANIMATIONS
   ========================================= */


/*
    TOP CARD
*/

.postcard-top {

    animation:
        postcard-from-right
        0.8s
        cubic-bezier(
            .22,
            .8,
            .25,
            1
        )
        0.25s
        forwards;

}


/*
    BOTTOM CARD
*/

.postcard-bottom {

    animation:
        postcard-from-left
        0.8s
        cubic-bezier(
            .22,
            .8,
            .25,
            1
        )
        0.4s
        forwards;

}


/*
    PHOTO STRIP
*/

.photostrip {

    animation:
        photostrip-appear
        0.65s
        cubic-bezier(
            .22,
            .8,
            .25,
            1
        )
        0.9s
        forwards;

}


/* =========================================
   TOP CARD ANIMATION
   ========================================= */

@keyframes postcard-from-right {

    from {

        opacity:
            0;

        transform:
            rotate(-6deg)
            translateX(100vw);

    }

    to {

        opacity:
            1;

        transform:
            rotate(-6deg)
            translateX(0);

    }

}


/* =========================================
   BOTTOM CARD ANIMATION
   ========================================= */

@keyframes postcard-from-left {

    from {

        opacity:
            0;

        transform:
            rotate(6deg)
            translateX(-100vw);

    }

    to {

        opacity:
            1;

        transform:
            rotate(6deg)
            translateX(0);

    }

}


/* =========================================
   PHOTO STRIP ANIMATION
   ========================================= */

@keyframes photostrip-appear {

    from {

        opacity:
            0;

        transform:
            rotate(-9deg)
            translateY(40px);

    }

    to {

        opacity:
            1;

        transform:
            rotate(-9deg)
            translateY(0);

    }

}


/* =========================================
   COUNTDOWN
   ========================================= */

.countdown-section {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

    margin-top:
        80px;

}


.countdown-heading {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    font-size:
        clamp(
            1rem,
            2.8vw,
            1.35rem
        );

    letter-spacing:
        0.12em;

    line-height:
        1.2;

}


/* =========================================
   COUNTDOWN NUMBERS
   ========================================= */

.countdown {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-top:
        32px;

}


.countdown-unit {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    min-width:
        70px;

}


.countdown-number {

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

    line-height:
        1;

    letter-spacing:
        0.05em;

}


.countdown-label {

    margin-top:
        10px;

    font-size:
        0.65rem;

    letter-spacing:
        0.15em;

}


.countdown-divider {

    font-size:
        2rem;

    margin:
        0
        5px;

    align-self:
        flex-start;

    padding-top:
        3px;

}


/* =========================================
   RSVP
   ========================================= */

.rsvp-section {

    margin-top:
        55px;

}


.rsvp-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        190px;

    padding:
        15px
        32px;

    border:
        1px solid
        var(--black);

    color:
        var(--black);

    background:
        transparent;

    text-decoration:
        none;

    font-family:
        "Typewriter",
        monospace;

    font-size:
        1rem;

    letter-spacing:
        0.12em;

    transition:
        background-color
        0.35s ease,

        color
        0.35s ease,

        transform
        0.35s ease;

}


.rsvp-button:hover {

    background:
        var(--black);

    color:
        var(--cream);

    transform:
        translateY(-2px);

}


.rsvp-button:active {

    transform:
        translateY(0);

}


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

@media (max-width: 600px) {

    /*
        Smaller border inset on phones.
    */

    :root {

        --page-margin:
            14px;

    }


    .invitation-page {

        /*
            Recalculate the minimum height
            using the smaller mobile margin.
        */

        min-height:
            calc(
                100vh -
                (var(--page-margin) * 2)
            );


        /*
            Preserve the original mobile
            top spacing.
        */

        padding-top:
            9vh;


        /*
            Slightly tighter horizontal
            breathing room inside the border.
        */

        padding-left:
            18px;

        padding-right:
            18px;

    }


    /* ================================
       HEADLINE
       ================================ */

    .headline {

        font-size:
            clamp(
                1.65rem,
                8.5vw,
                2.6rem
            );

    }


    /* ================================
       POSTCARDS
       ================================ */

    .postcard-section {

        margin-top:
            60px;

    }


    .postcard-stack {

        /*
            Scale the entire postcard
            composition proportionally.

            No separate mobile height.
        */

        width:
            90vw;

        height:
            auto;

        aspect-ratio:
            440 / 430;

    }


    /*
        Explicitly use the SAME positional
        values as desktop.
    */

    .postcard-top {

        width:
            90%;

        top:
            -10%;

        left:
            4%;

    }


    .postcard-bottom {

        width:
            90%;

        top:
            52%;

        left:
            13%;

    }


    /*
        Explicitly use the SAME positional
        values as desktop.
    */

    .photostrip {

        width:
            10%;

        top:
            79%;

        left:
            10%;

    }


    /* ================================
       COUNTDOWN
       ================================ */

    .countdown-section {

        margin-top:
            80;

    }


    .countdown {

        margin-top:
            25px;

    }


    .countdown-unit {

        min-width:
            55px;

    }


    .countdown-number {

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

    }


    .countdown-label {

        font-size:
            0.52rem;

    }


    .countdown-divider {

        font-size:
            1.4rem;

        margin:
            0
            2px;

    }


    /* ================================
       RSVP
       ================================ */

    .rsvp-section {

        margin-top:
            45px;

    }

}


/* =========================================
   REDUCED MOTION
   ========================================= */

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

    .postcard-top,
    .postcard-bottom,
    .photostrip {

        animation:
            none;

        opacity:
            1;

    }


    .postcard-top {

        transform:
            rotate(-6deg);

    }


    .postcard-bottom {

        transform:
            rotate(6deg);

    }


    .photostrip {

        transform:
            rotate(-9deg);

    }


    .rsvp-button {

        transition:
            none;

    }

}