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

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


/* =====================================================
   HTML
===================================================== */

html {

    margin: 0;
    padding: 0;

    background: #000;

    scroll-behavior: smooth;

}


/* =====================================================
   BODY
===================================================== */

body {

    margin: 0;
    padding: 0;

    background: #000;

    overflow-x: hidden;

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

    /*
     * IMPORTANT:
     * No scroll snapping.
     */

    scroll-snap-type: none;

    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior-x: none;

}


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

.website {

    width: min(100vw, 56.25vh);

    margin: 0 auto;

    padding: 0;

}


/* =====================================================
   PAGE = 9:16
===================================================== */

.page {

    position: relative;

    width: 100%;

    aspect-ratio: 9 / 16;

    height: auto;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #000;

    scroll-snap-align: none;

    container-type: inline-size;

    transform:
        translateZ(0);

    -webkit-transform:
        translateZ(0);

    touch-action: pan-y;

}


/* =====================================================
   VIDEO
===================================================== */

.full-video {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    margin: 0;
    padding: 0;

    object-fit: cover;

    object-position: center;

    background: #000;

    opacity: 1;

    filter: none;

    transform:
        translate3d(0, 0, 0);

    -webkit-transform:
        translate3d(0, 0, 0);

    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;

}


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

#scrollIndicator {

    position: fixed;

    z-index: 9999;

    left: 50%;

    bottom: 2%;

    transform:
        translateX(-50%);

    color: #fff;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 4px;

    text-align: center;

    text-shadow:
        0 2px 8px #000;

    pointer-events: none;

    animation:
        scrollAnimation 1.5s infinite;

}


#scrollIndicator div {

    font-size: 18px;

    line-height: 12px;

    color: #fff;

    text-shadow:
        0 2px 8px #000;

}


@keyframes scrollAnimation {

    0% {

        transform:
            translate(-50%, 0);

        opacity: .5;

    }


    50% {

        transform:
            translate(-50%, 7px);

        opacity: 1;

    }


    100% {

        transform:
            translate(-50%, 0);

        opacity: .5;

    }

}


/* =====================================================
   SAVE DATE CONTAINER
===================================================== */

.save-date-container {

    position: absolute;

    z-index: 10;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%, -50%);

    width: 92%;

    text-align: center;

    color: #fff;

}


/* =====================================================
   SAVE TITLE
===================================================== */

.save-title {

    width: 100%;

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

    font-size: 9.8cqw;

    font-weight: bold;

    letter-spacing: .2cqw;

    line-height: 1.05;

    white-space: nowrap;

    text-align: center;

    margin-bottom: 4cqw;

    color: #fff;

    text-shadow:
        0 2px 5px #000,
        0 4px 12px rgba(0,0,0,.8);

}


/* =====================================================
   SCRATCH BOX
===================================================== */

.scratch-box {

    position: relative;

    width: 82%;

    height: 25cqw;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 2.5cqw;

    background: #eee5d5;

    box-shadow:
        0 3cqw 8cqw
        rgba(0,0,0,.55);

}


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

.date-reveal {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    color: #35251c;

    background: #f0e8da;

}


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

.wedding-date {

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

    font-size: 5.2cqw;

    font-weight: bold;

    letter-spacing: .15cqw;

    line-height: 1.1;

    color: #35251c;

    text-align: center;

    white-space: nowrap;

}


/* =====================================================
   TIME
===================================================== */

.event-time {

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

    font-size: 4.8cqw;

    font-weight: normal;

    letter-spacing: .1cqw;

    line-height: 1.1;

    margin-top: 1.4cqw;

    color: #35251c;

    text-align: center;

}


/* =====================================================
   SCRATCH CANVAS
===================================================== */

#scratchCanvas {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    touch-action: none;

    cursor: crosshair;

}


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

.countdown-title {

    margin-top: 4cqw;

    margin-bottom: 3cqw;

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

    font-size: 4.1cqw;

    font-weight: bold;

    letter-spacing: .5cqw;

    white-space: nowrap;

    color: #fff;

    text-shadow:
        0 2px 7px #000;

}


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

.countdown {

    display: flex;

    justify-content: center;

    align-items: stretch;

    gap: 1.4cqw;

    width: 100%;

}


/* =====================================================
   COUNT ITEM
===================================================== */

.count-item {

    flex: 0 1 17cqw;

    min-width: 0;

    max-width: 18cqw;

    min-height: 17cqw;

    padding:
        1.5cqw .7cqw;

    background:
        rgba(0,0,0,.52);

    border:
        .2cqw solid
        rgba(255,255,255,.55);

    border-radius: 2cqw;

    backdrop-filter:
        blur(5px);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}


/* =====================================================
   COUNT NUMBER
===================================================== */

.count-item strong {

    display: block;

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

    font-size: 7.2cqw;

    font-weight: bold;

    line-height: 7.5cqw;

    color: #fff;

    text-shadow:
        0 2px 4px #000;

}


/* =====================================================
   COUNT LABEL
===================================================== */

.count-item span {

    display: block;

    margin-top: .8cqw;

    font-family:
        Arial,
        sans-serif;

    font-size: 2cqw;

    font-weight: bold;

    letter-spacing: .15cqw;

    color: #fff;

}


/* =====================================================
   MAP
===================================================== */

.map-container {

    position: absolute;

    z-index: 10;

    left: 50%;

    top: 72%;

    transform:
        translate(-50%, -50%);

    width: 82%;

    text-align: center;

}


.map-title {

    color: #fff;

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

    font-size: 7.2cqw;

    font-weight: bold;

    letter-spacing: .4cqw;

    margin-bottom: 3cqw;

    white-space: nowrap;

    text-shadow:
        0 2px 5px #000,
        0 4px 12px #000;

}


.map-box {

    width: 100%;

    height: 52cqw;

    overflow: hidden;

    border-radius: 2.5cqw;

    border:
        .35cqw solid
        rgba(255,255,255,.8);

    background: #ddd;

    box-shadow:
        0 2.5cqw 7cqw
        rgba(0,0,0,.55);

}


.map-box iframe {

    width: 100%;
    height: 100%;

    border: 0;

}


.map-button {

    display: inline-block;

    margin-top: 3cqw;

    padding:
        2.3cqw 4cqw;

    border-radius: 8cqw;

    background: #fff;

    color: #111;

    text-decoration: none;

    font-family:
        Arial,
        sans-serif;

    font-size: 3.3cqw;

    font-weight: bold;

    letter-spacing: .3cqw;

}


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

.rsvp-page {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}


.rsvp-container {

    position: relative;

    z-index: 10;

    width: 86%;

    padding:
        6cqw 4.5cqw;

    border-radius: 4cqw;

    background:
        rgba(0,0,0,.25);

    border:
        .2cqw solid
        rgba(255,255,255,.25);

    backdrop-filter:
        blur(5px);

    text-align: center;

    box-shadow:
        0 3cqw 10cqw
        rgba(0,0,0,.35);

}


.rsvp-title {

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

    color: #fff;

    font-size: 15cqw;

    font-weight: bold;

    letter-spacing: .7cqw;

    line-height: 1;

    margin-bottom: 2cqw;

    text-shadow:
        0 2px 6px #000;

}


.rsvp-subtitle {

    color: #fff;

    font-family:
        Arial,
        sans-serif;

    font-size: 2.5cqw;

    letter-spacing: .4cqw;

    margin-bottom: 5cqw;

}


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

#rsvpForm {

    display: grid;

    gap: 2cqw;

}


#rsvpForm input {

    width: 100%;

    height: 11cqw;

    padding:
        0 3cqw;

    border-radius: 2cqw;

    border:
        .2cqw solid
        rgba(255,255,255,.5);

    outline: none;

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

    color: #111;

    font-family:
        Arial,
        sans-serif;

    font-size: 3.1cqw;

}


#rsvpForm input::placeholder {

    color: #555;

    letter-spacing: .2cqw;

}


#rsvpForm button {

    width: 100%;

    height: 11cqw;

    border: none;

    border-radius: 8cqw;

    background: #fff;

    color: #111;

    font-family:
        Arial,
        sans-serif;

    font-size: 2.3cqw;

    font-weight: bold;

    letter-spacing: .25cqw;

    cursor: pointer;

    touch-action: manipulation;

}


#rsvpMessage {

    color: #fff;

    font-size: 2.5cqw;

    margin-top: 2cqw;

}


.rsvp-bottom {

    color: #fff;

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

    font-size: 4cqw;

    font-style: italic;

    margin-top: 4cqw;

}


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

.music-toggle {

    position: fixed;

    z-index: 10000;

    right: 2%;

    top: 2%;

    width: 10cqw;

    height: 10cqw;

    max-width: 42px;

    max-height: 42px;

    min-width: 32px;

    min-height: 32px;

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

    border-radius: 50%;

    background:
        rgba(0,0,0,.45);

    color: #fff;

    font-size: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow:
        0 3px 12px
        rgba(0,0,0,.3);

    transition:
        transform .2s ease;

    touch-action: manipulation;

}


.music-toggle:active {

    transform:
        scale(.9);

}


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

@media (max-width: 600px) {

    .count-item,
    .rsvp-container {

        backdrop-filter: none;

        -webkit-backdrop-filter: none;

    }


    .full-video {

        transform:
            translate3d(0,0,0);

        -webkit-transform:
            translate3d(0,0,0);

        backface-visibility:
            hidden;

        -webkit-backface-visibility:
            hidden;

    }

}


/* =====================================================
   VERY SMALL PHONES
===================================================== */

@media (max-width: 340px) {

    .save-title {

        font-size: 9.5cqw;

    }


    .countdown {

        gap: 1cqw;

    }


    .count-item {

        flex-basis: 17cqw;

    }

}