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

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

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;

    background: #000;

    user-select: none;
    -webkit-user-select: none;
}


/* =========================================================
   APP
========================================================= */

.app {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;
    height: 100dvh;

    overflow: hidden;

    background: #000;
}


/* =========================================================
   BOOK
========================================================= */

.book {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    perspective: 2500px;

    overflow: hidden;
}


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

.page {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    transform-origin: left center;
    transform-style: preserve-3d;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transform: rotateY(0deg);

    transition:
        transform 1.2s cubic-bezier(
            0.65,
            0.05,
            0.36,
            1
        );

    background: #000;

    will-change: transform;
}


/* =========================================================
   COMPLETE INVITATION IMAGE
========================================================= */

.page .invitation {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    /*
     * Complete image is always visible.
     * No cropping.
     */
    object-fit: contain;

    object-position: center;

    z-index: 2;

    display: block;

    pointer-events: none;
}


/* =========================================================
   BLURRED BACKGROUND
========================================================= */

.page .background {
    position: absolute;

    inset: -30px;

    width: calc(100% + 60px);
    height: calc(100% + 60px);

    object-fit: cover;

    filter: blur(25px);

    transform: scale(1.08);

    opacity: 0.75;

    z-index: 0;

    pointer-events: none;
}


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

.page.flipped {
    transform: rotateY(-180deg);
}

.page.current {
    transform: rotateY(0deg);
}


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

.countdown-overlay {

    position: fixed;

    /*
     * Initial position:
     * bottom center
     */
    left: 50%;

    bottom:
        calc(
            76px +
            env(safe-area-inset-bottom)
        );

    transform:
        translateX(-50%);

    z-index: 4500;

    width: max-content;

    max-width:
        calc(100vw - 20px);

    padding:
        10px 14px 12px;

    border-radius: 16px;

    background:
        rgba(0, 0, 0, 0.55);

    border:
        1px solid
        rgba(255,255,255,0.20);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    box-shadow:
        0 8px 30px
        rgba(0,0,0,0.45);

    color: #fff;

    text-align: center;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    /*
     * IMPORTANT:
     * Countdown can receive touch events.
     */
    pointer-events: auto;

    /*
     * Prevent browser scrolling while dragging.
     */
    touch-action: none;

    /*
     * Prevent text selection.
     */
    user-select: none;
    -webkit-user-select: none;

    cursor: grab;
}


/*
 * While dragging
 */

.countdown-overlay.dragging {

    cursor: grabbing;

    transition: none;
}


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

.countdown-title {

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

    margin-bottom: 7px;

    text-shadow:
        0 2px 5px
        rgba(0,0,0,0.7);
}


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

.countdown {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;
}


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

.countdown-unit {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;
}


/* =========================================================
   FLIP CARD
========================================================= */

.flip-card {

    position: relative;

    width: 48px;
    height: 48px;

    perspective: 500px;

    border-radius: 7px;

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            #3b3b3b 0%,
            #202020 50%,
            #151515 50%,
            #080808 100%
        );

    box-shadow:
        0 4px 10px
        rgba(0,0,0,0.50);

    border:
        1px solid
        rgba(255,255,255,0.16);
}


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

.flip-number {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 25px;

    font-weight: 700;

    line-height: 1;

    color: #fff;

    font-variant-numeric:
        tabular-nums;

    text-shadow:
        0 2px 4px
        rgba(0,0,0,0.8);

    z-index: 1;
}


/* =========================================================
   CARD CENTER LINE
========================================================= */

.flip-card::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    height: 1px;

    background:
        rgba(0,0,0,0.70);

    z-index: 20;
}


/* =========================================================
   TOP FLIP
========================================================= */

.flip-top {

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 50%;

    overflow: hidden;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    background:
        linear-gradient(
            to bottom,
            #3c3c3c,
            #222
        );

    transform-origin:
        bottom center;

    backface-visibility: hidden;

    z-index: 10;
}


.flip-top span {

    width: 100%;
    height: 200%;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 25px;

    font-weight: 700;

    color: #fff;

    text-shadow:
        0 2px 4px
        rgba(0,0,0,0.8);
}


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

.flip-bottom {

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 50%;

    overflow: hidden;

    display: flex;

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

    background:
        linear-gradient(
            to bottom,
            #171717,
            #080808
        );

    z-index: 3;
}


.flip-bottom span {

    width: 100%;
    height: 200%;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 25px;

    font-weight: 700;

    color: #fff;

    transform:
        translateY(-50%);

    text-shadow:
        0 2px 4px
        rgba(0,0,0,0.8);
}


/* =========================================================
   FLIP ANIMATION
========================================================= */

.flip-card.animate .flip-top {

    animation:
        countdownFlipTop
        0.55s
        cubic-bezier(
            0.37,
            0.01,
            0.20,
            1
        )
        forwards;
}


@keyframes countdownFlipTop {

    0% {
        transform:
            rotateX(0deg);
    }

    100% {
        transform:
            rotateX(-90deg);
    }
}


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

.countdown-label {

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

    opacity: 0.85;
}


/* =========================================================
   SEPARATOR
========================================================= */

.countdown-separator {

    font-size: 20px;

    font-weight: bold;

    margin-top: -13px;

    opacity: 0.8;
}


/* =========================================================
   LOADING
========================================================= */

.loading {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #000;

    color: white;

    font-family: Arial, sans-serif;

    font-size: 16px;
}


.loading.hidden {
    display: none;
}


/* =========================================================
   CONTROLS
========================================================= */

.controls {

    position: fixed;

    left: 50%;

    bottom:
        max(
            10px,
            env(safe-area-inset-bottom)
        );

    transform:
        translateX(-50%);

    z-index: 5000;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px 12px;

    border-radius: 30px;

    background:
        rgba(0,0,0,0.50);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


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

.control-btn {

    width: 42px;
    height: 42px;

    border: none;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.18);

    color: white;

    font-size: 22px;

    cursor: pointer;

    display: flex;

    align-items: center;
    justify-content: center;
}


.control-btn:active {

    transform:
        scale(0.92);
}


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

.page-counter {

    min-width: 55px;

    text-align: center;

    color: white;

    font-size: 13px;
}


/* =========================================================
   FULLSCREEN
========================================================= */

.fullscreen {

    position: fixed;

    right: 15px;

    top:
        max(
            15px,
            env(safe-area-inset-top)
        );

    z-index: 5000;
}


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

@media(max-width: 767px) {

    .countdown-overlay {

        bottom:
            calc(
                62px +
                env(safe-area-inset-bottom)
            );

        padding:
            7px 9px 9px;

        border-radius: 13px;
    }


    .countdown-title {

        font-size: 9px;

        letter-spacing: 2px;

        margin-bottom: 5px;
    }


    .countdown {

        gap: 3px;
    }


    .flip-card {

        width: 38px;
        height: 39px;

        border-radius: 5px;
    }


    .flip-number,
    .flip-top span,
    .flip-bottom span {

        font-size: 19px;
    }


    .countdown-label {

        font-size: 6px;

        letter-spacing: 0.7px;
    }


    .countdown-separator {

        font-size: 13px;

        margin-top: -10px;
    }


    .controls {

        bottom:
            max(
                8px,
                env(safe-area-inset-bottom)
            );

        padding:
            6px 9px;
    }


    .control-btn {

        width: 38px;
        height: 38px;

        font-size: 19px;
    }


    .page-counter {

        font-size: 12px;
    }
}


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

@media(max-width: 380px) {

    .countdown-overlay {

        padding:
            6px 7px 8px;
    }


    .flip-card {

        width: 34px;
        height: 35px;
    }


    .flip-number,
    .flip-top span,
    .flip-bottom span {

        font-size: 17px;
    }


    .countdown {

        gap: 2px;
    }


    .countdown-separator {

        font-size: 11px;
    }
}