/* Rizzmas Custom CSS Stylesheet */

/* Font family overrides */
.font-lucky {
    font-family: 'Luckiest Guy', cursive, system-ui;
}

body {
    font-family: 'Inter', sans-serif, system-ui;
    background-color: #111827; /* gray-900 */
    color: #f3f4f6; /* gray-100 */
}

/* Custom Scrollbar Styles */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #111827;
}
::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* Infinite Horizonal Marquee Animation */
@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    display: flex;
    white-space: nowrap;
    animation: marquee 30s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* Scroll reveal helper classes loaded via JS */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.opacity-100 {
    opacity: 1 !important;
}

.translate-y-0 {
    transform: translateY(0) !important;
}

/* Custom Gradients and Glows */
.glow-blue {
    box-shadow: 0 0 50px -10px rgba(37, 99, 235, 0.25);
}

.glow-green {
    box-shadow: 0 0 50px -10px rgba(34, 197, 94, 0.25);
}

/* Mobile drawer transitional settings */
#mobile-menu-drawer {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    width: min(100%, 280px);
}

#mobile-overlay {
    transition: opacity 0.3s ease;
}

/* Responsive wrapping, spacing, and mobile drawer support */
code, pre {
    word-break: break-word;
}

@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .animate-marquee a {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .glow-blue,
    .glow-green {
        box-shadow: 0 0 35px -12px rgba(37, 99, 235, 0.2);
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}