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

#final-countdown {

    position: fixed;

    inset: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #000;

    opacity: 0;

    visibility: hidden;

    z-index: 9999;

    transition:
        opacity 1s ease,
        visibility 1s ease;
}


/* =========================================
   ACTIVE
========================================= */

#final-countdown.active {

    opacity: 1;

    visibility: visible;

}


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

#final-number {

    font-size: clamp(
        180px,
        35vw,
        500px
    );

    font-weight: 600;

    line-height: 1;

    color: #fff;

    font-variant-numeric:
        tabular-nums;

    opacity: 0;

    transform: scale(0.85);

}


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

#final-number.show {

    animation:
        finalNumberIn
        0.8s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        forwards;

}


@keyframes finalNumberIn {

    0% {

        opacity: 0;

        transform:
            scale(0.85);

    }

    100% {

        opacity: 1;

        transform:
            scale(1);

    }

}


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

@media (max-width: 700px) {

    #final-number {

        font-size: 45vw;

    }

}