/* Custom styles and overrides */

html {
    scroll-behavior: smooth;
}

/* Ensure all text is readable */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #FFF8F0;
}
::-webkit-scrollbar-thumb {
    background: #C25E3E;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a04d32;
}

/* Animation keyframes */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes slideInLeft {
    from { transform: translateX(-50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

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

/* Animation classes - progressive enhancement only */
@media (prefers-reduced-motion: no-preference) {
    .animate-slide-left {
        animation: slideInLeft 0.8s ease-out forwards;
    }
    .animate-slide-right {
        animation: slideInRight 0.8s ease-out forwards;
    }
    .animate-fade-up {
        animation: fadeInUp 0.6s ease-out forwards;
    }
    .animate-float {
        animation: float 3s ease-in-out infinite;
    }
}

/* Service card hover effects */
.group:hover .group-hover\\:bg-terracotta-500 {
    background-color: #C25E3E;
}

.group:hover .group-hover\\:bg-sand-400 {
    background-color: #facc15;
}

/* Focus styles for accessibility */
input:focus, select:focus, textarea:focus {
    outline: none;
}

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

/* Image aspect ratios */
img {
    max-width: 100%;
    height: auto;
}

/* Mobile menu transitions */
#mobile-menu {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Navbar scroll state */
.navbar-scrolled {
    background: rgba(255, 248, 240, 0.95) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Geometric shape animations */
@keyframes rotate-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.05); }
}

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

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