* {
    font-family: 'Inter', sans-serif;
}

/* Color System - Based on Color Theory Best Practices */
:root {
    /* Brand Colors - Purple/Indigo Harmony (Analogous with Complement) */
    --brand-hue: 260; /* Purple-Indigo range */
    --brand-saturation: 70%;
    --brand-lightness: 55%;
    --brand-color: hsl(var(--brand-hue), var(--brand-saturation), var(--brand-lightness));
    
    /* Light Theme - High Value, Low Saturation for Professional Look */
    --light-bg-primary: hsl(220, 40%, 98%); /* Very light blue-white */
    --light-bg-secondary: hsl(220, 30%, 96%); /* Slightly darker */
    --light-bg-tertiary: hsl(220, 25%, 94%); /* Light gray */
    --light-surface: hsl(0, 0%, 100%); /* Pure white for cards */
    
    /* Light Theme Text - Proper Contrast Ratios (WCAG AA) */
    --light-text-primary: hsl(222, 20%, 15%); /* Dark blue-gray - 15.8:1 contrast */
    --light-text-secondary: hsl(222, 15%, 35%); /* Medium - 7.5:1 contrast */
    --light-text-tertiary: hsl(222, 10%, 50%); /* Light - 4.5:1 contrast */
    --light-text-muted: hsl(222, 8%, 65%); /* Very light - 3:1 contrast */
    
    /* Light Theme UI Elements */
    --light-border-subtle: hsl(220, 15%, 88%);
    --light-border-default: hsl(220, 20%, 82%);
    --light-border-strong: hsl(220, 25%, 75%);
    
    /* Light Theme Interactive States */
    --light-hover-bg: hsl(220, 30%, 92%);
    --light-active-bg: hsl(220, 35%, 88%);
    --light-focus-ring: hsla(var(--brand-hue), var(--brand-saturation), var(--brand-lightness), 0.3);
    
    /* Dark Theme - Sophisticated Blue-Gray Palette with Proper Color Harmony */
    --dark-bg-primary: hsl(215, 25%, 6%); /* Deep blue-gray with subtle warmth */
    --dark-bg-secondary: hsl(215, 20%, 11%); /* Layered surface with balanced saturation */
    --dark-bg-tertiary: hsl(215, 18%, 15%); /* Elevated surface with refined gray */
    --dark-surface: hsl(215, 22%, 19%); /* Card surface with sophisticated tone */
    
    /* Dark Theme Text - Enhanced Contrast with Color Temperature Balance */
    --dark-text-primary: hsl(210, 20%, 97%); /* Cool white with excellent readability */
    --dark-text-secondary: hsl(212, 15%, 82%); /* Soft gray-blue for secondary content */
    --dark-text-tertiary: hsl(214, 12%, 68%); /* Muted blue-gray for tertiary info */
    --dark-text-muted: hsl(216, 10%, 55%); /* Subtle gray for subtle elements */
    
    /* Dark Theme UI Elements - Harmonized with Background Palette */
    --dark-border-subtle: hsl(215, 15%, 23%); /* Barely visible borders */
    --dark-border-default: hsl(215, 18%, 28%); /* Standard borders with good visibility */
    --dark-border-strong: hsl(215, 20%, 35%); /* Emphasized borders for hierarchy */
    
    /* Dark Theme Interactive States - Enhanced Visual Feedback */
    --dark-hover-bg: hsl(215, 25%, 22%); /* Subtle hover with slight saturation boost */
    --dark-active-bg: hsl(215, 30%, 26%); /* Active state with increased saturation */
    --dark-focus-ring: hsla(var(--brand-hue), var(--brand-saturation), var(--brand-lightness), 0.4);
    
    /* Semantic Colors - Accessible and Meaningful */
    --success-hue: 142;
    --warning-hue: 38;
    --error-hue: 0;
    --info-hue: 200;
    
    /* Gradient Definitions */
    --light-hero-gradient-start: hsl(260, 60%, 98%);
    --light-hero-gradient-end: hsl(280, 50%, 96%);
    --dark-hero-gradient-start: hsl(215, 35%, 10%);
    --dark-hero-gradient-end: hsl(215, 25%, 16%);
}

/* Theme Application - Semantic Token Mapping */
:root {
    --bg-primary: var(--light-bg-primary);
    --bg-secondary: var(--light-bg-secondary);
    --bg-tertiary: var(--light-bg-tertiary);
    --surface: var(--light-surface);
    --text-primary: var(--light-text-primary);
    --text-secondary: var(--light-text-secondary);
    --text-tertiary: var(--light-text-tertiary);
    --text-muted: var(--light-text-muted);
    --border-subtle: var(--light-border-subtle);
    --border-default: var(--light-border-default);
    --border-strong: var(--light-border-strong);
    --hover-bg: var(--light-hover-bg);
    --active-bg: var(--light-active-bg);
    --focus-ring: var(--light-focus-ring);
    --hero-gradient-start: var(--light-hero-gradient-start);
    --hero-gradient-end: var(--light-hero-gradient-end);
    --nav-bg: hsla(220, 40%, 98%, 0.95);
}

[data-theme="dark"] {
    --bg-primary: var(--dark-bg-primary);
    --bg-secondary: var(--dark-bg-secondary);
    --bg-tertiary: var(--dark-bg-tertiary);
    --surface: var(--dark-surface);
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-tertiary: var(--dark-text-tertiary);
    --text-muted: var(--dark-text-muted);
    --border-subtle: var(--dark-border-subtle);
    --border-default: var(--dark-border-default);
    --border-strong: var(--dark-border-strong);
    --hover-bg: var(--dark-hover-bg);
    --active-bg: var(--dark-active-bg);
    --focus-ring: var(--dark-focus-ring);
    --hero-gradient-start: var(--dark-hero-gradient-start);
    --hero-gradient-end: var(--dark-hero-gradient-end);
    --nav-bg: hsla(222, 15%, 8%, 0.95);
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    line-height: 1.6;
}

.gradient-text {
    background: linear-gradient(135deg, hsl(260, 70%, 60%) 0%, hsl(280, 60%, 55%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: var(--surface);
    border: 1px solid var(--border-subtle);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: var(--border-default);
}

.skill-bar {
    transition: width 1.5s ease-in-out;
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

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

.typing-effect {
    border-right: 3px solid var(--brand-color);
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { border-color: var(--brand-color); }
    51%, 100% { border-color: transparent; }
}

.timeline-dot {
    position: relative;
}

.timeline-dot::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand-color);
    border: 3px solid var(--surface);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nav-link {
    position: relative;
    transition: color 0.3s ease;
    color: var(--text-primary);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--brand-color);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Theme-aware utility classes */
.bg-surface { background-color: var(--surface); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }
.border-subtle { border-color: var(--border-subtle); }
.border-default { border-color: var(--border-default); }

/* Hero section gradient */
.hero-gradient {
    background: linear-gradient(135deg, var(--hero-gradient-start) 0%, var(--hero-gradient-end) 100%);
}

/* Selection color - Theme-aware */
::selection {
    background-color: var(--focus-ring);
    color: var(--text-primary);
}

::-moz-selection {
    background-color: var(--focus-ring);
    color: var(--text-primary);
}

/* Fix skills section spacing */
.section-relative {
    position: relative;
    z-index: 1;
}

.nav-fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}
.skill-list {
    flex: 1;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
    align-content: start;
}

.skill-list li {
    text-align: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
}

.skill-list li:hover {
    background-color: var(--hover-bg);
    border-color: var(--border-default);
    transform: scale(1.05);
    color: var(--text-primary);
}

/* Project tech badge */
.tech-badge {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid var(--border-default);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.tech-badge:hover {
    background-color: var(--hover-bg);
    border-color: var(--brand-color);
    color: var(--brand-color);
}

/* Focus styles for accessibility */
*:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Interactive elements */
button, a {
    transition: all 0.2s ease;
}

button:hover, a:hover {
    color: var(--brand-color);
}

/* Better box shadows */
.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

/* Unified Card System - Best Practices */
.card {
    background-color: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

[data-theme="dark"] .card {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: var(--border-default);
}

[data-theme="dark"] .card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Card Variants - Consistent theming */
.card--elevated {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .card--elevated {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

.card--interactive:hover {
    transform: translateY(-6px) scale(1.02);
}

.card--gradient {
    background: linear-gradient(135deg, var(--surface) 0%, var(--bg-tertiary) 100%);
}

[data-theme="dark"] .card--gradient {
    background: linear-gradient(135deg, var(--surface) 0%, var(--bg-secondary) 100%);
}

/* Card Content Structure */
.card__header {
    padding: 1.5rem 1.5rem 0 1.5rem;
}

.card__body {
    padding: 1.5rem;
}

.card__footer {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

/* Card Components */
.card__icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-color), hsl(280, 60%, 55%));
    color: white;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.card__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.card__subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.card__content {
    color: var(--text-primary);
    line-height: 1.6;
}

/* Timeline Card Specific */
.timeline-card {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

[data-theme="dark"] .timeline-card {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.timeline-card:hover {
    transform: translateX(0.5rem);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-color: var(--border-default);
}

[data-theme="dark"] .timeline-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* Layout and Component Styles */
.section-relative {
    position: relative;
    z-index: 1;
}

.nav-fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

/* Experience Timeline */
.timeline-container {
    position: relative;
}

.timeline-line {
    position: absolute;
    left: 2rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--brand-color), transparent);
}

.timeline-item {
    position: relative;
    padding-left: 4rem;
    margin-bottom: 3rem;
}

.timeline-marker {
    position: absolute;
    left: 1.5rem;
    top: 0.5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--brand-color);
    border: 3px solid var(--surface);
    box-shadow: 0 0 0 4px var(--bg-primary), 0 0 0 6px var(--border-subtle);
    z-index: 2;
}

/* Skills Section */
.skill-card {
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

.skill-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.skill-list {
    flex: 1;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
    align-content: start;
}

.skill-list li {
    text-align: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
}

.skill-list li:hover {
    background-color: var(--hover-bg);
    border-color: var(--border-default);
    transform: scale(1.05);
    color: var(--text-primary);
}

/* Tech Badge */
.tech-badge {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid var(--border-default);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.tech-badge:hover {
    background-color: var(--hover-bg);
    border-color: var(--brand-color);
    color: var(--brand-color);
}

/* Hide scrollbars globally */
::-webkit-scrollbar {
    display: none;
}

* {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Custom progress indicator */
.progress-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-color), hsl(280, 60%, 55%));
    z-index: 10000;
    transition: width 0.3s ease;
}

/* Glitch Effect for Theme Transitions */
.glitch-effect {
    animation: glitchColors 0.3s infinite;
    overflow: hidden;
}

@keyframes glitchColors {
    0% { 
        filter: hue-rotate(0deg) saturate(1) brightness(1);
        transform: translateX(0);
    }
    10% { 
        filter: hue-rotate(90deg) saturate(2) brightness(1.2);
        transform: translateX(-2px);
    }
    20% { 
        filter: hue-rotate(180deg) saturate(0.5) brightness(0.8);
        transform: translateX(2px);
    }
    30% { 
        filter: hue-rotate(270deg) saturate(3) brightness(1.3);
        transform: translateX(-1px);
    }
    40% { 
        filter: hue-rotate(45deg) saturate(1.5) brightness(0.9);
        transform: translateX(1px);
    }
    50% { 
        filter: hue-rotate(135deg) saturate(2.5) brightness(1.1);
        transform: translateX(-3px);
    }
    60% { 
        filter: hue-rotate(225deg) saturate(0.8) brightness(1.4);
        transform: translateX(3px);
    }
    70% { 
        filter: hue-rotate(315deg) saturate(1.8) brightness(0.7);
        transform: translateX(-2px);
    }
    80% { 
        filter: hue-rotate(180deg) saturate(2.2) brightness(1.2);
        transform: translateX(2px);
    }
    90% { 
        filter: hue-rotate(90deg) saturate(1.3) brightness(0.85);
        transform: translateX(-1px);
    }
    100% { 
        filter: hue-rotate(0deg) saturate(1) brightness(1);
        transform: translateX(0);
    }
}

/* Direction-specific glitch animations */
.glitch-horizontal {
    animation: glitchHorizontal 0.2s infinite;
}

@keyframes glitchHorizontal {
    0%, 100% { transform: translateX(0); filter: hue-rotate(0deg); }
    10% { transform: translateX(-3px); filter: hue-rotate(90deg); }
    20% { transform: translateX(3px); filter: hue-rotate(180deg); }
    30% { transform: translateX(-2px); filter: hue-rotate(270deg); }
    40% { transform: translateX(2px); filter: hue-rotate(360deg); }
    50% { transform: translateX(-1px); filter: hue-rotate(45deg); }
    60% { transform: translateX(1px); filter: hue-rotate(135deg); }
    70% { transform: translateX(-3px); filter: hue-rotate(225deg); }
    80% { transform: translateX(2px); filter: hue-rotate(315deg); }
    90% { transform: translateX(-1px); filter: hue-rotate(90deg); }
}

.glitch-vertical {
    animation: glitchVertical 0.15s infinite;
}

@keyframes glitchVertical {
    0%, 100% { transform: translateY(0); opacity: 1; }
    15% { transform: translateY(-2px); opacity: 0.8; }
    25% { transform: translateY(2px); opacity: 0.9; }
    35% { transform: translateY(-1px); opacity: 0.7; }
    45% { transform: translateY(1px); opacity: 0.95; }
    55% { transform: translateY(-3px); opacity: 0.85; }
    65% { transform: translateY(3px); opacity: 0.75; }
    75% { transform: translateY(-2px); opacity: 0.9; }
    85% { transform: translateY(1px); opacity: 0.8; }
}

.glitch-diagonal {
    animation: glitchDiagonal 0.25s infinite;
}

@keyframes glitchDiagonal {
    0%, 100% { transform: translate(0, 0) scale(1); }
    12% { transform: translate(-2px, -2px) scale(1.05); }
    24% { transform: translate(2px, 2px) scale(0.95); }
    36% { transform: translate(-3px, 1px) scale(1.02); }
    48% { transform: translate(1px, -3px) scale(0.98); }
    60% { transform: translate(-1px, 2px) scale(1.03); }
    72% { transform: translate(3px, -1px) scale(0.97); }
    84% { transform: translate(-2px, -1px) scale(1.01); }
    96% { transform: translate(1px, 1px) scale(0.99); }
}

.glitch-rotate {
    animation: glitchRotate 0.3s infinite;
}

@keyframes glitchRotate {
    0%, 100% { transform: rotate(0deg) scale(1); }
    8% { transform: rotate(-1deg) scale(1.02); }
    16% { transform: rotate(1deg) scale(0.98); }
    24% { transform: rotate(-2deg) scale(1.03); }
    32% { transform: rotate(2deg) scale(0.97); }
    40% { transform: rotate(-0.5deg) scale(1.01); }
    48% { transform: rotate(0.5deg) scale(0.99); }
    56% { transform: rotate(-1.5deg) scale(1.02); }
    64% { transform: rotate(1.5deg) scale(0.98); }
    72% { transform: rotate(-1deg) scale(1.01); }
    80% { transform: rotate(1deg) scale(0.99); }
    88% { transform: rotate(-0.5deg) scale(1); }
    96% { transform: rotate(0.5deg) scale(1); }
}

.glitch-pulse {
    animation: glitchPulse 0.2s infinite;
}

@keyframes glitchPulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 1; 
        filter: brightness(1) contrast(1);
    }
    15% { 
        transform: scale(1.05); 
        opacity: 0.9; 
        filter: brightness(1.2) contrast(1.1);
    }
    30% { 
        transform: scale(0.95); 
        opacity: 0.8; 
        filter: brightness(0.8) contrast(1.2);
    }
    45% { 
        transform: scale(1.03); 
        opacity: 0.85; 
        filter: brightness(1.1) contrast(0.9);
    }
    60% { 
        transform: scale(0.97); 
        opacity: 0.95; 
        filter: brightness(0.9) contrast(1.1);
    }
    75% { 
        transform: scale(1.02); 
        opacity: 0.9; 
        filter: brightness(1.05) contrast(1.05);
    }
    90% { 
        transform: scale(0.99); 
        opacity: 0.95; 
        filter: brightness(0.95) contrast(0.95);
    }
}

.glitch-flicker {
    animation: glitchFlicker 0.15s infinite;
}

@keyframes glitchFlicker {
    0%, 100% { 
        opacity: 1; 
        transform: translateX(0);
        filter: hue-rotate(0deg);
    }
    10% { 
        opacity: 0.3; 
        transform: translateX(-1px);
        filter: hue-rotate(90deg);
    }
    20% { 
        opacity: 1; 
        transform: translateX(1px);
        filter: hue-rotate(180deg);
    }
    25% { 
        opacity: 0.1; 
        transform: translateX(0);
        filter: hue-rotate(270deg);
    }
    30% { 
        opacity: 0.8; 
        transform: translateX(-2px);
        filter: hue-rotate(45deg);
    }
    40% { 
        opacity: 1; 
        transform: translateX(2px);
        filter: hue-rotate(135deg);
    }
    50% { 
        opacity: 0.2; 
        transform: translateX(-1px);
        filter: hue-rotate(225deg);
    }
    60% { 
        opacity: 0.9; 
        transform: translateX(1px);
        filter: hue-rotate(315deg);
    }
    70% { 
        opacity: 0.4; 
        transform: translateX(0);
        filter: hue-rotate(90deg);
    }
    80% { 
        opacity: 1; 
        transform: translateX(-1px);
        filter: hue-rotate(180deg);
    }
    90% { 
        opacity: 0.6; 
        transform: translateX(1px);
        filter: hue-rotate(270deg);
    }
}

.glitch-text {
    animation: glitchText 0.1s infinite;
    position: relative;
}

@keyframes glitchText {
    0% { 
        text-shadow: 2px 0 #f0f, -2px 0 #0ff; 
        transform: translateX(0);
        filter: hue-rotate(0deg);
    }
    10% { 
        text-shadow: -2px 0 #f0f, 2px 0 #0ff; 
        transform: translateX(1px);
        filter: hue-rotate(45deg);
    }
    20% { 
        text-shadow: 1px 0 #4a9eff, -1px 0 #00ff88; 
        transform: translateX(-1px);
        filter: hue-rotate(90deg);
    }
    30% { 
        text-shadow: -1px 0 #ff006e, 1px 0 #06ffa5; 
        transform: translateX(2px);
        filter: hue-rotate(135deg);
    }
    40% { 
        text-shadow: 3px 0 #0ff, -3px 0 #f0f; 
        transform: translateX(-2px);
        filter: hue-rotate(180deg);
    }
    50% { 
        text-shadow: -1px 0 #00ff88, 1px 0 #4a9eff; 
        transform: translateX(0);
        filter: hue-rotate(225deg);
    }
    60% { 
        text-shadow: 2px 0 #ffbe0b, -2px 0 #fb5607; 
        transform: translateX(1px);
        filter: hue-rotate(270deg);
    }
    70% { 
        text-shadow: -2px 0 #0ff, 2px 0 #f0f; 
        transform: translateX(-1px);
        filter: hue-rotate(315deg);
    }
    80% { 
        text-shadow: 1px 0 #8338ec, -1px 0 #3a86ff; 
        transform: translateX(2px);
        filter: hue-rotate(360deg);
    }
    90% { 
        text-shadow: -1px 0 #00ff88, 1px 0 #4a9eff; 
        transform: translateX(-2px);
        filter: hue-rotate(180deg);
    }
    100% { 
        text-shadow: 2px 0 #f0f, -2px 0 #0ff; 
        transform: translateX(0);
        filter: hue-rotate(0deg);
    }
}

.glitch-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, 
        transparent 20%, 
        rgba(255, 0, 255, 0.15) 25%,
        rgba(74, 158, 255, 0.12) 30%,
        rgba(0, 255, 136, 0.12) 35%,
        rgba(255, 0, 110, 0.1) 40%,
        rgba(6, 255, 165, 0.1) 45%,
        rgba(255, 190, 11, 0.08) 50%,
        rgba(251, 86, 7, 0.08) 55%,
        rgba(131, 56, 236, 0.1) 60%,
        rgba(58, 134, 255, 0.12) 65%,
        rgba(74, 158, 255, 0.12) 70%,
        rgba(0, 255, 136, 0.12) 75%,
        transparent 80%);
    pointer-events: none;
    z-index: 9999;
    animation: glitchOverlay 0.15s infinite;
    mix-blend-mode: screen;
}

@keyframes glitchOverlay {
    0% { 
        transform: translateX(-100%) skewX(0deg);
        opacity: 0.8;
    }
    20% { 
        transform: translateX(-50%) skewX(2deg);
        opacity: 1;
    }
    40% { 
        transform: translateX(0%) skewX(-1deg);
        opacity: 0.9;
    }
    60% { 
        transform: translateX(50%) skewX(1deg);
        opacity: 1;
    }
    80% { 
        transform: translateX(100%) skewX(-2deg);
        opacity: 0.8;
    }
    100% { 
        transform: translateX(-100%) skewX(0deg);
        opacity: 0.8;
    }
}

/* Prevent overflow during glitch */
.glitch-container {
    overflow: hidden;
}

/* CV button to match center buttons */
.cv-button {
    background-color: transparent;
    color: #9333ea;
    border: 2px solid #9333ea;
}

.cv-button:hover {
    background-color: #9333ea;
    color: white;
}

/* Modern sliding toggle switch */
.theme-toggle {
    position: relative;
    width: 60px;
    height: 32px;
    background-color: #e5e7eb;
    border-radius: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: 2px solid var(--border-subtle);
}

[data-theme="dark"] .theme-toggle {
    background-color: #4b5563;
    border-color: #6b7280;
}

.theme-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .theme-toggle:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.theme-toggle-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .theme-toggle-slider {
    background-color: #6b7280;
}

[data-theme="dark"] .theme-toggle-slider {
    transform: translateX(28px);
}

.theme-toggle-icon {
    font-size: 12px;
    color: #6b7280;
}

[data-theme="dark"] .theme-toggle-icon {
    color: #f59e0b;
}