/* =========================================
   WEDDING SAVE THE DATE
   ========================================= */


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

    letter-spacing:
        0;

    font-family:
        "Typewriter",
        monospace;

    -webkit-font-smoothing:
        antialiased;

}


/* =========================================
   MAIN
   ========================================= */

/*
    The Save the Date itself is now the
    bordered page.

    The border is attached to the content
    rather than the browser viewport.

    This means the border grows naturally
    with the page and scrolls with it.
*/

.save-the-date {

    /*
        Make the page at least as tall as
        the visible browser window while
        still allowing it to grow naturally
        when the content becomes taller.
    */

    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;


    /*
        The 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;


    /*
        Allow the photo strip to fall
        beyond the tray and down the page.
    */

    overflow:
        visible;

}


/* =========================================
   TYPOGRAPHY
   ========================================= */

.headline {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

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

    font-weight:
        500;

    line-height:
        0.9;

    letter-spacing:
        0.15em;

}


/* =========================================
   SCRIPT FONT
   ========================================= */

.script {

    display:
        block;

    margin-top:
        30px;

    font-family:
        "Breathing",
        cursive;

    font-size:
        1.0em;

    font-weight:
        normal;

    line-height:
        0.7;

    letter-spacing:
        3px;

}


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

.hero {

    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

}


/* =========================================
   TRAY / FRAME
   ========================================= */

.photo-frame {

    position:
        relative;

    width:
        min(
            200px,
            60vw
        );

    margin-top:
        60px;

    isolation:
        isolate;

}


/* =========================================
   TRAY IMAGE
   ========================================= */

.frame-image {

    display:
        block;

    width:
        100%;

    height:
        auto;

    position:
        relative;


    /*
        Tray is behind the photograph.
    */

    z-index:
        1;

    pointer-events:
        none;

}


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

/*
    Because the tray is now an opaque image,
    the photograph sits ON TOP of it.

    We do NOT clip it anymore.
*/

.photo-window {

    position:
        absolute;


    /*
        Printing begins 20% down the tray.
    */

    top:
        10%;

    left:
        50%;

    width:
        100%;

    height:
        65%;


    transform:
        translateX(-50%);


    /*
        Clip the photo above the printing
        point, but allow it to extend
        indefinitely downward.
    */

    clip-path:
        inset(
            0
            0
            -1000vh
            0
        );

    overflow:
        visible;

    z-index:
        5;

    pointer-events:
        none;

}


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

.photo-strip {

    position:
        absolute;

    width:
        42%;

    left:
        50%;

    transform:
        translateX(-50%);


    /*
        Start completely above the
        printing area.
    */

    top:
        -120%;

    z-index:
        10;


    /*
        ONE TIME ONLY.
    */

    animation:
        print-photo
        9s
        linear
        1;


    /*
        Keep the final position when
        the animation finishes.
    */

    animation-fill-mode:
        forwards;

}


.photo-strip img {

    display:
        block;

    width:
        100%;

    height:
        auto;

}


/* =========================================
   PRINT → DROP → STOP
   ========================================= */

@keyframes print-photo {

    /* =================================
       WAIT
       ================================= */

    0% {

        top:
            -120%;

    }


    15% {

        top:
            -120%;

    }


    /* =================================
       PRINT STUTTER #1
       ================================= */

    25% {

        top:
            -65%;

    }


    29% {

        top:
            -65%;

    }


    /* =================================
       PRINT STUTTER #2
       ================================= */

    39% {

        top:
            -30%;

    }


    43% {

        top:
            -30%;

    }


    /* =================================
       PRINT STUTTER #3
       ================================= */

    53% {

        top:
            0%;

    }


    62% {

        top:
            0%;

    }


    /* =================================
       DROP — FAST
       ================================= */

    66% {

        top:
            12%;

    }


    69% {

        top:
            35%;

    }


    /* =================================
       STOP
       ================================= */

    100% {

        top:
            35%;

    }

}


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

.date-section {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    margin-top:
        65px;

    text-align:
        center;

}


.date {

    margin:
        25px
        0
        0;

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

    font-weight:
        400;

    letter-spacing:
        0.1em;

}


/* =========================================
   BUTTON
   ========================================= */

.button-section {

    margin-top:
        55px;

}


.save-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        220px;

    padding:
        15px
        30px;

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

    color:
        var(--black);

    background:
        transparent;

    text-decoration:
        none;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        1rem;

    font-weight:
        500;

    letter-spacing:
        0.12em;

    transition:
        background-color
        0.35s ease,

        color
        0.35s ease,

        transform
        0.35s ease;

}


.save-button:hover {

    background:
        var(--black);

    color:
        var(--cream);

    transform:
        translateY(-2px);

}


.save-button:active {

    transform:
        translateY(0);

}


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

@media (max-width: 600px) {

    /*
        Smaller border inset on phones.
    */

    :root {

        --page-margin:
            14px;

    }


    .save-the-date {

        /*
            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.8rem,
                9vw,
                2.7rem
            );

    }


    /* ================================
       PHOTO FRAME
       ================================ */

    .photo-frame {

        width:
            min(
                250px,
                68vw
            );

        margin-top:
            50px;

    }


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

    .photo-strip {

        width:
            42%;

    }


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

    .date-section {

        margin-top:
            55px;

    }


    /* ================================
       BUTTON
       ================================ */

    .button-section {

        margin-top:
            45px;

    }

}


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

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

    .photo-strip {

        animation:
            none;

        top:
            8%;

    }


    .save-button {

        transition:
            none;

    }

}