/* Theme transition enhancements */
.theme-transition {
    transition: background-color 0.5s ease !important;
}

.theme-transition * {
    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease !important;
}

/* Enhanced hover states for cards */
.hover-animate {
    animation: card-pop 0.3s forwards;
}

@keyframes card-pop {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(-5px);
    }
}

/* Consistent text highlighting for both modes */
::selection {
    background-color: var(--primary-color);
    color: white;
}

[data-theme="dark"] ::selection {
    background-color: var(--primary-color);
    color: #f0f0f0;
}

/* Enhanced focus states for both modes */
button:focus, 
a:focus, 
input:focus, 
textarea:focus,
select:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

[data-theme="dark"] button:focus, 
[data-theme="dark"] a:focus, 
[data-theme="dark"] input:focus, 
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Enhanced hero section for dark mode */
[data-theme="dark"] .hero {
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at bottom right, rgba(83, 109, 254, 0.1), transparent 50%);
    pointer-events: none;
}

/* Theme switcher enhanced */
.theme-switch {
    position: relative;
    overflow: hidden;
}

.theme-switch::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(83, 109, 254, 0.2), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.theme-switch:hover::before {
    opacity: 1;
}

/* Animation for theme switch */
[data-theme="dark"] .theme-switch i {
    animation: rotate-sun 0.5s ease-out forwards;
}

.theme-switch i {
    animation: rotate-moon 0.5s ease-out forwards;
}

@keyframes rotate-sun {
    0% {
        transform: rotate(0) scale(0.8);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes rotate-moon {
    0% {
        transform: rotate(0) scale(0.8);
    }
    100% {
        transform: rotate(-360deg) scale(1);
    }
}

/* Enhanced active menu items */
.menu-item.active {
    position: relative;
}

.menu-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: -5px;
    width: 3px;
    height: 100%;
    background: var(--primary-color);
    border-radius: 2px;
}

[data-theme="dark"] .menu-item.active::before {
    box-shadow: 0 0 8px rgba(83, 109, 254, 0.6);
}