/* Apex Animation Styles - Integrated Version */
:root {
    --fire-letter-cool: #fff;
    --fire-letter-cool-alt: #eee;
    --fire-letter-shadow: #fff;
    --tagline-color: #ffd700;
}

html[data-theme="light"] {
    --fire-letter-cool: #1a1a1a;
    --fire-letter-cool-alt: #333;
    --fire-letter-shadow: rgba(0, 0, 0, 0.2);
    --tagline-color: #ff4500;
}

.animation-container {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
}

/* --- CINEMATIC ANIMATION OVERLAY --- */
.cinematic-anim-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dark Deep Space BG */
    background: linear-gradient(to bottom, #000, #111 90%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.cinematic-anim-overlay.active {
    opacity: 1;
    pointer-events: none;
}

/* 1. COLLISION LINES - BLUE VS ORANGE */
.collision-line {
    position: absolute;
    top: 50%;
    height: 4px;
    border-radius: 2px;
    transform: translateY(-50%);
    opacity: 0;
}

/* Left: BLUE ICE/PLASMA */
.collision-line.left {
    left: -150px;
    width: 150px;
    background: linear-gradient(90deg, transparent, #00d4ff, #fff);
    box-shadow: 0 0 15px #00d4ff, 0 0 30px #00d4ff;
}

/* Right: ORANGE FIRE */
.collision-line.right {
    right: -150px;
    width: 150px;
    background: linear-gradient(270deg, transparent, #ff4500, #fff);
    box-shadow: 0 0 15px #ff4500, 0 0 30px #ff4500;
}

/* Animation: Slower Approach, Hard Impact */
.cinematic-anim-overlay.active .collision-line.left {
    animation: collide-left 1.2s cubic-bezier(0.5, 0, 0.9, 1) forwards;
}

.cinematic-anim-overlay.active .collision-line.right {
    animation: collide-right 1.2s cubic-bezier(0.5, 0, 0.9, 1) forwards;
}

@keyframes collide-left {
    0% {
        left: -150px;
        opacity: 1;
    }

    90% {
        left: 45%;
        width: 50px;
        opacity: 1;
    }

    /* Smash */
    100% {
        left: 50%;
        width: 0;
        opacity: 0;
    }
}

@keyframes collide-right {
    0% {
        right: -150px;
        opacity: 1;
    }

    90% {
        right: 45%;
        width: 50px;
        opacity: 1;
    }

    100% {
        right: 50%;
        width: 0;
        opacity: 0;
    }
}


/* 2. EXPLOSION CORE - MIXED COLORS, WIDER, LONGER */
.explosion-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    /* Mixing Blue #00d4ff and Orange #ff4500 */
    background: radial-gradient(circle, #fff 0%, #00d4ff 30%, #ff4500 60%, transparent 80%);
    opacity: 0;
    mix-blend-mode: screen;
    /* Blend nicely */
}

.cinematic-anim-overlay.active .explosion-core {
    /* Duration increased to 1.5s, Scale increased */
    animation: big-bang-mix 1.5s ease-out 1.1s forwards;
}

@keyframes big-bang-mix {
    0% {
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 1;
        filter: brightness(5);
    }

    10% {
        transform: translate(-50%, -50%) scale(15);
        opacity: 1;
        filter: brightness(2);
    }

    /* Shockwave */
    40% {
        transform: translate(-50%, -50%) scale(25);
        opacity: 0.8;
        filter: brightness(1.5);
    }

    /* Wide spread */
    100% {
        transform: translate(-50%, -50%) scale(35);
        opacity: 0;
        filter: brightness(0);
    }

    /* Fade huge */
}


/* 3. CONTENT CONTAINER */
.cinematic-content {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 1;
    transform-origin: center bottom;
}

/* No exit on container, we exit elements individually now for 'blow away' effect */


/* FIRE PARTICLES (PERSISTENT BASE FLAME) */
.fire-base {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 40px;
    /* Fire Base - Visible & Top Layer */
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
    /* Bring to front! */
}

.fire-particle {
    position: absolute;
    bottom: 0;
    width: 20px;
    /* Larger balls */
    height: 20px;
    border-radius: 50%;
    /* Perfect balls as requested 'balls of fire' */
    background: radial-gradient(circle, #ffff00 20%, #ff4500 80%, transparent);
    /* Bright core */
    filter: blur(1px);
    /* Less blur to be distinct balls */
    opacity: 0;
    box-shadow: 0 0 10px #ff4500;
}

.cinematic-anim-overlay.active .fire-particle {
    /* Keep fire burning until very end */
    animation: rise-fire 1s infinite ease-in, fade-fire-base 1s ease-out 13s forwards;
}

@keyframes rise-fire {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }

    20% {
        opacity: 1;
        transform: translateY(-20px) scale(1.2);
    }

    /* Explode up */
    100% {
        transform: translateY(-80px) scale(0);
        opacity: 0;
    }

    /* Fly high */
}

@keyframes fade-fire-base {
    to {
        opacity: 0;
    }
}

/* Extinguish at end */

/* Random positions */
.cinematic-anim-overlay.active .fire-particle.p1 {
    left: 10%;
    animation-delay: 1.2s;
}

.cinematic-anim-overlay.active .fire-particle.p2 {
    left: 30%;
    animation-duration: 1.2s;
    animation-delay: 1.3s;
}

.cinematic-anim-overlay.active .fire-particle.p3 {
    left: 50%;
    animation-duration: 0.9s;
    animation-delay: 1.2s;
}

.cinematic-anim-overlay.active .fire-particle.p4 {
    left: 70%;
    animation-duration: 1.3s;
    animation-delay: 1.4s;
}

.cinematic-anim-overlay.active .fire-particle.p5 {
    left: 90%;
    animation-duration: 1.1s;
    animation-delay: 1.5s;
}


/* LOGO: BURNS THEN COOLS DOWN */
.cinematic-apex-logo path {
    stroke-width: 1.5;
    /* Start orange */
    stroke-opacity: 0;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    fill-opacity: 0;
    filter: drop-shadow(0 0 5px #ff4500);
}

.cinematic-anim-overlay.active .cinematic-apex-logo {
    /* Apply heat distortion */
    filter: url(#fire-distortion);
    /* Individual 'Blow Away' Exit */
    animation: logo-blow-away 1.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) 13s forwards;
}

.cinematic-anim-overlay.active .cinematic-apex-logo path {
    /* Sequence: Draw (Fire) -> Cool Down (Gradient) */
    animation:
        draw-fire-intro 2s ease-out 1.2s forwards,
        cool-down-logo 3s ease-in-out 3.5s forwards;
    /* Starts cooling after draw */
}

@keyframes draw-fire-intro {
    0% {
        stroke-dashoffset: 400;
        stroke-opacity: 0;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-opacity: 1;
        filter: drop-shadow(0 0 10px #ff4500) sepia(1) hue-rotate(-50deg) saturate(5);
    }
}

@keyframes cool-down-logo {
    0% {
        fill-opacity: 0;
        filter: drop-shadow(0 0 10px #ff4500) sepia(1) hue-rotate(-50deg) saturate(5);
    }

    100% {
        fill-opacity: 1;
        filter: drop-shadow(0 0 5px #00d4ff) sepia(0) hue-rotate(0deg) saturate(1);
    }

    /* Ends with original Apex Gradient Blue/Purple */
}

@keyframes logo-blow-away {
    0% {
        opacity: 1;
        transform: translateX(0) rotate(0);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-100px) rotate(-20deg) scale(0.8);
        /* Blown to LEFT */
        filter: blur(10px);
    }
}


/* TEXT REVEAL - BURNS THEN COOLS */
.cinematic-text-wrapper {
    display: flex;
    align-items: center;
    gap: 1px;
}

.fire-letter {
    font-size: 22px;
    font-weight: 900;
    color: transparent;
    /* Start with Fire Gradient */
    background: linear-gradient(to top, #ffff00 0%, #ff4500 60%, #330000 100%);
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0;
    transform: translateY(5px);
    filter: drop-shadow(0 0 5px #ff4500);
}

.cinematic-anim-overlay.active .fire-letter {
    /* 1. Pop up (Fire) -> 2. Cool Down (White) -> 3. Blow Away (Dust) */
    animation:
        letter-pop-fire 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
        cool-down-text 3s ease-in-out 4s forwards;
    /* Exit animation applied individually below for staggering */
}

.cinematic-anim-overlay.active .fire-letter.l1 {
    animation-delay: 1.4s, 4s;
}

.cinematic-anim-overlay.active .fire-letter.l2 {
    animation-delay: 1.6s, 4.2s;
}

.cinematic-anim-overlay.active .fire-letter.l3 {
    animation-delay: 1.8s, 4.4s;
}

.cinematic-anim-overlay.active .fire-letter.l4 {
    animation-delay: 2.0s, 4.6s;
}

/* Redefining for animation stack: Pop -> Cool -> Blow Away */
.cinematic-anim-overlay.active .fire-letter.l1 {
    animation: letter-seq-1 14s forwards 1.4s;
}

.cinematic-anim-overlay.active .fire-letter.l2 {
    animation: letter-seq-2 14s forwards 1.6s;
}

.cinematic-anim-overlay.active .fire-letter.l3 {
    animation: letter-seq-3 14s forwards 1.8s;
}

.cinematic-anim-overlay.active .fire-letter.l4 {
    animation: letter-seq-4 14s forwards 2.0s;
}

@keyframes letter-seq-1 {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.5);
        background-image: linear-gradient(to top, #ff0, #f40);
        -webkit-text-fill-color: transparent;
    }

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

    20% {
        background-image: linear-gradient(to top, var(--fire-letter-cool), var(--fire-letter-cool-alt));
        -webkit-text-fill-color: var(--fire-letter-cool);
        filter: drop-shadow(0 0 5px var(--fire-letter-shadow));
    }

    85% {
        opacity: 1;
        transform: translate(0, 0);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: translate(-40px, -30px) rotate(-15deg);
        filter: blur(5px);
        color: #888;
    }
}

@keyframes letter-seq-2 {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.5);
        background-image: linear-gradient(to top, #ff0, #f40);
        -webkit-text-fill-color: transparent;
    }

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

    20% {
        background-image: linear-gradient(to top, var(--fire-letter-cool), var(--fire-letter-cool-alt));
        -webkit-text-fill-color: var(--fire-letter-cool);
        filter: drop-shadow(0 0 5px var(--fire-letter-shadow));
    }

    85% {
        opacity: 1;
        transform: translate(0, 0);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: translate(-50px, -20px) rotate(-30deg);
        filter: blur(6px);
        color: #888;
    }
}

@keyframes letter-seq-3 {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.5);
        background-image: linear-gradient(to top, #ff0, #f40);
        -webkit-text-fill-color: transparent;
    }

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

    20% {
        background-image: linear-gradient(to top, var(--fire-letter-cool), var(--fire-letter-cool-alt));
        -webkit-text-fill-color: var(--fire-letter-cool);
        filter: drop-shadow(0 0 5px var(--fire-letter-shadow));
    }

    85% {
        opacity: 1;
        transform: translate(0, 0);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: translate(-60px, -40px) rotate(-45deg);
        filter: blur(7px);
        color: #888;
    }
}

@keyframes letter-seq-4 {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.5);
        background-image: linear-gradient(to top, #ff0, #f40);
        -webkit-text-fill-color: transparent;
    }

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

    20% {
        background-image: linear-gradient(to top, var(--fire-letter-cool), var(--fire-letter-cool-alt));
        -webkit-text-fill-color: var(--fire-letter-cool);
        filter: drop-shadow(0 0 5px var(--fire-letter-shadow));
    }

    85% {
        opacity: 1;
        transform: translate(0, 0);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: translate(-70px, -25px) rotate(-60deg);
        filter: blur(8px);
        color: #888;
    }
}


/* TAGLINE */
.cinematic-tagline {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--tagline-color);
    text-shadow: 0 0 5px #ff4500;
    opacity: 0;
}

.cinematic-anim-overlay.active .cinematic-tagline,
.cinematic-anim-overlay.active .cinematic-separator {
    animation: tagline-fade 1s ease-out 2.5s forwards, blow-away-tagline 1.5s ease-in 13.5s forwards;
}

@keyframes tagline-fade {
    to {
        opacity: 1;
    }
}

@keyframes blow-away-tagline {
    to {
        opacity: 0;
        transform: translateX(50px);
        filter: blur(5px);
    }
}

.cinematic-separator {
    width: 2px;
    height: 24px;
    background: #ff4500;
    margin: 0 10px;
    opacity: 0;
    box-shadow: 0 0 10px #ff4500;
}
/* ===== FOOTER OVERRIDES ===== */
.fixed-footer-anim { position: fixed; bottom: 0; left: 0; width: 100%; height: 250px; z-index: 9999; pointer-events: none; display: flex; justify-content: center; align-items: flex-end; }
.cinematic-anim-overlay { height: 100%; top: auto; bottom: 0; background: transparent; transform: scale(0.8); transform-origin: bottom center; }
.cinematic-content { transform: translateY(0); }

/* Responsive Adjustments */
@media (max-width: 768px) {
    .cinematic-anim-overlay { transform: scale(0.6); }
    .fixed-footer-anim { height: 180px; }
}

@media (max-width: 480px) {
    .cinematic-anim-overlay { transform: scale(0.45); }
    .fixed-footer-anim { height: 140px; }
}