/* Enhanced Portfolio Styles */
/* This CSS adds missing functionality and fixes styling issues */

/* Font definitions for Inter */
body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Fallback fonts for better compatibility */
.font-sans {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
}

/* Fix missing animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

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

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
    40%, 43% { transform: translateY(-10px); }
    70% { transform: translateY(-5px); }
    90% { transform: translateY(-2px); }
}

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

/* Apply animations */
.animate-pulse { animation: pulse 2s infinite; }
.animate-bounce { animation: bounce 2s infinite; }
.animate-spin { animation: spin 1s linear infinite; }

/* Fade in animation for elements */
.animate-in {
    animation: fadeIn 0.6s ease-out;
}

/* Enhanced hover effects */
.hover\\:scale-105:hover {
    transform: scale(1.05);
}

.hover\\:scale-110:hover {
    transform: scale(1.10);
}

.hover\\:scale-125:hover {
    transform: scale(1.25);
}

.hover\\:translate-y-negative:hover {
    transform: translateY(-0.125rem);
}

/* Better mobile menu positioning */
#mobile-menu {
    animation: slideInFromBottom 0.3s ease-out;
}

/* Scroll to top button styling */
.scroll-to-top {
    transition: all 0.3s ease;
}

/* Fix dark mode toggle */
.dark .dark\\:invert {
    filter: invert(1);
}

.dark .dark\\:brightness-125 {
    filter: brightness(1.25);
}

/* Better form styling */
form input:focus,
form textarea:focus {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px var(--ring-opacity);
}

/* Loading spinner for form */
.loading-spinner {
    animation: spin 1s linear infinite;
}

/* Notification styling */
.notification {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Better responsive images */
img {
    max-width: 100%;
    height: auto;
}

/* Fix SVG images in image containers */
img[src$=".svg"] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Enhanced card hover effects */
.group:hover .group-hover\\:scale-105 {
    transform: scale(1.05);
}

.group:hover .group-hover\\:scale-110 {
    transform: scale(1.10);
}

.group:hover .group-hover\\:translate-y-1 {
    transform: translateY(0.25rem);
}

/* Better gradient text */
.bg-gradient-to-r {
    background-clip: text;
    -webkit-background-clip: text;
}

/* Fix theme transitions */
* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
}

/* Better backdrop blur */
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(12px); }

/* Enhanced shadows */
.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Fix navigation highlighting */
nav button.text-accent {
    color: var(--accent-foreground);
    font-weight: 600;
}

/* Mobile improvements */
@media (max-width: 768px) {
    .hover\\:scale-105:hover,
    .hover\\:scale-110:hover,
    .hover\\:scale-125:hover {
        transform: none;
    }
    
    /* Better mobile touch targets */
    button, a {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Performance optimizations */
.will-change-transform {
    will-change: transform;
}

/* Fix any layout issues */
.min-h-screen {
    min-height: 100vh;
}

/* Better focus states */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .fixed, .sticky {
        position: static !important;
    }
    
    .shadow-lg, .shadow-2xl {
        box-shadow: none !important;
    }
}