/* MASTER STYLE v20.0 */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&display=swap');

:root { --gold: #D4AF37; --dark: #080808; }
body { margin: 0; background: var(--dark); color: #ccc; font-family: 'Manrope', sans-serif; overflow-x: hidden; }

/* LAYOUT */
.bg-texture { position: fixed; inset: 0; background: url('../images/bg-texture.jpg') center/cover; opacity: 0.15; z-index: -2; pointer-events: none; }
#desktop-experience { position: fixed; inset: 0; z-index: -1; }
.slide { position: absolute; inset: 0; background-size: contain; background-position: center; background-repeat: no-repeat; opacity: 0; }

/* TOP LEFT: SEARCH (Spotlight) */
.search-container { position: fixed; top: 30px; left: 40px; z-index: 10000; }
.search-bar { 
    display: flex; align-items: center; gap: 10px; padding: 12px 20px; 
    background: rgba(20,20,20,0.8); backdrop-filter: blur(10px); 
    border: 1px solid rgba(255,255,255,0.1); border-radius: 50px; /* Round Pill */
    width: 250px; transition: 0.3s;
}
.search-bar:focus-within { border-color: var(--gold); box-shadow: 0 0 15px rgba(212,175,55,0.2); }
.search-bar input { background: transparent; border: none; color: #fff; font-size: 14px; width: 100%; outline: none; font-family: 'Manrope'; }
.search-dropdown { position: absolute; top: 60px; left: 0; width: 300px; background: #111; border: 1px solid #333; border-radius: 12px; display: none; overflow: hidden; }
.result-item { padding: 10px; display: flex; gap: 10px; align-items: center; cursor: pointer; border-bottom: 1px solid #222; }
.result-item:hover { background: #222; }
.result-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }

/* TOP RIGHT: STACK */
.right-stack { position: fixed; top: 30px; right: 40px; z-index: 10000; display: flex; flex-direction: column; align-items: flex-end; gap: 25px; }
.logo-btn img { height: 35px; width: auto; }
.menu-toggle { width: 45px; height: 45px; display: flex; flex-direction: column; justify-content: center; gap: 6px; cursor: pointer; padding: 10px; }
.menu-toggle span { width: 100%; height: 2px; background: #ddd; transition: 0.3s; }

/* BOTTOM RIGHT: SOCIALS */
.social-icons-desktop { position: fixed; bottom: 40px; right: 40px; z-index: 10000; display: flex; flex-direction: column; gap: 15px; }
.social-icons-desktop a { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; color: #888; border-radius: 50%; font-size: 18px; text-decoration: none; transition: 0.3s; }
.social-icons-desktop a:hover { color: var(--gold); }

/* BEAM ANIMATION */
@keyframes beam { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }
.border-beam { position: relative; overflow: hidden; }
.border-beam::after { content:''; position: absolute; inset: -1px; background: linear-gradient(45deg, transparent, var(--gold), transparent); z-index: -1; opacity: 0; transition: 0.3s; background-size: 200% 200%; }
.border-beam:hover::after { opacity: 1; animation: beam 1.5s linear infinite; }

/* NAV DRAWER */
.main-nav { position: fixed; inset: 0; background: rgba(10,10,10,0.98); transform: translateX(100%); transition: 0.4s; z-index: 9999; padding-left: 30%; }
.main-nav.is-open { transform: translateX(0); }
.nav-link { font-size: 2rem; color: #888; text-decoration: none; font-weight: 800; text-transform: uppercase; display: block; margin-bottom: 20px; transition: 0.2s; }
.nav-link:hover { color: #fff; transform: translateX(20px); }
.gold-link { color: var(--gold); }

/* MOBILE */
@media (max-width: 768px) {
    .social-icons-desktop, #desktop-experience { display: none !important; }
    .search-container { top: 20px; left: 20px; }
    .search-bar { width: 40px; padding: 0; justify-content: center; }
    .search-bar input { display: none; } /* Icon only initially */
    .right-stack { top: 20px; right: 20px; }
    .main-nav { padding-left: 40px; width: 100%; }
}