/* Custom styles for Covered Bridge Sugar House */

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

/* Custom animations */
@keyframes blob {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

.animate-blob {
    animation: blob 7s infinite;
}

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

.animation-delay-4000 {
    animation-delay: 4s;
}

@keyframes bounce-slow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animate-bounce-slow {
    animation: bounce-slow 3s infinite;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .animate-blob,
    .animate-bounce-slow {
        animation: none;
    }
    
    html {
        scroll-behavior: auto;
    }
    
    .group:hover img {
        transform: none;
    }
}

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

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

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

::-webkit-scrollbar-thumb:hover {
    background: #7C3AED;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible {
    outline: 3px solid #FBBF24;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Mobile menu transitions */
#mobile-menu {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#mobile-menu.hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

#mobile-menu:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Image loading placeholder */
img {
    background: linear-gradient(90deg, #EDE9FE 25%, #FDE68A 50%, #EDE9FE 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

img[src] {
    animation: none;
    background: none;
}

/* Ensure all text has proper contrast */
.text-plum-950 {
    color: #170538;
}

.text-plum-900 {
    color: #2E1065;
}

.text-plum-800 {
    color: #4C1D95;
}

.text-plum-700 {
    color: #6D28D9;
}

.text-plum-600 {
    color: #7C3AED;
}

.text-plum-500 {
    color: #8B5CF6;
}

.text-plum-400 {
    color: #A78BFA;
}

.text-plum-300 {
    color: #C4B5FD;
}

.text-plum-200 {
    color: #DDD6FE;
}

.text-plum-100 {
    color: #EDE9FE;
}

.text-amber-950 {
    color: #451A03;
}

.text-amber-900 {
    color: #78350F;
}

.text-amber-800 {
    color: #92400E;
}

.text-amber-700 {
    color: #B45309;
}

.text-amber-600 {
    color: #D97706;
}

.text-amber-500 {
    color: #F59E0B;
}

.text-amber-400 {
    color: #FBBF24;
}

.text-amber-300 {
    color: #FDE68A;
}

.text-amber-200 {
    color: #FDE68A;
}

.text-amber-100 {
    color: #FEF3C7;
}

.text-amber-50 {
    color: #FFFBEB;
}