/* Base Settings */
:root {
--gold: #D4AF37;
--silver: #C0C0C0;
--bg: #050505;
}
body {
background-color: var(--bg);
color: #e5e5e5;
overflow-x: hidden;
cursor: default;
}
/* Typography Classes */
.font-serif-heading {
font-family: 'Playfair Display', serif;
}
.font-serif-body {
font-family: 'Merriweather', serif;
}
/* Selection */
::selection {
background: rgba(212, 175, 55, 0.3);
color: white;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
background: #333;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Utilities */
.text-gold {
color: var(--gold);
}
.hover-gold:hover {
color: var(--gold);
transition: color 0.3s ease;
}
.nav-active {
color: var(--gold);
}

/* Mobile Menu */
body.menu-open {
overflow: hidden;
}
.hamburger {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
flex-direction: column;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(8px);
position: relative;
z-index: 10000;
overflow: visible;
}
.hamburger-bar {
display: block;
width: 18px;
height: 2px;
background: #ffffff;
transition: transform 0.3s ease, opacity 0.3s ease;
transform-origin: center;
}
.hamburger-close {
position: absolute;
font-size: 34px;
line-height: 1;
color: #ffffff;
font-weight: 200;
opacity: 0;
transform: scale(0.9);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.menu-open .hamburger-bar {
opacity: 0;
}
.menu-open .hamburger-close {
opacity: 1;
transform: scale(1);
}
.menu-open .hamburger {
position: fixed;
}
.mobile-menu {
position: fixed;
inset: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(6px);
transform: translateX(100%);
transition: transform 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
z-index: 9000;
}
body.menu-open header {
position: relative;
z-index: 10000;
}
body.menu-open .mobile-menu {
transform: translateX(0);
}
.mobile-menu-content {
display: flex;
flex-direction: column;
gap: 24px;
text-align: center;
}
.mobile-menu-link {
color: #ffffff;
letter-spacing: 0.04em;
}
/* Canvas Positioning */
#canvas-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity 1.5s ease-out;
}
/* Animations */
.fade-up {
animation: fadeUp 1s ease-out forwards;
opacity: 0;
transform: translateY(20px);
}
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

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

/* Project Card Styling */
.project-card {
background: rgba(10, 10, 10, 0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
overflow: hidden;
}
.project-card:hover {
border-color: rgba(212, 175, 55, 0.4);
background: rgba(20, 20, 20, 0.8);
transform: translateY(-5px);
}
.project-image-placeholder {
background: radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 100%);
position: relative;
overflow: hidden;
}
.project-image-placeholder::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent 45%, rgba(212, 175, 55, 0.05) 50%, transparent 55%);
background-size: 200% 200%;
transition: background-position 0.6s ease;
background-position: 0% 50%;
}
.project-card:hover .project-image-placeholder::after {
background-position: 100% 50%;
}
.tag {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.05);
}
iconify-icon {
font-size: 24px;
}

/* Maintenance Page */
.maintenance-shell {
position: relative;
z-index: 10;
}
.maintenance-card {
background: rgba(10, 10, 10, 0.65);
border: 1px solid rgba(255, 255, 255, 0.06);
backdrop-filter: blur(12px);
}
.maintenance-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.35), transparent);
}
.maintenance-chip {
border: 1px solid rgba(212, 175, 55, 0.3);
background: rgba(212, 175, 55, 0.08);
}