/**
 * Custom Styles for Portfolio
 * Animations, scrollbar, and performance optimizations
 */

/* Set JetBrains Mono as default font family */
* {
    font-family: "JetBrains Mono", monospace;
}

/* Font family utilities */
.font-jetbrains {
    font-family: "JetBrains Mono", monospace;
}

.font-geist {
    font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
}

.font-geist-mono {
    font-family: "Geist Mono", "JetBrains Mono", monospace;
}

/* Normal smooth scrolling */
html {
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Enhanced AMOLED Dark Theme */
body {
    margin: 0;
    background-color: #000000;
    color: #ffffff;
    font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    overflow-x: hidden;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Modern custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #404040 0%, #262626 100%);
    border-radius: 3px;
    border: 1px solid #1a1a1a;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #525252 0%, #404040 100%);
}

/* Enhanced selection colors */
::selection {
    background: rgba(34, 197, 94, 0.25);
    color: #ffffff;
}

/* Performance optimizations */
* {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

/* Smooth focus states */
:focus-visible {
    outline: 2px solid rgba(34, 197, 94, 0.6);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Enhanced text rendering */
h1, h2, h3, h4, h5, h6 {
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga", "kern";
}

/* Custom animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(34, 197, 94, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.6);
    }
}

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

@keyframes terminal-cursor {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(34, 197, 94, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.6);
    }
}

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

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

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

/* Utility classes */
.animate-terminal-cursor {
    animation: terminal-cursor 1s infinite;
}

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

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-slide-in-right {
    animation: slide-in-right 0.6s ease-out forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in-down {
    animation: fadeInDown 0.6s ease-out forwards;
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #22c55e, #3b82f6, #8b5cf6);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
}

/* Code styling */
code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

/* Hover scale effect fix */
.hover\:scale-105:hover {
    transform: scale(1.05);
}

/* Backdrop blur fallback for older browsers */
@supports not (backdrop-filter: blur(24px)) {
    .backdrop-blur-2xl {
        background-color: rgba(0, 0, 0, 0.95);
    }
}

/* Print styles */
@media print {
    body {
        background: white;
        color: black;
    }

    .no-print {
        display: none !important;
    }
}