/* ===============================================
   APEX WEBSITE - SIMPLE INTRO ANIMATION
   Just the logo - clean and simple
   =============================================== */

/* Simple intro animation */
.simple-intro-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.cinematic-overlay.active .simple-intro-content {
    animation: contentFadeIn 3s ease-out forwards;
}

@keyframes contentFadeIn {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Logo - Center */
.intro-apex-logo {
    position: relative;
    filter: drop-shadow(0 0 40px rgba(0, 212, 255, 0.8));
}

.intro-apex-logo path {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    fill-opacity: 0;
}

.intro-apex-logo .center-core {
    opacity: 0;
    transform-origin: center;
}

.cinematic-overlay.active .intro-apex-logo .left-blade,
.cinematic-overlay.active .intro-apex-logo .right-blade {
    animation: drawAndFill 1.5s ease-out 0.2s forwards;
}

.cinematic-overlay.active .intro-apex-logo .center-core {
    /* Waits for blades to draw, then drops in with a glitch */
    animation: 
        drawAndFillCore 0.8s ease-out 1.2s forwards,
        coreGlitchDrop 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1.2s forwards;
}

@keyframes drawAndFill {
    0% {
        stroke-dashoffset: 400;
        fill-opacity: 0;
    }
    60% {
        stroke-dashoffset: 0;
        fill-opacity: 0;
    }
    100% {
        stroke-dashoffset: 0;
        fill-opacity: 1;
    }
}

@keyframes drawAndFillCore {
    0% {
        stroke-dashoffset: 400;
        fill-opacity: 0;
    }
    100% {
        stroke-dashoffset: 0;
        fill-opacity: 1;
    }
}

@keyframes coreGlitchDrop {
    0% {
        opacity: 1;
        transform: translateY(-150px) scaleY(3) skewX(30deg);
        filter: blur(15px) hue-rotate(90deg) brightness(3);
    }
    40% {
        opacity: 1;
        transform: translateY(20px) scaleY(0.7) skewX(-15deg);
        filter: blur(4px) hue-rotate(-45deg) brightness(2);
    }
    60% {
        transform: translateY(-10px) scaleY(1.2) skewX(10deg);
        filter: blur(2px) hue-rotate(20deg) brightness(1.5);
    }
    80% {
        transform: translateY(5px) scaleY(0.9) skewX(-5deg);
        filter: blur(0) hue-rotate(-10deg) brightness(1.2);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1) skewX(0deg);
        filter: blur(0) hue-rotate(0deg) brightness(1);
    }
}

/* APEX Text */
.intro-text {
    font-family: var(--font-en);
    font-size: 36px;
    font-weight: 900;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 8px;
    margin-top: 20px;
    opacity: 0;
}

.cinematic-overlay.active .intro-text {
    animation: textFadeIn 1s ease 0.8s forwards;
}

@keyframes textFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}