@tailwind base;
@tailwind components;
@tailwind utilities;

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    /* Offset for fixed header */
}

@layer components {
    .card-hover {
        transition: all 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.05)
    }

    .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px -10px var(--color-primary-light);
        border-color: var(--color-primary-light)
    }

    .tab-active {
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
        color: white;
        box-shadow: 0 4px 14px 0 var(--color-primary-light)
    }

    .tab-inactive {
        color: var(--color-text-muted);
        background: transparent
    }

    .tab-inactive:hover {
        color: white;
        background: rgba(255, 255, 255, 0.05)
    }
}

.glass-panel {
    background: var(--color-dark);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1)
}

.text-shadow-glow {
    text-shadow: 0 0 20px var(--color-primary-light)
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

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

::-webkit-scrollbar {
    width: 10px
}

::-webkit-scrollbar-track {
    background: var(--color-dark)
}

::-webkit-scrollbar-thumb {
    background: var(--color-surface);
    border-radius: 5px
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-dim)
}

.anim-fade-in,
.anim-slide-up,
.anim-slide-up-delay,
.anim-slide-right,
.anim-slide-left,
.anim-scale-in,
.anim-fade-in-up {
    opacity: 0;
    visibility: hidden
}