/* Custom styles for modern Tailwind design */

/* Smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
}

/* Cookie alert show state */
.cookiealert.show {
    opacity: 1 !important;
    transform: translateY(0%) !important;
    transition-delay: 1000ms;
}

/* Navbar shrink effect - CSS scroll-driven animations */
@supports (animation-timeline: scroll()) {
    #mainNav {
        animation: shrink-navbar linear forwards;
        animation-timeline: scroll();
        animation-range: 0 100px;
    }
    
    @keyframes shrink-navbar {
        from {
            padding-top: 1rem;
            padding-bottom: 1rem;
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }
        to {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
    }
    
    #mainNav img {
        animation: shrink-logo linear forwards;
        animation-timeline: scroll();
        animation-range: 0 100px;
    }
    
    @keyframes shrink-logo {
        from {
            height: 3rem;
        }
        to {
            height: 2.5rem;
        }
    }
    
    @media (min-width: 1024px) {
        @keyframes shrink-navbar {
            from {
                padding-top: 0.75rem;
                padding-bottom: 0.75rem;
                box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            }
            to {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            }
        }
    }
}

/* Fallback for browsers that don't support scroll-driven animations */
@supports not (animation-timeline: scroll()) {
    #mainNav.navbar-shrink {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    #mainNav.navbar-shrink img {
        height: 2.5rem;
    }
}

/* Active nav link styling */
.js-scroll-trigger.active {
    color: #ef4444 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Smooth transitions for interactive elements */
a, button {
    transition: all 0.2s ease-in-out;
}

/* Custom scrollbar for modern browsers */
::-webkit-scrollbar {
    width: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: #ef4444;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #dc2626;
}

/* Hero section animations */
@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-slow {
    0%, 100% {
        opacity: 0.1;
        transform: scale(1);
    }
    50% {
        opacity: 0.2;
        transform: scale(1.05);
    }
}

@keyframes float-particle {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(var(--float-x), var(--float-y)) scale(1.2);
        opacity: 0.6;
    }
}

.animate-gradient-slow {
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
}

.animate-spin-slow {
    animation: spin-slow 20s linear infinite;
}

.animate-pulse-slow {
    animation: pulse-slow 4s ease-in-out infinite;
}

/* Particle System Styles */
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.8), rgba(239, 68, 68, 0));
    border-radius: 50%;
    pointer-events: none;
    animation: float-particle ease-in-out infinite;
}

/* Individual particle positions and animations */
.particle-1 { left: 10%; top: 20%; --float-x: 20px; --float-y: -30px; animation-duration: 4s; animation-delay: 0s; }
.particle-2 { left: 20%; top: 80%; --float-x: -15px; --float-y: 25px; animation-duration: 5s; animation-delay: 0.5s; }
.particle-3 { left: 80%; top: 30%; --float-x: 25px; --float-y: -20px; animation-duration: 6s; animation-delay: 1s; }
.particle-4 { left: 70%; top: 70%; --float-x: -20px; --float-y: 30px; animation-duration: 4.5s; animation-delay: 1.5s; }
.particle-5 { left: 30%; top: 40%; --float-x: 18px; --float-y: -25px; animation-duration: 5.5s; animation-delay: 2s; }
.particle-6 { left: 90%; top: 50%; --float-x: -22px; --float-y: 28px; animation-duration: 4.8s; animation-delay: 0.3s; }
.particle-7 { left: 15%; top: 60%; --float-x: 24px; --float-y: -18px; animation-duration: 5.2s; animation-delay: 0.8s; }
.particle-8 { left: 85%; top: 15%; --float-x: -19px; --float-y: 22px; animation-duration: 4.3s; animation-delay: 1.3s; }
.particle-9 { left: 40%; top: 25%; --float-x: 21px; --float-y: -27px; animation-duration: 5.8s; animation-delay: 1.8s; }
.particle-10 { left: 60%; top: 85%; --float-x: -23px; --float-y: 19px; animation-duration: 4.6s; animation-delay: 0.6s; }
.particle-11 { left: 25%; top: 50%; --float-x: 17px; --float-y: -24px; animation-duration: 5.3s; animation-delay: 1.1s; background: radial-gradient(circle, rgba(249, 115, 22, 0.6), rgba(249, 115, 22, 0)); }
.particle-12 { left: 75%; top: 45%; --float-x: -21px; --float-y: 26px; animation-duration: 4.9s; animation-delay: 1.6s; background: radial-gradient(circle, rgba(249, 115, 22, 0.6), rgba(249, 115, 22, 0)); }
.particle-13 { left: 35%; top: 75%; --float-x: 23px; --float-y: -21px; animation-duration: 5.6s; animation-delay: 0.4s; }
.particle-14 { left: 65%; top: 20%; --float-x: -18px; --float-y: 29px; animation-duration: 4.4s; animation-delay: 0.9s; }
.particle-15 { left: 50%; top: 10%; --float-x: 20px; --float-y: -23px; animation-duration: 5.1s; animation-delay: 1.4s; }
.particle-16 { left: 5%; top: 90%; --float-x: -24px; --float-y: 20px; animation-duration: 4.7s; animation-delay: 1.9s; }
.particle-17 { left: 95%; top: 65%; --float-x: 19px; --float-y: -26px; animation-duration: 5.4s; animation-delay: 0.2s; background: radial-gradient(circle, rgba(249, 115, 22, 0.6), rgba(249, 115, 22, 0)); }
.particle-18 { left: 45%; top: 55%; --float-x: -20px; --float-y: 24px; animation-duration: 4.2s; animation-delay: 0.7s; }
.particle-19 { left: 55%; top: 35%; --float-x: 22px; --float-y: -19px; animation-duration: 5.7s; animation-delay: 1.2s; }
.particle-20 { left: 12%; top: 42%; --float-x: -17px; --float-y: 27px; animation-duration: 5.9s; animation-delay: 1.7s; }