/* Custom CSS for Puing Balap Website */

/* Font Family */
.font-inter {
    font-family: 'Inter', sans-serif;
}

/* Custom Colors */
:root {
    --primary: #fbbf24;
    --primary-dark: #f59e0b;
    --secondary: #1f2937;
}



/* Background Images */
.bg-hero-bg {
    background-image: url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
}

.bg-hero-pattern {
    background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.1"%3E%3Ccircle cx="30" cy="30" r="4"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}

.bg-construction-pattern {
    background-image: url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23f3f4f6" fill-opacity="0.3" fill-rule="evenodd"%3E%3Cpath d="m0 40l40-40h-40v40zm40 0v-40h-40l40 40z"/%3E%3C/g%3E%3C/svg%3E');
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Floating Animation */
@keyframes floating {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

.floating {
    animation: floating 6s ease-in-out infinite;
}

/* Pulse Glow Animation */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
    }
    50% {
        box-shadow: 0 0 40px rgba(251, 191, 36, 0.8);
    }
}

.pulse-glow {
    animation: pulse-glow 3s ease-in-out infinite;
}



/* Navbar Transitions */
.navbar-transparent {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar-solid {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Navbar improvements */
#navbar {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Mobile menu animations */
#mobile-menu {
    transform-origin: top;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Loading Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Hover Effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Button Animations */
.btn-primary {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(251, 191, 36, 0.3);
}

/* Card Hover Effects */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* Text Selection */
::selection {
    background: rgba(251, 191, 36, 0.3);
    color: #1f2937;
}

/* Focus States */
.focus-ring:focus {
    outline: none;
    ring: 2px;
    ring-color: #fbbf24;
    ring-offset: 2px;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .floating {
        display: none;
    }
    
    /* Navbar optimizations for mobile */
    #navbar {
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    /* Disable navbar transitions on mobile for better performance */
    #navbar,
    #navbar * {
        transition: none !important;
    }
    
    .navbar-transparent,
    .navbar-solid {
        transition: none !important;
    }
    
    /* Mobile menu button improvements */
    #mobile-menu-btn {
        transition: all 0.2s ease !important;
    }
    
    #mobile-menu-btn:hover {
        background-color: rgba(251, 191, 36, 0.1) !important;
    }
    
    /* Mobile menu improvements */
    #mobile-menu {
        transition: all 0.3s ease !important;
    }
    
    /* Ensure icons are visible */
    .fab,
    .fas,
    .far {
        display: inline-block !important;
        visibility: visible !important;
    }
    
    /* Ensure WhatsApp icon is visible */
    .fa-whatsapp {
        display: inline-block !important;
        visibility: visible !important;
    }
    
    /* Logo text improvements for mobile */
    .text-sm {
        font-size: 0.875rem !important;
        line-height: 1.25rem !important;
    }
    
    /* Footer WhatsApp button improvements */
    footer .fab.fa-whatsapp {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Navbar improvements for tablet */
    #navbar {
        background: rgba(255, 255, 255, 0.95) !important;
    }
    
    /* Logo text adjustments for tablet */
    .text-lg {
        font-size: 1.125rem !important;
    }
    
    .text-xl {
        font-size: 1.25rem !important;
    }
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .bg-gradient-to-r {
        background: #fbbf24 !important;
    }
    
    .text-primary {
        color: #d97706 !important;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .floating {
        animation: none;
    }
    
    .pulse-glow {
        animation: none;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --primary: #fbbf24;
        --primary-dark: #f59e0b;
    }
}

/* WhatsApp Button Global Styles */
.fab.fa-whatsapp {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Accessibility Improvements */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus Visible */
.focus-visible:focus {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
}

/* Skip Link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #fbbf24;
    color: #1f2937;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
}

.skip-link:focus {
    top: 6px;
}

/* Loading States */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}