/* Custom styles for Scott Adams Tire & Alignment */

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

    /* Custom scrollbar */
    ::-webkit-scrollbar {
        width: 8px;
    }
    ::-webkit-scrollbar-track {
        background: #f5f3ee;
    }
    ::-webkit-scrollbar-thumb {
        background: #2d7a2d;
        border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #1f5c1f;
    }

    /* Service card hover effects */
    .service-card {
        transform: translateY(0);
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }
    .service-card:hover {
        transform: translateY(-4px);
    }

    /* Mobile menu animation */
    #mobile-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    #mobile-menu.open {
        max-height: 400px;
    }

    /* Geometric shape animations */
    @keyframes float {
        0%, 100% { transform: translateY(0) rotate(12deg); }
        50% { transform: translateY(-10px) rotate(12deg); }
    }
    @keyframes float-reverse {
        0%, 100% { transform: translateY(0) rotate(-12deg); }
        50% { transform: translateY(10px) rotate(-12deg); }
    }

    .geometric-float {
        animation: float 6s ease-in-out infinite;
    }
    .geometric-float-reverse {
        animation: float-reverse 7s ease-in-out infinite;
    }

    /* Scroll reveal animations (progressive enhancement) */
    @media (prefers-reduced-motion: no-preference) {
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }
    }

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

    /* Image loading placeholder */
    img {
        background-color: #e5e7eb;
    }

    /* Subtle pattern for CTA section */
    .cta-pattern {
        background-image: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.05) 1px, transparent 1px);
        background-size: 30px 30px;
    }

    /* Responsive adjustments */
    @media (max-width: 640px) {
        .font-display {
            font-size: clamp(1.75rem, 8vw, 2.5rem);
        }
    }