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

    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;

    opacity: 1;

    filter: none;

    transform:
        translate3d(0, 0, 0);

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

    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;
}


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

.first-page {
    position: relative;

    overflow: hidden;
}


/* =====================================================
   FIRST COVER
===================================================== */

.first-cover {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

    z-index: 20;

    cursor: pointer;

    opacity: 1;

    visibility: visible;

    transition:
        opacity .25s ease;
}


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

.first-video {
    z-index: 10;

    cursor: pointer;

    background: transparent;
}


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


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

}