/* Basic Animations */

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

@keyframes blob-animation {
    0% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(50px, 50px) scale(1.1);
    }
    66% {
        transform: translate(-50px, 20px) scale(0.9);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes morph {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    25% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
    50% {
        border-radius: 50% 60% 30% 60% / 30% 40% 70% 60%;
    }
    75% {
        border-radius: 60% 40% 60% 30% / 60% 40% 60% 40%;
    }
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}

@keyframes pulse {
    0% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(-50%) scale(1.5);
        opacity: 0.7;
    }
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0) translateX(-50%);
    }
    40% {
        transform: translateY(-10px) translateX(-50%);
    }
    60% {
        transform: translateY(-5px) translateX(-50%);
    }
}


/* Modal Animations */

@keyframes modal-appear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes modal-content-appear {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes section-appear {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes line-appear {
    0% {
        width: 0;
    }
    100% {
        width: 80px;
    }
}

@keyframes tech-item-appear {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* Dock Animation */

@keyframes dock-bounce {
    0% {
        transform: scale(0.7);
    }
    40% {
        transform: scale(1.1);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

.bounce-animation {
    animation: dock-bounce 0.5s cubic-bezier(0.3, 0.5, 0.5, 1.2);
}


/* Robot Animations */

@keyframes blink {
    0%,
    45%,
    50%,
    55%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    48%,
    52% {
        transform: scale(0.1);
        opacity: 0.5;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes roadStripe {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 40px;
    }
}

.road:before {
    animation: roadStripe 1s linear infinite paused;
}

.robot-container.moving+.road:before {
    animation-play-state: running;
}

@keyframes jellyBody {
    0% {
        transform: translateX(-50%) scaleY(1) scaleX(1);
    }
    25% {
        transform: translateX(-50%) scaleY(0.95) scaleX(1.05);
    }
    50% {
        transform: translateX(-50%) scaleY(1.05) scaleX(0.95);
    }
    75% {
        transform: translateX(-50%) scaleY(0.97) scaleX(1.03);
    }
    100% {
        transform: translateX(-50%) scaleY(1) scaleX(1);
    }
}

@keyframes jellyHead {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }
    25% {
        transform: translateX(-50%) rotate(-2deg);
    }
    75% {
        transform: translateX(-50%) rotate(2deg);
    }
    100% {
        transform: translateX(-50%) rotate(0deg);
    }
}

@keyframes arrivalBounce {
    0% {
        transform: translateX(-50%) scale(1);
    }
    20% {
        transform: translateX(-50%) scale(1.1, 0.9);
    }
    40% {
        transform: translateX(-50%) scale(0.95, 1.05);
    }
    60% {
        transform: translateX(-50%) scale(1.05, 0.95);
    }
    80% {
        transform: translateX(-50%) scale(0.98, 1.02);
    }
    100% {
        transform: translateX(-50%) scale(1);
    }
}

@keyframes hologram {
    0% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 0.3;
    }
}

@keyframes morphBody {
    0% {
        transform: translateX(-50%) scale(1);
    }
    30% {
        transform: translateX(-50%) scale(0.8, 1.2);
    }
    60% {
        transform: translateX(-50%) scale(1.1, 0.9);
    }
    100% {
        transform: translateX(-50%) scale(1);
    }
}

@keyframes morphHead {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }
    25% {
        transform: translateX(-50%) rotate(-5deg) scale(1.1);
    }
    75% {
        transform: translateX(-50%) rotate(5deg) scale(0.9);
    }
    100% {
        transform: translateX(-50%) rotate(0deg) scale(1);
    }
}


/* Active States */

.robot-container.moving .robot-wheel {
    animation-play-state: running;
}

.robot-container.moving .robot-light {
    opacity: 1;
}

.robot-container.moving .robot-body {
    animation: jellyBody 1s infinite alternate;
}

.robot-container.moving .robot-head {
    animation: jellyHead 1.2s infinite alternate;
}

.robot-container.at-stop .robot-body {
    animation: arrivalBounce 0.8s;
}

.robot-container.at-stop .robot-arm.left {
    transform: rotate(70deg);
}

.robot-container.at-stop .robot-arm.right {
    transform: rotate(-70deg);
}

.experience-item.active:before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 10px;
    background: linear-gradient(45deg, transparent, rgba(66, 134, 244, 0.2), transparent);
    z-index: -1;
    animation: hologram 3s infinite;
}

.robot-container.morphing .robot-body {
    animation: morphBody 0.6s forwards;
}

.robot-container.morphing .robot-head {
    animation: morphHead 0.7s forwards;
}


/* Dock Glow Effect */

.dock-item.active {
    animation: activeGlow 4s ease-in-out infinite alternate;
}

@keyframes activeGlow {
    0% {
        box-shadow: 0 11px 33px rgba(59, 130, 246, 0.5), 0 8px 22px rgba(0, 0, 0, 0.5), 0 5px 14px rgba(0, 0, 0, 0.4), inset 0 2px 5px rgba(255, 255, 255, 0.7), inset 0 -2px 5px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 22px rgba(59, 130, 246, 0.4);
    }
    100% {
        box-shadow: 0 14px 39px rgba(59, 130, 246, 0.7), 0 10px 25px rgba(0, 0, 0, 0.5), 0 6px 17px rgba(0, 0, 0, 0.4), inset 0 2px 5px rgba(255, 255, 255, 0.8), inset 0 -2px 5px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 28px rgba(59, 130, 246, 0.6);
    }
}


/* Gradient movement */

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


/* Jelly-like morphing */

@keyframes jellyMorph {
    0%,
    100% {
        transform: scale(1, 1);
    }
    25% {
        transform: scale(1.05, 0.95) skewX(2deg);
    }
    50% {
        transform: scale(0.95, 1.05) skewY(2deg);
    }
    75% {
        transform: scale(1.02, 0.98) skewX(-2deg);
    }
}

@keyframes snakeMove {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 50% 0%;
    }
    50% {
        background-position: 100% 50%;
    }
    75% {
        background-position: 50% 100%;
    }
    100% {
        background-position: 0% 50%;
    }
}