/* ============================================
   Intro Animation Styles
   ============================================ */

/* Prevent scrolling during intro animation */
@keyframes enable-scroll {
    0%, 99% {
        overflow: hidden;
        height: 100vh;
    }
    100% {
        overflow: visible;
        height: auto;
    }
}

body.intro-active {
    animation: enable-scroll 1.5s linear forwards;
}

/* Stage 1: Icon fades in */
@keyframes intro-icon-stage {
    0% {
        opacity: 0;
    }
    30%, 100% {
        opacity: 0.7;
    }
}

/* Stage 3: Title appears */
@keyframes intro-title-stage {
    0%, 64% {
        opacity: 0;
        transform: translateY(10px);
    }
    65%, 100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stage 4: Horizontal rule draws */
@keyframes draw-line {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

/* Stage 5: Navigation appears */
@keyframes nav-appear {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stage 6: Content renders */
@keyframes fade-in-content {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.intro-animate {
    position: relative;
    z-index: 100;
}

.intro-animate .site-icon {
    position: relative;
    z-index: 101;
    animation: intro-icon-stage 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    will-change: opacity;
}

.intro-animate .site-title {
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: nav-appear 0.2s ease-in 0.4s forwards;
}

@keyframes restore-border {
    0%, 99% {
        border-bottom: none;
    }
    100% {
        border-bottom: 1px solid var(--secondary-color);
    }
}

.intro-animate .qev-nav-content {
    position: relative;
    overflow: visible;
    animation: restore-border 1.5s linear forwards;
}

.intro-animate .qev-nav-content::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 2px;
    width: 0;
    background-color: var(--secondary-color);
    animation: draw-line 0.6s ease-out 0.3s forwards;
    z-index: 10;
}

.intro-animate .qev-menu {
    opacity: 0;
    animation: nav-appear 0.2s ease-in 0.7s forwards;
}

@keyframes container-height {
    0%, 50% {
        min-height: 100vh;
    }
    51%, 100% {
        min-height: 0;
    }
}

body.intro-active > .container:first-of-type {
    overflow: hidden;
    animation: container-height 1.5s linear forwards;
}

body.intro-active > .container:nth-of-type(2) {
    animation: fade-in-content 0.5s ease 1s forwards;
    opacity: 0;
    margin-top: 0;
    transform: none;
    position: relative;
    top: 0;
}