/* Animated Portfolio Card Styles */
.portfolio-card {
    position: relative;
    padding: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    overflow: hidden;
    animation: cardFloat 6s ease-in-out infinite;
}

.glow-effect {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent, #ff6b6b, #4ecdc4, #45b7d1, transparent);
    animation: rotate 4s linear infinite;
}

.glowing-text {
    font-size: 2.5em;
    font-weight: bold;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient 3s ease infinite;
}

.animated-box {
    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    border-radius: 12px;
    animation: float 3s ease-in-out infinite;
}

@keyframes cardFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
}

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

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

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

// Interactive Magic Button with Particle Effects
const magicButton = document.querySelector('.magic-button');
const animatedBox = document.querySelector('.animated-box');

magicButton.addEventListener('click', function() {
    // Create magical particles
    createParticles();
    
    // Reset and enhance box animation
    animatedBox.style.animation = 'none';
    setTimeout(() => {
        animatedBox.style.animation = 'float 0.5s ease-in-out infinite';
    }, 10);
    
    // Change button text temporarily
    const originalText = magicButton.textContent;
    magicButton.textContent = 'Abracadabra!';
    setTimeout(() => {
        magicButton.textContent = originalText;
    }, 1000);
});

function createParticles() {
    for (let i = 0; i < 25; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        particle.style.left = Math.random() * 100 + '%';
        particle.style.animationDelay = Math.random() * 1 + 's';
        document.body.appendChild(particle);
        
        setTimeout(() => {
            particle.remove();
        }, 1000);
    }
}

// Typewriter Effect
const typewriterText = "Welcome to My Creative Space!";
const typewriterElement = document.getElementById('typewriter-text');
let charIndex = 0;

function typeWriter() {
    if (charIndex < typewriterText.length) {
        typewriterElement.textContent += typewriterText.charAt(charIndex);
        charIndex++;
        setTimeout(typeWriter, 100);
    }
}

// Initialize typewriter when page loads
document.addEventListener('DOMContentLoaded', typeWriter);