/* =========================================================
   ECOVG EVENT COUNTDOWN
   COMPLETE FINAL CSS
   ========================================================= */


/* =========================================================
   1. FULL SCREEN EVENT OVERLAY
   ========================================================= */

#ecovg-event-overlay {

    position: fixed;

    inset: 0;

    width: 100vw;

    height: 100dvh;

    z-index: 2147483647;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #ffffff;

    background-image: url(
        'assets/desktop-bg-countdown-image.png'
    );

    background-position: center center;

    background-repeat: no-repeat;

    background-size: 100% 100%;

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

    color: #17365D;

    overflow: hidden;

    box-sizing: border-box;

    /*
     * IMPORTANT:
     * Overlay starts hidden only after JS has initialized.
     * Before that, the loading state below keeps it visible
     * so the actual WordPress website does not flash.
     */

    opacity: 0;

    visibility: hidden;

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


/* =========================================================
   2. FORCE OUTFIT EVERYWHERE
   ========================================================= */

#ecovg-event-overlay *,
#ecovg-event-overlay *::before,
#ecovg-event-overlay *::after {

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

    box-sizing: border-box;
}


/* =========================================================
   3. INITIAL LOADING STATE
   =========================================================

   Before JavaScript adds .ecovg-ready:

   • Overlay is visible
   • Underlying WordPress website is hidden
   • Background artwork is already visible

   This prevents the 0.5–2 second website flash.
   ========================================================= */

#ecovg-event-overlay:not(.ecovg-ready) {

    opacity: 1;

    visibility: visible;

    pointer-events: all;
}


/* =========================================================
   4. ACTIVE STATE
   ========================================================= */

#ecovg-event-overlay.ecovg-active {

    opacity: 1;

    visibility: visible;
}


/* =========================================================
   5. GUARANTEED BOTTOM GRADIENT STRIP
   ========================================================= */

#ecovg-event-overlay::after {

    content: "";

    position: fixed;

    left: 0;

    right: 0;

    bottom: 0;

    width: 100%;

    height: 6px;

    z-index: 999999;

    background:
        linear-gradient(
            90deg,
            #F03C9B 0%,
            #C83FA7 28%,
            #7355B9 55%,
            #40B4D4 100%
        );

    pointer-events: none;
}


/* =========================================================
   6. MAIN CONTENT
   ========================================================= */

.ecovg-event-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1450px;

    margin: 0 auto;

    padding:
        50px
        70px;

    text-align: center;
}


/* =========================================================
   7. MAIN HEADLINE
   ========================================================= */

.ecovg-event-headline {

    margin: 0 auto;

    color: #17365D;

    font-size:
        clamp(
            48px,
            4.8vw,
            78px
        );

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -0.045em;
}


/* =========================================================
   8. HEADLINE LINE
   ========================================================= */

.ecovg-headline-line {

    display: block;
}


/* =========================================================
   9. HIGHLIGHTED HEADLINE TEXT
   ========================================================= */

.ecovg-highlight {

    background:
        linear-gradient(
            90deg,
            #F03C9B 0%,
            #C45AC8 48%,
            #48BBD9 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;

    font-weight: 400;
}


/* =========================================================
   10. NORMAL HEADLINE TEXT
   ========================================================= */

.ecovg-normal {

    color: #17365D;
}


/* =========================================================
   11. TOP GRADIENT DIVIDER
   ========================================================= */

.ecovg-gradient-divider {

    width: 90px;

    height: 3px;

    margin:
        25px
        auto
        18px;

    background:
        linear-gradient(
            90deg,
            #F03C9B 0%,
            #C45AC8 50%,
            #48BBD9 100%
        );

    border-radius: 10px;
}


/* =========================================================
   12. STAY TUNED
   ========================================================= */

.ecovg-stay-tuned {

    margin:
        0
        auto
        30px;

    font-size: 20px;

    font-weight: 500;

    line-height: 1.2;

    letter-spacing: 0.28em;

    color: #7E8998;

    text-transform: uppercase;
}


/* =========================================================
   13. COUNTDOWN WRAPPER
   ========================================================= */

.ecovg-countdown {

    display: flex;

    align-items: stretch;

    justify-content: center;

    width: 100%;

    max-width: 1050px;

    margin: 0 auto;
}


/* =========================================================
   14. COUNTDOWN ITEM
   ========================================================= */

.ecovg-countdown-item {

    flex:
        1
        1
        0;

    min-width: 0;

    text-align: center;

    padding:
        0
        32px;
}


/* =========================================================
   15. COUNTDOWN NUMBERS
   ========================================================= */

.ecovg-countdown-number {

    font-size:
        clamp(
            64px,
            6.5vw,
            100px
        );

    font-weight: 400;

    line-height: 0.95;

    letter-spacing: -0.055em;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   16. COUNTDOWN COLORS
   ========================================================= */

.ecovg-days {

    color: #173E70;
}


.ecovg-hours {

    color: #EC378D;
}


.ecovg-minutes {

    color: #40B4D4;
}


.ecovg-seconds {

    color: #A153C0;
}


/* =========================================================
   17. COUNTDOWN LABELS
   ========================================================= */

.ecovg-countdown-label {

    margin-top: 13px;

    font-size: 10px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 0.32em;

    color: #8A929D;

    text-transform: uppercase;
}


/* =========================================================
   18. COUNTDOWN DIVIDERS
   ========================================================= */

.ecovg-countdown-divider {

    width: 1px;

    height: 78px;

    align-self: center;

    flex:
        0
        0
        1px;

    background:
        rgba(
            23,
            54,
            93,
            0.12
        );
}


/* =========================================================
   19. CONTACT SECTION
   ========================================================= */

.ecovg-contact {

    margin-top: 58px;

    text-align: center;
}


/* =========================================================
   20. EMAIL ICON
   ========================================================= */

.ecovg-email-icon {

    width: 38px;

    height: 38px;

    margin:
        0
        auto
        18px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   21. EMAIL SVG
   ========================================================= */

.ecovg-email-icon svg {

    width: 38px;

    height: 38px;

    fill: none;

    stroke: #B35CC8;

    stroke-width: 1.25;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   22. NEED TO REACH US
   ========================================================= */

.ecovg-contact-question {

    margin-bottom: 9px;

    font-size: 22px;

    font-weight: 400;

    line-height: 1.4;

    color: #687485;
}


/* =========================================================
   23. EMAIL ADDRESS
   ========================================================= */

.ecovg-contact-email {

    display: inline-block;

    font-size: 20px;

    font-weight: 400;

    line-height: 1.4;

    color: #ED3B92;

    text-decoration: none;

    transition:
        opacity
        0.2s
        ease;
}


/* =========================================================
   24. EMAIL HOVER
   ========================================================= */

.ecovg-contact-email:hover {

    opacity: 0.7;
}


/* =========================================================
   25. CONTACT BOTTOM DIVIDER
   ========================================================= */

.ecovg-divider-bottom {

    width: 90px;

    height: 3px;

    margin-top: 42px;

    margin-bottom: 28px;

    background:
        linear-gradient(
            90deg,
            #F03C9B 0%,
            #C45AC8 50%,
            #48BBD9 100%
        );

    border-radius: 10px;
}


/* =========================================================
   26. FOOTER MESSAGE
   ========================================================= */

.ecovg-footer-message {

    font-size: 16px;

    font-weight: 500;

    line-height: 1.3;

    letter-spacing: 0.25em;

    color: #949CA7;

    text-transform: uppercase;
}


/* =========================================================
   27. REVEAL ANIMATION
   ========================================================= */

#ecovg-event-overlay.ecovg-reveal {

    animation:
        ecovgReveal
        1.8s
        cubic-bezier(
            .77,
            0,
            .18,
            1
        )
        forwards;
}


/* =========================================================
   28. REVEAL KEYFRAMES
   ========================================================= */

@keyframes ecovgReveal {

    0% {

        opacity: 1;

        transform:
            scale(1);
    }


    35% {

        opacity: 1;

        transform:
            scale(1.012);
    }


    70% {

        opacity: 0.72;

        transform:
            scale(1.055);
    }


    100% {

        opacity: 0;

        transform:
            scale(1.11);

        visibility: hidden;
    }
}


/* =========================================================
   29. LOCK BODY SCROLL
   ========================================================= */

body:has(
    #ecovg-event-overlay.ecovg-active
) {

    overflow: hidden;
}


/* =========================================================
   =========================================================
   FINAL 10 SECOND COUNTDOWN
   =========================================================
   ========================================================= */


/* =========================================================
   30. FINAL COUNTDOWN NUMBER
   ========================================================= */

#ecovg-final-countdown {

    position: absolute;

    left: 50%;

    top: 50%;

    z-index: 100;

    width: 100%;

    text-align: center;

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

    transform-origin:
        center center;

    opacity: 0;

    pointer-events: none;

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

    font-size:
        clamp(
            150px,
            14vw,
            240px
        );

    font-weight: 400;

    line-height: 0.85;

    letter-spacing:
        -0.07em;

    background:
        linear-gradient(
            90deg,
            #173E70 0%,
            #EC378D 42%,
            #A153C0 70%,
            #40B4D4 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    color:
        transparent;
}


/* =========================================================
   31. HIDE NORMAL CONTENT DURING FINAL COUNTDOWN
   ========================================================= */

#ecovg-event-overlay.ecovg-final-countdown-active
.ecovg-event-content {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

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


/* =========================================================
   32. HIDE DECORATIVE CONTENT DURING FINAL COUNTDOWN
   ========================================================= */

#ecovg-event-overlay.ecovg-final-countdown-active
.ecovg-gradient-divider,

#ecovg-event-overlay.ecovg-final-countdown-active
.ecovg-stay-tuned,

#ecovg-event-overlay.ecovg-final-countdown-active
.ecovg-countdown,

#ecovg-event-overlay.ecovg-final-countdown-active
.ecovg-contact,

#ecovg-event-overlay.ecovg-final-countdown-active
.ecovg-divider-bottom,

#ecovg-event-overlay.ecovg-final-countdown-active
.ecovg-footer-message {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


/* =========================================================
   33. SHOW FINAL COUNTDOWN NUMBER
   ========================================================= */

#ecovg-event-overlay.ecovg-final-countdown-active
#ecovg-final-countdown {

    opacity: 1;
}


/* =========================================================
   34. FINAL NUMBER POP ANIMATION
   ========================================================= */

#ecovg-final-countdown.ecovg-final-number-pop {

    animation:
        ecovgFinalNumberPop
        0.82s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        )
        forwards;
}


/* =========================================================
   35. FINAL NUMBER POP KEYFRAMES
   ========================================================= */

@keyframes ecovgFinalNumberPop {

    0% {

        opacity: 0;

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

        filter:
            blur(8px);
    }


    25% {

        opacity: 1;

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

        filter:
            blur(0);
    }


    48% {

        opacity: 1;

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

        filter:
            blur(0);
    }


    100% {

        opacity: 0.92;

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

        filter:
            blur(0);
    }
}


/* =========================================================
   36. LARGE DESKTOP — 1200PX+
   ========================================================= */

@media (min-width: 1200px) {

    .ecovg-event-content {

        max-width:
            1450px;

        padding:
            55px
            80px;
    }


    .ecovg-event-headline {

        font-size:
            78px;
    }


    .ecovg-stay-tuned {

        font-size:
            20px;
    }


    .ecovg-countdown {

        max-width:
            1050px;
    }


    .ecovg-countdown-number {

        font-size:
            100px;
    }


    .ecovg-countdown-item {

        padding:
            0
            32px;
    }


    .ecovg-contact {

        margin-top:
            62px;
    }


    .ecovg-contact-question {

        font-size:
            22px;
    }


    .ecovg-contact-email {

        font-size:
            20px;
    }


    .ecovg-footer-message {

        font-size:
            16px;

        letter-spacing:
            0.25em;
    }


    /* -----------------------------------------------------
       FINAL COUNTDOWN — DESKTOP
       ----------------------------------------------------- */

    #ecovg-final-countdown {

        font-size:
            clamp(
                170px,
                15vw,
                260px
            );

        letter-spacing:
            -0.075em;
    }
}


/* =========================================================
   37. TABLET — 768PX TO 1199PX
   ========================================================= */

@media (
    min-width: 768px
)
and (
    max-width: 1199px
) {

    #ecovg-event-overlay {

        background-image:
            url(
                'assets/desktop-bg-countdown-image.png'
            );

        background-size:
            100% 100%;

        background-position:
            center center;
    }


    .ecovg-event-content {

        max-width:
            1050px;

        padding:
            40px
            35px;
    }


    .ecovg-event-headline {

        font-size:
            clamp(
                44px,
                5.5vw,
                65px
            );
    }


    .ecovg-stay-tuned {

        font-size:
            18px;
    }


    .ecovg-countdown-number {

        font-size:
            clamp(
                52px,
                7vw,
                82px
            );
    }


    .ecovg-countdown-item {

        padding:
            0
            16px;
    }


    .ecovg-countdown-divider {

        height:
            62px;
    }


    .ecovg-contact {

        margin-top:
            50px;
    }


    .ecovg-contact-question {

        font-size:
            18px;
    }


    .ecovg-contact-email {

        font-size:
            17px;
    }


    .ecovg-footer-message {

        font-size:
            13px;

        letter-spacing:
            0.23em;
    }


    /* -----------------------------------------------------
       FINAL COUNTDOWN — TABLET
       ----------------------------------------------------- */

    #ecovg-final-countdown {

        font-size:
            clamp(
                130px,
                16vw,
                200px
            );
    }
}


/* =========================================================
   38. MOBILE — UP TO 767PX
   ========================================================= */

@media (max-width: 767px) {

    #ecovg-event-overlay {

        width:
            100vw;

        height:
            100dvh;


        /* -------------------------------------------------
           MOBILE BACKGROUND
           -------------------------------------------------

           1080 x 1920

           auto 100% preserves the original aspect ratio
           and prevents the artwork from stretching.
           ------------------------------------------------- */

        background-image:
            url(
                'assets/mobile-bg-countdown-image.png'
            );

        background-position:
            center center;

        background-repeat:
            no-repeat;

        background-size:
            auto 100%;
    }


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

    .ecovg-event-content {

        width:
            100%;

        max-width:
            100%;

        padding:
            30px
            16px
            32px;
    }


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

    .ecovg-event-headline {

        font-size:
            clamp(
                32px,
                9.5vw,
                48px
            );

        line-height:
            1.08;

        letter-spacing:
            -0.045em;
    }


    /* =====================================================
       MOBILE TOP DIVIDER
       ===================================================== */

    .ecovg-gradient-divider {

        width:
            62px;

        height:
            2px;

        margin:
            18px
            auto
            14px;
    }


    /* =====================================================
       MOBILE STAY TUNED
       ===================================================== */

    .ecovg-stay-tuned {

        margin-bottom:
            25px;

        font-size:
            15px;

        font-weight:
            500;

        line-height:
            1.2;

        letter-spacing:
            0.20em;
    }


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

    .ecovg-countdown {

        width:
            100%;

        max-width:
            100%;

        margin:
            0
            auto;
    }


    .ecovg-countdown-item {

        padding:
            0
            4px;
    }


    .ecovg-countdown-number {

        font-size:
            clamp(
                34px,
                10.5vw,
                54px
            );

        letter-spacing:
            -0.045em;
    }


    .ecovg-countdown-label {

        margin-top:
            8px;

        font-size:
            6px;

        letter-spacing:
            0.20em;
    }


    .ecovg-countdown-divider {

        height:
            44px;

        background:
            rgba(
                23,
                54,
                93,
                0.10
            );
    }


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

    .ecovg-contact {

        margin-top:
            42px;
    }


    /* -----------------------------------------------------
       EMAIL ICON
       ----------------------------------------------------- */

    .ecovg-email-icon {

        width:
            30px;

        height:
            30px;

        margin-bottom:
            13px;
    }


    .ecovg-email-icon svg {

        width:
            30px;

        height:
            30px;
    }


    /* -----------------------------------------------------
       NEED TO REACH US
       ----------------------------------------------------- */

    .ecovg-contact-question {

        margin-bottom:
            7px;

        font-size:
            16px;

        line-height:
            1.4;
    }


    /* -----------------------------------------------------
       EMAIL
       ----------------------------------------------------- */

    .ecovg-contact-email {

        font-size:
            15px;

        line-height:
            1.4;
    }


    /* -----------------------------------------------------
       BOTTOM DIVIDER
       ----------------------------------------------------- */

    .ecovg-divider-bottom {

        width:
            65px;

        height:
            2px;

        margin-top:
            30px;

        margin-bottom:
            20px;

        background:
            linear-gradient(
                90deg,
                #F03C9B 0%,
                #C45AC8 50%,
                #48BBD9 100%
            );
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .ecovg-footer-message {

        font-size:
            11px;

        line-height:
            1.3;

        letter-spacing:
            0.20em;
    }


    /* =====================================================
       MOBILE BOTTOM GRADIENT STRIP
       ===================================================== */

    #ecovg-event-overlay::after {

        content:
            "";

        position:
            fixed;

        left:
            0;

        right:
            0;

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

        width:
            100%;

        height:
            6px;

        z-index:
            999999;

        background:
            linear-gradient(
                90deg,
                #F03C9B 0%,
                #C83FA7 28%,
                #7355B9 55%,
                #40B4D4 100%
            );

        pointer-events:
            none;

        margin:
            0;
    }


    /* =====================================================
       FINAL COUNTDOWN — MOBILE
       ===================================================== */

    #ecovg-final-countdown {

        font-size:
            clamp(
                100px,
                30vw,
                150px
            );

        letter-spacing:
            -0.065em;
    }
}


/* =========================================================
   39. SMALL MOBILE — UP TO 380PX
   ========================================================= */

@media (max-width: 380px) {

    .ecovg-event-content {

        padding:
            22px
            10px
            25px;
    }


    /* -----------------------------------------------------
       HEADLINE
       ----------------------------------------------------- */

    .ecovg-event-headline {

        font-size:
            29px;
    }


    /* -----------------------------------------------------
       STAY TUNED
       ----------------------------------------------------- */

    .ecovg-stay-tuned {

        margin-bottom:
            20px;

        font-size:
            14px;

        letter-spacing:
            0.18em;
    }


    /* -----------------------------------------------------
       COUNTDOWN
       ----------------------------------------------------- */

    .ecovg-countdown-number {

        font-size:
            31px;
    }


    .ecovg-countdown-label {

        font-size:
            5px;

        letter-spacing:
            0.15em;
    }


    .ecovg-countdown-item {

        padding:
            0
            2px;
    }


    .ecovg-countdown-divider {

        height:
            38px;
    }


    /* -----------------------------------------------------
       CONTACT
       ----------------------------------------------------- */

    .ecovg-contact {

        margin-top:
            34px;
    }


    .ecovg-email-icon {

        width:
            25px;

        height:
            25px;

        margin-bottom:
            9px;
    }


    .ecovg-email-icon svg {

        width:
            25px;

        height:
            25px;
    }


    .ecovg-contact-question {

        font-size:
            14px;
    }


    .ecovg-contact-email {

        font-size:
            13px;
    }


    .ecovg-divider-bottom {

        width:
            60px;

        height:
            2px;

        margin-top:
            23px;

        margin-bottom:
            17px;
    }


    .ecovg-footer-message {

        font-size:
            9px;

        letter-spacing:
            0.17em;
    }


    /* -----------------------------------------------------
       FINAL COUNTDOWN — SMALL MOBILE
       ----------------------------------------------------- */

    #ecovg-final-countdown {

        font-size:
            clamp(
                90px,
                29vw,
                125px
            );
    }


    /* -----------------------------------------------------
       BOTTOM STRIP
       ----------------------------------------------------- */

    #ecovg-event-overlay::after {

        height:
            5px;

        bottom:
            env(
                safe-area-inset-bottom,
                0px
            );
    }
}


/* =========================================================
   40. SHORT MOBILE SCREENS
   ========================================================= */

@media (
    max-height: 700px
)
and (
    max-width: 767px
) {

    .ecovg-event-content {

        padding-top:
            16px;

        padding-bottom:
            16px;
    }


    .ecovg-event-headline {

        font-size:
            27px;
    }


    .ecovg-gradient-divider {

        margin-top:
            11px;

        margin-bottom:
            9px;
    }


    .ecovg-stay-tuned {

        margin-bottom:
            15px;

        font-size:
            14px;
    }


    .ecovg-contact {

        margin-top:
            25px;
    }


    .ecovg-divider-bottom {

        margin-top:
            17px;

        margin-bottom:
            11px;
    }
}


/* =========================================================
   41. REDUCED MOTION
   ========================================================= */

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

    #ecovg-event-overlay {

        transition:
            none;
    }


    #ecovg-event-overlay.ecovg-reveal {

        animation:
            none;

        opacity:
            0;

        visibility:
            hidden;
    }


    #ecovg-final-countdown.ecovg-final-number-pop {

        animation:
            none;
    }
}


/* =========================================================
   END OF ECOVG EVENT COUNTDOWN CSS
   ========================================================= */
   
   /* =========================================================
   SERVER-SIDE ACTIVE STATE
   ========================================================= */

#ecovg-event-overlay.ecovg-server-active {

    opacity: 1;

    visibility: visible;
}