/* =========================================
   DIGITAL EXPLORER ANIMATION LIBRARY
   Version 2 - Mission Control
========================================= */

/* =========================================
   GLOBAL FADE ANIMATIONS
========================================= */

@keyframes fadeIn {

    from {

        opacity: 0;
    }

    to {

        opacity: 1;
    }
}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(40px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}

@keyframes fadeDown {

    from {

        opacity: 0;

        transform:
            translateY(-40px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}

.fade-in {

    animation:
        fadeIn 1s ease forwards;
}

.fade-up {

    animation:
        fadeUp .9s ease forwards;
}

.fade-down {

    animation:
        fadeDown .9s ease forwards;
}

/* =========================================
   DIGITAL EXPLORER LOGO
========================================= */

@keyframes rotateOrbit {

    from {

        transform:
            rotate(0deg);
    }

    to {

        transform:
            rotate(360deg);
    }
}

@keyframes pulseCore {

    0% {

        transform:
            scale(1);

        filter:
            drop-shadow(
                0 0 5px #00E5FF
            );
    }

    50% {

        transform:
            scale(1.08);

        filter:
            drop-shadow(
                0 0 25px #00E5FF
            );
    }

    100% {

        transform:
            scale(1);
    }
}

@keyframes nodeGlow {

    0% {

        opacity:
            .5;
    }

    50% {

        opacity:
            1;
    }

    100% {

        opacity:
            .5;
    }
}

.logo-orbit {

    animation:
        rotateOrbit 30s linear infinite;
}

.logo-core {

    animation:
        pulseCore 5s ease infinite;
}

.logo-node {

    animation:
        nodeGlow 3s ease infinite;
}

/* =========================================
   FLOATING PANELS
========================================= */

@keyframes floatSlow {

    0% {

        transform:
            translateY(0px);
    }

    50% {

        transform:
            translateY(-10px);
    }

    100% {

        transform:
            translateY(0px);
    }
}

.float {

    animation:
        floatSlow 7s ease-in-out infinite;
}

/* =========================================
   CARD HOVER EFFECTS
========================================= */

.card,
.glass-panel {

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.card:hover,
.glass-panel:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 20px 35px rgba(
            0,
            229,
            255,
            .15
        );
}

/* =========================================
   DASHBOARD COUNTERS
========================================= */

@keyframes counterPulse {

    0% {

        transform:
            scale(1);
    }

    50% {

        transform:
            scale(1.08);
    }

    100% {

        transform:
            scale(1);
    }
}

.number {

    animation:
        counterPulse 4s infinite;
}

/* =========================================
   SKILLS CONSTELLATION
========================================= */

@keyframes skillGlow {

    0% {

        box-shadow:
            0 0 0 rgba(
                0,
                229,
                255,
                0
            );
    }

    50% {

        box-shadow:
            0 0 25px rgba(
                0,
                229,
                255,
                .35
            );
    }

    100% {

        box-shadow:
            0 0 0 rgba(
                0,
                229,
                255,
                0
            );
    }
}

.skills-grid div {

    animation:
        skillGlow 6s infinite;
}

.skills-grid div:nth-child(2) {

    animation-delay:1s;
}

.skills-grid div:nth-child(3) {

    animation-delay:2s;
}

.skills-grid div:nth-child(4) {

    animation-delay:3s;
}

.skills-grid div:nth-child(5) {

    animation-delay:4s;
}

.skills-grid div:nth-child(6) {

    animation-delay:5s;
}

.skills-grid div:nth-child(7) {

    animation-delay:6s;
}

.skills-grid div:nth-child(8) {

    animation-delay:7s;
}

/* =========================================
   HERO TITLE SHIMMER
========================================= */

@keyframes shimmer {

    0% {

        background-position:
            -500px 0;
    }

    100% {

        background-position:
            500px 0;
    }
}

.hero h1 {

    background:
        linear-gradient(
            90deg,
            white,
            #00E5FF,
            white
        );

    background-size:
        1000px 100%;

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    animation:
        shimmer 8s linear infinite;
}

/* =========================================
   GALAXY TIMELINE
========================================= */

@keyframes timelinePulse {

    0% {

        transform:
            scale(1);

        box-shadow:
            0 0 0 rgba(
                0,
                229,
                255,
                0
            );
    }

    50% {

        transform:
            scale(1.05);

        box-shadow:
            0 0 20px rgba(
                0,
                229,
                255,
                .3
            );
    }

    100% {

        transform:
            scale(1);
    }
}

.timeline-entry {

    animation:
        timelinePulse 8s ease infinite;
}

.timeline-entry:nth-child(2) {

    animation-delay:1s;
}

.timeline-entry:nth-child(3) {

    animation-delay:2s;
}

.timeline-entry:nth-child(4) {

    animation-delay:3s;
}

.timeline-entry:nth-child(5) {

    animation-delay:4s;
}

/* =========================================
   STARS
========================================= */

@keyframes twinkle {

    0% {

        opacity:
            .2;
    }

    50% {

        opacity:
            1;
    }

    100% {

        opacity:
            .2;
    }
}

.star {

    animation:
        twinkle 3s infinite;
}

/* =========================================
   BUTTON EFFECTS
========================================= */

@keyframes glowButton {

    0% {

        box-shadow:
            0 0 5px rgba(
                0,
                229,
                255,
                .2
            );
    }

    50% {

        box-shadow:
            0 0 25px rgba(
                0,
                229,
                255,
                .6
            );
    }

    100% {

        box-shadow:
            0 0 5px rgba(
                0,
                229,
                255,
                .2
            );
    }
}

.primary-btn {

    animation:
        glowButton 4s infinite;
}

/* =========================================
   SCROLL REVEAL
========================================= */

.reveal {

    opacity:0;

    transform:
        translateY(40px);

    transition:
        all .8s ease;
}

.reveal.visible {

    opacity:1;

    transform:
        translateY(0);
}

/* =========================================
   NEBULA BACKGROUND
========================================= */

@keyframes nebulaDrift {

    0% {

        transform:
            translate(0,0)
            scale(1);
    }

    50% {

        transform:
            translate(20px,-20px)
            scale(1.02);
    }

    100% {

        transform:
            translate(0,0)
            scale(1);
    }
}

.nebula {

    animation:
        nebulaDrift 40s ease infinite;
}

/* =========================================
   AI ASSISTANT
========================================= */

@keyframes typingPulse {

    0% {

        opacity:.4;
    }

    50% {

        opacity:1;
    }

    100% {

        opacity:.4;
    }
}

.typing-indicator {

    animation:
        typingPulse 1s infinite;
}

/* =========================================
   MISSION CONTROL LOADED
========================================= */

.loaded .hero,
.loaded .dashboard,
.loaded .timeline,
.loaded .skills-grid {

    animation:
        fadeUp 1s ease forwards;
}