/**
 * TheSteelBros - Main Stylesheet
 * Consolidated CSS for all pages
 */

/* ============================================
   MATERIAL ICONS CONFIGURATION
   ============================================ */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ============================================
   GLOBAL STYLES
   ============================================ */
body {
    font-family: 'Lexend', sans-serif;
}

/* ============================================
   CAROUSEL ANIMATIONS
   ============================================ */
@keyframes slide1 {
    0%, 30% {
        opacity: 1;
        z-index: 10;
    }
    35%, 95% {
        opacity: 0;
        z-index: 0;
    }
    100% {
        opacity: 1;
        z-index: 10;
    }
}

@keyframes slide2 {
    0%, 30% {
        opacity: 0;
        z-index: 0;
    }
    35%, 65% {
        opacity: 1;
        z-index: 10;
    }
    70%, 100% {
        opacity: 0;
        z-index: 0;
    }
}

@keyframes slide3 {
    0%, 65% {
        opacity: 0;
        z-index: 0;
    }
    70%, 100% {
        opacity: 1;
        z-index: 10;
    }
}

.carousel-slide:nth-child(1) {
    animation: slide1 12s infinite;
}

.carousel-slide:nth-child(2) {
    animation: slide2 12s infinite;
}

.carousel-slide:nth-child(3) {
    animation: slide3 12s infinite;
}

/* ============================================
   MARQUEE ANIMATION
   ============================================ */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 20s linear infinite;
}

/* ============================================
   SCROLLBAR CUSTOMIZATION
   ============================================ */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.custom-scroll::-webkit-scrollbar {
    width: 6px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 20px;
}

.dark .custom-scroll::-webkit-scrollbar-thumb {
    background-color: #4b5563;
}

/* ============================================
   GRID BACKGROUND PATTERN
   ============================================ */
.grid-bg {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.dark .grid-bg {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

.bg-grid-pattern {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.dark .bg-grid-pattern-dark {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ============================================
   FADE IN ANIMATION
   ============================================ */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Aspect Ratio */
.aspect-w-1 {
    position: relative;
    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
}

.aspect-w-1 > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.aspect-h-1 {
    --tw-aspect-h: 1;
}

.aspect-w-1 {
    --tw-aspect-w: 1;
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

/* Hide on mobile, show on desktop */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none;
    }
}

/* Show on mobile, hide on desktop */
@media (min-width: 769px) {
    .desktop-hidden {
        display: none;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .no-print {
        display: none !important;
    }
}