/* Dark/Light Theme Variables and Animations */

:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #818cf8;
    --secondary: #ec4899;
    --accent: #f59e0b;
    --dark-bg: #0f172a;
    --darker-bg: #020617;
    --card-bg: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border: #334155;
}

[data-theme="light"] {
    --primary: #5b5bff;
    --primary-dark: #4a4aee;
    --primary-light: #7b7bff;
    --secondary: #ff1493;
    --accent: #ff9500;
    --dark-bg: #f8f9fa;
    --darker-bg: #ffffff;
    --card-bg: #ffffff;
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a6a;
    --text-muted: #8a8aaa;
    --border: #e0e0ff;
}

/* Smooth Animations */
@keyframes fadeInDown { 
    from { opacity: 0; transform: translateY(-30px); } 
    to { opacity: 1; transform: translateY(0); } 
}

@keyframes fadeInUp { 
    from { opacity: 0; transform: translateY(30px); } 
    to { opacity: 1; transform: translateY(0); } 
}

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

@keyframes fadeInRight { 
    from { opacity: 0; transform: translateX(40px); } 
    to { opacity: 1; transform: translateX(0); } 
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(60px); }
    to { opacity: 1; transform: translateY(0); }
}

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

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-100px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes float { 
    0%, 100% { transform: translateY(0px) rotate(0deg); } 
    50% { transform: translateY(-25px) rotate(2deg); } 
}

@keyframes floatReverse {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(-2deg); }
}

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

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

@keyframes glow {
    0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); }
    50% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.6); }
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

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

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

@keyframes wobble {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-5px) rotate(-2deg); }
    30% { transform: translateX(5px) rotate(2deg); }
    45% { transform: translateX(-5px) rotate(-2deg); }
    60% { transform: translateX(3px) rotate(1deg); }
    75% { transform: translateX(-3px) rotate(-1deg); }
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@keyframes scroll {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(12px); }
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(100px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes flipIn {
    from { opacity: 0; transform: rotateY(90deg); }
    to { opacity: 1; transform: rotateY(0deg); }
}

/* Smooth Transitions */
* {
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}