/* Custom styles for Harlee's Scoops */

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

/* Navbar scroll state */
#navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-blur-lg;
    box-shadow: 0 1px 20px rgba(16, 42, 67, 0.08);
}

#navbar.scrolled .nav-logo-text {
    color: #102a43;
}

#navbar.scrolled .nav-link {
    color: #243b53;
}

#navbar.scrolled .nav-link:hover {
    color: #c87832;
}

/* Hero floating animations */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(3deg); }
}

@keyframes float-delayed {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(-2deg); }
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
}

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

.float-1 {
    animation-delay: 0s;
}

.float-2 {
    animation-delay: -2s;
}

.float-3 {
    animation-delay: -4s;
}

/* Blob animations */
@keyframes blob {
    0%, 100% { transform: scale(1) translate(0, 0); }
    25% { transform: scale(1.1) translate(10px, -10px); }
    50% { transform: scale(0.95) translate(-5px, 10px); }
    75% { transform: scale(1.05) translate(5px, 5px); }
}

.hero-blob {
    animation: blob 12s ease-in-out infinite;
}

.blob-1 {
    animation-delay: 0s;
}

.blob-2 {
    animation-delay: -4s;
}

.blob-3 {
    animation-delay: -8s;
}

/* Scroll reveal animations */
.scroll-reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: no-preference) {
    .scroll-reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .scroll-reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }
    
    .feature-item {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .feature-item.revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll indicator */
@keyframes scroll-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

.scroll-indicator {
    animation: scroll-bounce 2s ease-in-out infinite;
}

/* Mobile menu transitions */
#mobile-menu {
    animation: slideDown 0.3s ease-out;
}

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

/* Custom select styling */
select option {
    background: #102a43;
    color: #f0f4f8;
}

/* Image hover effects */
.aspect-square {
    position: relative;
    overflow: hidden;
}

.aspect-square::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(16, 42, 67, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.aspect-square:hover::after {
    opacity: 1;
}

/* Selection color */
::selection {
    background: rgba(200, 120, 50, 0.3);
    color: #102a43;
}

/* Focus visible styles */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #e9c08a;
    outline-offset: 2px;
}

/* Subtle gradient border on cards */
.bg-white {
    border: 1px solid rgba(217, 226, 236, 0.5);
}

/* Navbar logo transition */
.nav-logo-text {
    color: #102a43;
}