@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@600;700&display=swap');

body {
    background-image: url('/static/bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: #060608;
}

body::before {
    content: ''; position: fixed; inset: 0; background: rgba(9, 9, 11, 0.85);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: -1;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #ccff80; }

.nav-glass {
    background-color: rgba(9, 9, 11, 0.45); backdrop-filter: blur(35px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.65);
}

.glass-panel {
    background: rgba(20, 20, 24, 0.55); backdrop-filter: blur(45px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.08); border-top: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.8), inset 0 1px 0px 0px rgba(255, 255, 255, 0.15);
    position: relative; overflow: hidden; transition: border-color 0.4s, box-shadow 0.4s;
}

.glass-panel::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(800px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(204, 255, 128, 0.07), transparent 45%);
    z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.6s ease;
}

.glass-panel:hover::before { opacity: 1; }
.glass-panel:hover { border-color: rgba(204, 255, 128, 0.22); box-shadow: 0 18px 50px -5px rgba(0, 0, 0, 0.7), 0 0 25px -5px rgba(204, 255, 128, 0.08); }

#nav-indicator {
    position: absolute; top: 4px; bottom: 4px;
    background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 9999px;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), 0 4px 15px rgba(0,0,0,0.4);
    pointer-events: none; z-index: 0; transition: opacity 0.35s ease, border-color 0.3s ease;
}

.blob-wrap { position: fixed; inset: 0; pointer-events: none; z-index: 0; will-change: transform; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.blob { position: absolute; border-radius: 50%; filter: blur(100px); mix-blend-mode: screen; opacity: 0.38; animation: float-blob 24s infinite ease-in-out; pointer-events: none; }
.blob-primary { background: radial-gradient(circle, #ccff80 0%, rgba(204,255,128,0) 70%); width: 480px; height: 480px; top: 5%; left: -5%; animation-duration: 22s; }
.blob-secondary { background: radial-gradient(circle, #5de6ff 0%, rgba(93,230,255,0) 70%); width: 520px; height: 520px; bottom: 5%; right: -5%; animation-duration: 28s; animation-delay: -4s; }
.blob-purple { background: radial-gradient(circle, #8b5cf6 0%, rgba(139,92,246,0) 70%); width: 450px; height: 450px; top: 35%; left: 35%; animation-duration: 20s; animation-delay: -10s; }

@keyframes float-blob {
    0% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
    33% { transform: translate(70px, -90px) scale(1.12) rotate(120deg); }
    66% { transform: translate(-50px, 50px) scale(0.92) rotate(240deg); }
    100% { transform: translate(0px, 0px) scale(1) rotate(360deg); }
}

@keyframes popSlam {
    0% { opacity: 0; transform: scale(0.85) translateY(45px); filter: blur(12px) brightness(0.6); }
    65% { transform: scale(1.035) translateY(-5px); filter: blur(2px) brightness(1.15); }
    100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0) brightness(1); }
}
.animate-pop-slam { animation: popSlam 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

.photo-blur { filter: blur(3px); opacity: 0.8; transition: all 0.5s ease-in-out; }
@media (hover: hover) and (pointer: fine) { .photo-card:hover .photo-blur { filter: blur(0); opacity: 1; } }
@media (hover: none) { .photo-blur { filter: blur(0); opacity: 1; } }

.reveal-item { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
.reveal-item.visible { opacity: 1; transform: translateY(0); }