/* ===== BASE & RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; }
img, svg { display: block; max-width: 100%; }

/* ===== NAVBAR ===== */
.nav {
    background: rgba(254, 253, 251, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: box-shadow 0.3s ease;
}
.nav.scrolled {
    box-shadow: 0 4px 30px rgba(0,0,0,0.08);
}
.h-18 { height: 72px; }

/* ===== MOBILE MENU ===== */
.mobile-menu.open { opacity: 1 !important; pointer-events: all !important; }
.burger-line { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center; }
.burger-line.active:nth-child(1) { transform: translateY(14px) rotate(45deg); top: 52%; }
.burger-line.active:nth-child(2) { opacity: 0; }
.burger-line.active:nth-child(3) { transform: translateY(-14px) rotate(-45deg); top: 52%; }

/* ===== HERO SHAPES ===== */
.hero-shape {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.js .hero-shape {
    will-change: transform;
}

/* ===== SCROLL REVEAL (progressive enhancement) ===== */
/* Default: all elements visible (no JS required) */
.reveal { opacity: 1; transform: none; }

/* Only apply animation when JS is enabled AND user prefers motion */
@media (prefers-reduced-motion: no-preference) {
    .js .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .js .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }
    /* Stagger children */
    .js .reveal.delay-1 { transition-delay: 0.1s; }
    .js .reveal.delay-2 { transition-delay: 0.2s; }
    .js .reveal.delay-3 { transition-delay: 0.3s; }
}

/* ===== CARD HOVER ===== */
.card {
    will-change: transform, box-shadow;
}

/* ===== SMOOTH SCROLL OFFSET ===== */
section[id] {
    scroll-margin-top: 88px;
}

/* ===== ANIMATIONS ===== */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(12deg); }
    50% { transform: translateY(-12px) rotate(12deg); }
}
@keyframes floatSlow {
    0%, 100% { transform: translateY(0) rotate(45deg); }
    50% { transform: translateY(-8px) rotate(45deg); }
}
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.05); opacity: 0.3; }
}

.shape-circle-1 { animation: float 6s ease-in-out infinite; }
.shape-circle-2 { animation: float 8s ease-in-out infinite reverse; }
.shape-rect { animation: float 7s ease-in-out infinite; }
.shape-diamond { animation: floatSlow 5s ease-in-out infinite; }
.shape-circle-3 { animation: pulse 8s ease-in-out infinite; }
.shape-circle-4 { animation: float 10s ease-in-out infinite reverse; }
.shape-rect-2 { animation: float 6s ease-in-out infinite; }
.shape-circle-5 { animation: pulse 7s ease-in-out infinite; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #fefdfb; }
::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a3a3a3; }

/* ===== SELECTION ===== */
::selection { background: #fce7e7; color: #7c1818; }