@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Inter:wght@200;300;400&display=swap');

:root { --gold: #c5a059; }

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }

body {
    font-family: 'Inter', sans-serif;
    background-color: #050505;
    color: #fdfbf7;
    overscroll-behavior-y: none;
    overflow-x: hidden;
}

.serif { font-family: 'Cormorant Garamond', serif; }
.gold-text { color: var(--gold); }

#loader { position: fixed; inset: 0; z-index: 100; background: #000; display: flex; align-items: center; justify-content: center; pointer-events: none; }

.loader-frame {
    position: relative;
    border: 1px solid rgba(197, 160, 89, 0.1);
    display: flex; align-items: center; justify-content: center;
}

.loader-frame::before, .loader-frame::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--gold);
}

@media (min-width: 768px) {
    .loader-frame::before, .loader-frame::after {
        width: 40px;
        height: 40px;
    }
}

.loader-frame::before { top: -10px; left: -10px; border-right: none; border-bottom: none; }
.loader-frame::after { bottom: -10px; right: -10px; border-left: none; border-top: none; }

@media (min-width: 768px) {
    .loader-frame::before { top: -15px; left: -15px; }
    .loader-frame::after { bottom: -15px; right: -15px; }
}

.loader-logo { display: block; width: auto; object-fit: contain; will-change: filter, transform, opacity; }

#hero-sub, #hero-title { opacity: 0; transform: translateY(20px); }
#hero-vid { transform: scale(1.1); will-change: transform; }

.project-card { transition: flex 0.8s cubic-bezier(0.16, 1, 0.3, 1); will-change: flex; }

@media (min-width: 768px) { 
    .project-card:hover { flex: 2.5; } 
}

/* Map Styling */
#visitor-map {
    height: 400px;
    width: 100%;
    background: #0a0a0a;
    border: 1px solid rgba(255,255,255,0.05);
}

/* Fix for mobile scroll behavior */
@media (max-width: 767px) {
    body { overscroll-behavior-y: auto; }
}