/* ═══════════════════════════════════════════════════════════
   Canon's Gun Room — Custom Styles
   ═══════════════════════════════════════════════════════════ */

/* ── Scroll Behavior ── */
html {
    scroll-behavior: smooth;
}

/* ── Selection ── */
::selection {
    background: color-mix(in srgb, #1a5432 70%, white);
    color: white;
}

/* ── Custom Scrollbar ── */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #fdfcfa;
}
::-webkit-scrollbar-thumb {
    background: #aed0b5;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #7fb88a;
}

/* ── Service Cards — staggered reveal (progressive enhancement) ── */
@media (prefers-reduced-motion: no-preference) {
    .service-card {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }
}

/* ── Nav Active State ── */
.nav-link.active {
    color: #1a5432;
    background: color-mix(in srgb, #1a5432 8%, transparent);
}

/* ── Floating Card Animation ── */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}
.floating {
    animation: float 4s ease-in-out infinite;
}

/* ── Geometric Shape Animations ── */
@keyframes rotate-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes float-slow {
    0%, 100% { transform: translateY(0) rotate(45deg); }
    50% { transform: translateY(-16px) rotate(45deg); }
}
.geo-rotate {
    animation: rotate-slow 30s linear infinite;
}
.geo-float {
    animation: float-slow 6s ease-in-out infinite;
}

/* ── Button Focus Visible ── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid #529e64;
    outline-offset: 2px;
}

/* ── Form Input Transitions ── */
input, textarea {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ── Mobile Menu Transition ── */
#mobile-menu {
    transition: max-height 0.3s ease, opacity 0.3s ease;
}
#mobile-menu.hidden {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
#mobile-menu:not(.hidden) {
    max-height: 400px;
    opacity: 1;
}