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

@layer utilities {
    .hero-bg-pattern {
        background-color: #0F172A;
        background-image: radial-gradient(circle at 2px 2px, rgba(197, 160, 89, 0.05) 1px, transparent 0);
        background-size: 40px 40px;
    }
    .marquee-container:hover .marquee-content {
        animation-play-state: paused;
    }
    .glass-panel {
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.05);
    }
}

.logo-name {
    transition: transform 0.3s ease;
}
.logo-name:hover {
    transform: scale(1.05);
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(166, 20, 20, 0.2);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(166, 20, 20, 0.5);
}

@keyframes modalContentShow {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-modal-content {
    animation: modalContentShow 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}