/* === ANIMATIONS === */

/* Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rotateCube {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    16.66% {
        transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
    }

    33.33% {
        transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
    }

    50% {
        transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg);
    }

    66.66% {
        transform: rotateX(90deg) rotateY(270deg) rotateZ(0deg);
    }

    83.33% {
        transform: rotateX(-90deg) rotateY(270deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg);
    }
}

@keyframes fill-timeline-line {
    0% {
        transform: scaleY(0);
    }

    50% {
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(0);
    }
}

/* Meteors */
@keyframes meteor-animation {
    0% {
        opacity: 0;
        transform: translateX(-200px) translateY(200px);
    }

    10% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
        transform: translateX(800px) translateY(-800px);
    }
}

/* Base Classes */
.fade-in {
    animation: fadeInUp 0.8s ease-out forwards;
}

.page-transition {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.meteors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.meteor {
    position: absolute;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.3);
    animation: meteor-animation linear infinite;
    z-index: 0;
    will-change: transform, opacity;
}

.meteor::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(-45deg);
    width: 150px;
    height: 1.5px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.7), transparent);
    filter: blur(1px);
}

/* Utility Animations */
.glow-effect:hover {
    box-shadow: 0 0 30px rgba(23, 162, 184, 0.6);
    transition: box-shadow 0.3s ease;
}