/* ===== Custom Styles for Advanced Air ===== */

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

/* Custom selection color */
::selection {
    background-color: #1a3c34;
    color: #f5f0e6;
}

/* ===== Scroll Reveal (Progressive Enhancement) ===== */
/* Default state: all elements visible */
.reveal-up {
    opacity: 1;
    transform: none;
    transition: none;
}

/* When JS is enabled and motion is preferred, animate */
@media (prefers-reduced-motion: no-preference) {
    html.js .reveal-up {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    html.js .reveal-up.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    /* Staggered delays handled via inline transition-delay */
}

/* ===== Mobile Menu ===== */
#mobile-menu.open {
    transform: translateX(0);
}

/* Hamburger animation */
#bar1.open {
    transform: rotate(45deg) translate(5px, 5px);
}
#bar2.open {
    opacity: 0;
    width: 0;
}
#bar3.open {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ===== Form Focus Styles ===== */
input:focus,
select:focus,
textarea:focus {
    outline: none;
}

/* ===== Image Aspect Ratios ===== */
img {
    max-width: 100%;
    height: auto;
}

/* ===== Subtle Pattern Overlay ===== */
.bg-pattern {
    background-image: radial-gradient(circle at 1px 1px, rgba(26, 60, 52, 0.04) 1px, transparent 0);
    background-size: 24px 24px;
}

/* ===== Scrollbar Styling ===== */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f5f0e6;
}
::-webkit-scrollbar-thumb {
    background: #3d5c40;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #1a3c34;
}

/* ===== Print Styles ===== */
@media print {
    #site-header,
    #contact-form,
    iframe {
        display: none;
    }
    body {
        color: #000;
        background: #fff;
    }
}

/* ===== Tablet ===== */
@media (max-width: 768px) {
    .font-serif {
        line-height: 1.1;
    }
}

/* ===== Large Desktop ===== */
@media (min-width: 1280px) {
    .max-w-7xl {
        max-width: 80rem;
    }
}