/* =========================================
   Animation Keyframes
   ========================================= */

/* Floating animation for images */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Pulsing animation for elements */
@keyframes pulse {
    0% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
    100% {
        opacity: 0.4;
        transform: scale(1);
    }
}

/* Glowing border animation */
@keyframes glowBorder {
    0% {
        box-shadow: 0 0 5px rgba(255, 0, 255, 0.3),
                    0 0 10px rgba(0, 255, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 0, 255, 0.5),
                    0 0 30px rgba(0, 255, 255, 0.3);
    }
    100% {
        box-shadow: 0 0 5px rgba(255, 0, 255, 0.3),
                    0 0 10px rgba(0, 255, 255, 0.2);
    }
}

/* Typing animation */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* Cursor blinking animation */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--primary-color) }
}

/* Rotate animation */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Slide-in from bottom animation */
@keyframes slideInBottom {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Slide-in from left animation */
@keyframes slideInLeft {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide-in from right animation */
@keyframes slideInRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Scale-in animation */
@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Bounce animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

/* =========================================
   Animation Utility Classes
   ========================================= */

/* Apply floating animation */
.floating {
    animation: float 6s ease-in-out infinite;
}

/* Apply pulse animation */
.pulse {
    animation: pulse 3s ease-in-out infinite;
}

/* Apply glowing border animation */
.glow-border {
    animation: glowBorder 3s infinite;
}

/* Apply rotation animation */
.rotate {
    animation: rotate 10s linear infinite;
}

/* Apply fade-in animation */
.fade-in {
    animation: fadeIn 1s ease-out;
}

/* Apply slide-in from bottom animation */
.slide-up {
    animation: slideInBottom 1s ease-out;
}

/* Apply slide-in from left animation */
.slide-right {
    animation: slideInLeft 1s ease-out;
}

/* Apply slide-in from right animation */
.slide-left {
    animation: slideInRight 1s ease-out;
}

/* Apply scale-in animation */
.scale-in {
    animation: scaleIn 1s ease-out;
}

/* Apply bounce animation */
.bounce {
    animation: bounce 2s infinite;
}

/* =========================================
   Scroll Animations
   ========================================= */

/* Fade in elements as they scroll into view */
.fade-in-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Scale in elements as they scroll into view */
.scale-in-scroll {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scale-in-scroll.visible {
    opacity: 1;
    transform: scale(1);
}

/* Custom delay classes for staggered animations */
.delay-100 {
    animation-delay: 100ms;
}

.delay-200 {
    animation-delay: 200ms;
}

.delay-300 {
    animation-delay: 300ms;
}

.delay-400 {
    animation-delay: 400ms;
}

.delay-500 {
    animation-delay: 500ms;
}

/* =========================================
   Interactive Element Animations
   ========================================= */

/* Hover animation for interactive elements */
.hover-lift {
    transition: transform 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
}

/* Hover animation for cards */
.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.5), 0 0 30px rgba(0, 255, 255, 0.3);
}

/* Typing animation for text */
.typing-text {
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid var(--primary-color);
    animation: 
        typing 3.5s steps(40, end),
        blink-caret 0.75s step-end infinite;
}

/* =========================================
   Background Animations
   ========================================= */

/* Create a gradient background animation */
.gradient-bg {
    background: linear-gradient(270deg, var(--primary-color), var(--secondary-color), var(--accent-color));
    background-size: 600% 600%;
    animation: gradient-shift 15s ease infinite;
}

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

/* Create a twinkling stars background */
.stars-bg {
    background-color: var(--dark-color);
    background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 2px);
    background-size: 50px 50px;
    animation: twinkling 8s infinite alternate;
}

@keyframes twinkling {
    from { opacity: 0.3; }
    to { opacity: 0.8; }
}