/* Keyframes */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scrollDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes orbit {
    from { transform: rotate(0deg) translateX(30px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}

/* Animation Classes */
.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

.animate-scroll-down {
    animation: scrollDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-pulse {
    animation: pulse 2s infinite ease-in-out;
}

/* Constellation Loader */
.constellation-loader {
    width: 80px;
    height: 80px;
    position: relative;
    border: 2px solid rgba(124, 58, 237, 0.1);
    border-radius: 50%;
}

.constellation-loader::before,
.constellation-loader::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: #f59e0b;
    border-radius: 50%;
    box-shadow: 0 0 10px #f59e0b;
}

.constellation-loader::before {
    animation: orbit 3s linear infinite;
}

.constellation-loader::after {
    width: 4px;
    height: 4px;
    background: #06b6d4;
    box-shadow: 0 0 8px #06b6d4;
    animation: orbit 5s linear infinite reverse;
}

/* Reveal Circular Animation for Canvas */
.reveal-circular {
    clip-path: circle(0% at 50% 50%);
    transition: clip-path 1.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.reveal-circular.active {
    clip-path: circle(100% at 50% 50%);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes scaleUp {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes cardReveal {
    from { opacity: 0; transform: translateY(20px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.animate-shake {
    animation: shake 0.2s ease-in-out infinite;
}

.animate-scale-up {
    animation: scaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.card-reveal-animation {
    animation: cardReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}