/* Custom styles for Trusty Garage Door Repair */

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

/* Geometric background blobs */
.geo-blob {
    position: absolute;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: blobFloat 20s ease-in-out infinite;
}

.blob-1 {
    top: 10%;
    left: -5%;
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #c5dbcc, #e3ece5);
    opacity: 0.4;
    animation-delay: 0s;
}

.blob-2 {
    top: 40%;
    right: -8%;
    width: 500px;
    height: 500px;
    background: linear-gradient(135deg, #98c1a3, #c5dbcc);
    opacity: 0.2;
    animation-delay: -5s;
}

.blob-3 {
    bottom: 10%;
    left: 20%;
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #e3ece5, #f2f7f4);
    opacity: 0.5;
    animation-delay: -10s;
}

.blob-4 {
    top: 60%;
    left: 5%;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #98c1a3, #6ba078);
    opacity: 0.15;
    animation-delay: -15s;
}

@keyframes blobFloat {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        transform: translate(30px, -30px) rotate(5deg) scale(1.05);
    }
    50% {
        transform: translate(-20px, 20px) rotate(-3deg) scale(0.95);
    }
    75% {
        transform: translate(15px, 15px) rotate(3deg) scale(1.02);
    }
}

/* Service cards */
.service-card {
    position: relative;
}

/* Testimonial cards */
.testimonial-card {
    position: relative;
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 16px;
    left: 24px;
    font-family: 'Outfit', sans-serif;
    font-size: 80px;
    font-weight: 800;
    color: #e3ece5;
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}

/* Mobile menu */
.mobile-link {
    display: block;
}

/* Scroll reveal (progressive enhancement - only active when JS loads and prefers-reduced-motion is off) */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    
    .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reduced motion fallback - ensure content is always visible */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Navbar scroll state */
.nav-scrolled #nav-bg {
    opacity: 1;
}

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

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

::-webkit-scrollbar-thumb {
    background: #c5dbcc;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #98c1a3;
}

/* Selection color */
::selection {
    background: #c5dbcc;
    color: #213527;
}

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

/* Image aspect ratio utilities */
.aspect-card {
    aspect-ratio: 4 / 3;
}