/* Dark mode transitions */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

html.dark {
    color-scheme: dark;
}

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

@keyframes pulse {
    0% {
        background-color: white;
    }
    50% {
        background-color: #EF4444;
    }
    100% {
        background-color: white;
    }
}

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

.pulse-dot {
    animation: pulse 2s infinite;
}

/* Header transitions */
header {
    transform: translateY(0);
    transition: all 0.3s ease;
}

header.compact {
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

header.compact.dark {
    background-color: rgba(30, 34, 53, 0.98);
}

header nav > div {
    transition: all 0.3s ease;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

header.compact nav > div {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

header.compact a:not([href="#demo"]) {
    @apply text-dark-900 hover:text-primary-500;
}

header.compact.dark a:not([href="#demo"]) {
    @apply text-white hover:text-white;
}

/* Demo button transitions */
header a[href="#demo"] {
    transform-origin: center;
    transform: scale(1);
}

header.compact a[href="#demo"] {
    transform: scale(0.9);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-dark-700;
}

::-webkit-scrollbar-thumb {
    @apply bg-primary-500;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-primary-600;
}

/* Focus styles */
:focus-visible {
    @apply outline-2 outline-primary-500 outline-offset-2;
}

/* Custom selection color */
::selection {
    @apply bg-primary-500 text-white;
}

.hover-glitch {
    position: relative;
}

.hover-glitch:hover {
    animation: none;
}

.hover-glitch:hover:before,
.hover-glitch:hover:after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.hover-glitch:hover:before {
    left: 2px;
    text-shadow: -2px 0 #27C5FF;
    animation: glitch-1 0.8s infinite linear alternate-reverse;
}

.hover-glitch:hover:after {
    left: -2px;
    text-shadow: 2px 0 #0066FF;
    animation: glitch-2 0.8s infinite linear alternate-reverse;
}

@keyframes glitch-1 {
    0% {
        clip-path: inset(20% 0 30% 0);
    }
    20% {
        clip-path: inset(65% 0 1% 0);
    }
    40% {
        clip-path: inset(43% 0 1% 0);
    }
    60% {
        clip-path: inset(25% 0 58% 0);
    }
    80% {
        clip-path: inset(75% 0 5% 0);
    }
    100% {
        clip-path: inset(10% 0 85% 0);
    }
}

@keyframes glitch-2 {
    0% {
        clip-path: inset(25% 0 58% 0);
    }
    20% {
        clip-path: inset(75% 0 5% 0);
    }
    40% {
        clip-path: inset(10% 0 85% 0);
    }
    60% {
        clip-path: inset(20% 0 30% 0);
    }
    80% {
        clip-path: inset(65% 0 1% 0);
    }
    100% {
        clip-path: inset(43% 0 1% 0);
    }
}