/* Base & Utilities */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; overflow-x: hidden; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0A1628; }
::-webkit-scrollbar-thumb { background: #C9A84C; border-radius: 3px; }

/* Reveal Animations */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero Entrance */
@media (prefers-reduced-motion: no-preference) {
    .hero-subtitle { animation: fadeUp 0.8s 0.2s both; }
    .hero-headline { animation: fadeUp 0.8s 0.4s both; }
    .hero-desc { animation: fadeUp 0.8s 0.6s both; }
    .hero-cta { animation: fadeUp 0.8s 0.8s both; }
    .hero-image { animation: fadeIn 1s 0.4s both; }
    .hero-scroll { animation: fadeIn 0.6s 1.2s both; }
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Service Card Hover */
.service-card { transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.service-card:hover { transform: translateY(-4px); }

/* Gallery Item Hover */
.gallery-item { overflow: hidden; }
.gallery-item img { transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.gallery-item:hover img { transform: scale(1.04); }

/* Mobile Menu */
.mobile-menu-open { overflow: hidden; }
#mobile-menu.open { opacity: 1; pointer-events: auto; }

/* Hamburger Animation */
#menu-toggle.active #bar1 { transform: rotate(45deg) translate(3px, 3px); }
#menu-toggle.active #bar2 { opacity: 0; }
#menu-toggle.active #bar3 { transform: rotate(-45deg) translate(3px, -3px); width: 6px; }

/* Nav Background Transition */
.nav-scrolled {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 rgba(10, 22, 40, 0.06);
}

/* Form Styles */
input:focus, textarea:focus { outline: none; border-color: #C9A84C; }
</style>