/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Karla', system-ui, sans-serif;
    background: #060a1c;
    color: #d9dfe9;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #060a1c; }
::-webkit-scrollbar-thumb { background: #1e2e57; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2d4276; }

/* ─── Selection ─── */
::selection { background: rgba(212,166,10,0.25); color: #0f1938; }

/* ─── Reveal (progressive enhancement — hidden by default, shown by JS) ─── */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(32px);
        transition: opacity 0.8s cubic-bezier(.22,.61,.36,1), transform 0.8s cubic-bezier(.22,.61,.36,1);
    }
    .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }
    .reveal-delay-1 { transition-delay: 0.12s; }
    .reveal-delay-2 { transition-delay: 0.24s; }
    .reveal-delay-3 { transition-delay: 0.36s; }
    .reveal-delay-4 { transition-delay: 0.48s; }
}

/* ─── Nav scroll state ─── */
.nav-scrolled {
    background: rgba(6,10,28,0.97) !important;
    box-shadow: 0 1px 0 rgba(212,166,10,0.18);
}

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

/* ─── Shimmer ─── */
@keyframes shimmer {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}
.gold-shimmer {
    background-image: linear-gradient(90deg, #d4a60a 0%, #f5dc8a 50%, #d4a60a 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 5s linear infinite;
}

/* ─── Focus visible ─── */
:focus-visible {
    outline: 2px solid rgba(212,166,10,0.6);
    outline-offset: 2px;
}

/* ─── Image placeholders ─── */
.img-placeholder {
    background: linear-gradient(135deg, #1e2e57 0%, #0f1938 50%, #1e2e57 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}