/* ==========================================================================
   Intro Animation Stylesheet
   Pure CSS intro animation sequence:
   - Total Logo Animation Duration: 3.7s
     * 0.0s - 0.7s (0% -> 18.9%): Slide-in elliptic top forward
     * 0.7s - 2.7s (18.9% -> 73%): Hold static (2 seconds)
     * 2.7s - 3.7s (73% -> 100%): Puff out center
   - Overlay Fade-out: Starts at 2.95s (0.25s after puff-out starts), takes 1.0s to fade out completely (total ~3.95s)
   - Scroll lock & pointer release: Unlocks automatically when animations finish
   ========================================================================== */

/* Prevent scrolling while the intro overlay is active */
html.has-intro-animation,
html.has-intro-animation body {
    overflow: hidden !important;
    height: 100% !important;
}

/* Intro Overlay Container */
#siteIntroOverlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-color: #000000;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    animation: intro-overlay-fade 1s cubic-bezier(0.25, 1, 0.5, 1) 2.95s forwards;
}

/* Intro Logo Wrapper */
#siteIntroOverlay .intro-logo-wrapper {
    width: 80%;
    max-width: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#siteIntroOverlay .intro-logo-wrapper img,
#siteIntroOverlay .intro-logo-wrapper svg {
    width: 100%;
    height: auto;
    max-height: 80vh;
    display: block;
    animation: intro-logo-sequence 3.7s both;
}

/* Combined Logo Sequence Animation */
@-webkit-keyframes intro-logo-sequence {
    /* 1. Entrance: slide-in-elliptic-top-fwd (0% to ~18.9% => 0.7s) */
    0% {
        -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
        -webkit-transform-origin: 50% 100%;
        opacity: 0;
    }
    18.9% {
        -webkit-transform: translateY(0) rotateX(0) scale(1);
        -webkit-transform-origin: 50% 1400px;
        opacity: 1;
        -webkit-filter: blur(0px);
    }

    /* 2. Hold: 2 seconds (18.9% to ~73.0% => 2.0s) */
    72.9% {
        -webkit-transform: translateY(0) rotateX(0) scale(1);
        -webkit-transform-origin: 50% 50%;
        opacity: 1;
        -webkit-filter: blur(0px);
    }

    /* 3. Exit: puff-out-center (73.0% to 100% => 1.0s) */
    100% {
        -webkit-transform: translateY(0) rotateX(0) scale(2);
        -webkit-transform-origin: 50% 50%;
        -webkit-filter: blur(4px);
        opacity: 0;
    }
}

@keyframes intro-logo-sequence {
    /* 1. Entrance: slide-in-elliptic-top-fwd (0% to ~18.9% => 0.7s) */
    0% {
        transform: translateY(-600px) rotateX(-30deg) scale(0);
        transform-origin: 50% 100%;
        opacity: 0;
    }
    18.9% {
        transform: translateY(0) rotateX(0) scale(1);
        transform-origin: 50% 1400px;
        opacity: 1;
        filter: blur(0px);
    }

    /* 2. Hold: 2 seconds (18.9% to ~73.0% => 2.0s) */
    72.9% {
        transform: translateY(0) rotateX(0) scale(1);
        transform-origin: 50% 50%;
        opacity: 1;
        filter: blur(0px);
    }

    /* 3. Exit: puff-out-center (73.0% to 100% => 1.0s) */
    100% {
        transform: translateY(0) rotateX(0) scale(2);
        transform-origin: 50% 50%;
        filter: blur(4px);
        opacity: 0;
    }
}

/* Overlay Fade-Out Animation */
@-webkit-keyframes intro-overlay-fade {
    0% {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    99% {
        opacity: 0;
        visibility: visible;
        pointer-events: none;
    }
    100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        display: none;
    }
}

@keyframes intro-overlay-fade {
    0% {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    99% {
        opacity: 0;
        visibility: visible;
        pointer-events: none;
    }
    100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        display: none;
    }
}