/* Why is bro looking at my codes */
/* Its cool fr fr */ 

/* --- THEME & FLUID PHYSICS VARIABLES --- */
:root {
    --bg-primary: #121212;
    --bg-elevated: #0a0a0a;
    --bg-header: #121212;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-muted: #9e9e9e;
    --border-subtle: #222222;
    --border-divider: #333333;
    --accent-gold: #e5a93d;
    --accent-gold-glow: rgba(229, 169, 61, 0.8);
    
    /* Liquid Glass Surface Tokens */
    --glass-bg: rgba(255, 255, 255, 0.025);
    --glass-bg-hover: rgba(255, 255, 255, 0.045);
    --glass-border: rgba(255, 255, 255, 0.09);
    --glass-border-highlight: rgba(255, 255, 255, 0.22);
    --glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.12);

    /* Fluid Spring Physics Curves */
    --ease-liquid: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-silk: cubic-bezier(0.22, 1, 0.36, 1);
}

body.light-theme {
    --bg-primary: #f5f5f7;
    --bg-elevated: #ffffff;
    --bg-header: #ffffff;
    --text-primary: #111113;
    --text-secondary: #4a4a4f;
    --text-muted: #5e5e66;
    --border-subtle: #e2e2e7;
    --border-divider: #dcdce2;
    --accent-gold: #c48312;
    --accent-gold-glow: rgba(196, 131, 18, 0.35);

    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-bg-hover: rgba(255, 255, 255, 0.92);
    --glass-border: rgba(0, 0, 0, 0.07);
    --glass-border-highlight: rgba(196, 131, 18, 0.35);
    --glass-shadow: 0 16px 40px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

/* --- CSS RESET & BASE STYLES --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--bg-primary); 
    color: var(--text-primary);
    line-height: 1.5; 
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden; 
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background-color 0.45s var(--ease-liquid), color 0.45s var(--ease-liquid);
}

body.light-theme {
    -webkit-font-smoothing: subpixel-antialiased;
}

img, a {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body.modal-open {
    overflow: hidden;
}

hr.divider {
    border: 0;
    border-top: 1px solid var(--border-divider);
    margin: 20px 0;
    transition: border-color 0.45s var(--ease-liquid);
}

/* --- CUSTOM CINEMATIC SCROLLBAR (DESKTOP) --- */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg-primary); 
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1d1d1d 0%, #e5a93d 100%);
    border-radius: 999px;
    border: 2px solid var(--bg-primary); 
}
body.light-theme ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #d0d0d8 0%, #c48312 100%);
}
::-webkit-scrollbar-thumb:hover {
    background: #e5a93d; 
    box-shadow: 0 0 10px rgba(229, 169, 61, 0.5);
}

/* --- MOBILE SCROLL PROGRESS LINE --- */
.mobile-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(to right, #c68f2e, #e5a93d);
    width: 0%;
    z-index: 9999;
    box-shadow: 0 0 10px rgba(229, 169, 61, 0.8);
    display: none;
    pointer-events: none;
    transition: width 0.1s linear;
}

/* --- FOOTER STYLES --- */
.site-footer {
    text-align: center; 
    padding: 30px; 
    color: #666; 
    font-size: 0.8rem; 
    border-top: 1px solid var(--border-subtle);
    transition: border-color 0.45s var(--ease-liquid), color 0.45s var(--ease-liquid);
}

body.light-theme .site-footer {
    color: #5e5e66;
}

@media (max-width: 1280px) {
    ::-webkit-scrollbar { display: none; }
    html, body {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .mobile-scroll-progress { display: block; }
}

/* --- LOW DETAIL MODE OVERRIDES --- */
body.low-detail *, body.low-detail *::before, body.low-detail *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-delay: 0s !important;
}

body.low-detail .modal-glow { display: none !important; }
body.low-detail .drawer-overlay,
body.low-detail .left-drawer,
body.low-detail .toast-notification,
body.low-detail .fav-bg-rect,
body.low-detail .scroll-top-btn,
body.low-detail .about-glass-showcase,
body.low-detail .media-card-link::after { 
    -webkit-backdrop-filter: none !important; 
    backdrop-filter: none !important; 
}
body.low-detail .toast-notification, 
body.low-detail .settings-content, 
body.low-detail .left-drawer.open,
body.low-detail .about-glass-showcase { 
    box-shadow: none !important; 
}
body.low-detail .image-item:hover img,
body.low-detail .media-card-link:hover .video-thumbnail { 
    transform: none !important; 
    filter: none !important; 
}
body.low-detail .right-sidebar nav a::after { box-shadow: none !important; }

@keyframes lowDetailFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lowDetailFadeOut { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }

body.low-detail .fav-bg-rect {
    animation: 
        lowDetailFadeIn 0.4s ease calc(0.3s + var(--stagger-delay, 0s)) forwards,
        lowDetailFadeOut 0.5s ease calc(5.2s + var(--stagger-delay, 0s)) forwards !important;
}
body.low-detail .fav-icon-shadow {
    transform: none !important; 
    animation: 
        lowDetailFadeIn 0.6s ease calc(0.5s + var(--stagger-delay, 0s)) forwards,
        lowDetailFadeOut 0.6s ease calc(5.1s + var(--stagger-delay, 0s)) forwards !important;
}
body.low-detail .fav-text {
    max-width: 150px !important;
    animation: 
        lowDetailFadeIn 0.5s ease calc(1.1s + var(--stagger-delay, 0s)) forwards,
        lowDetailFadeOut 0.5s ease calc(4.6s + var(--stagger-delay, 0s)) forwards !important;
}
body.low-detail .new-text-label {
    transform: none !important; 
    animation: 
        lowDetailFadeIn 0.6s var(--ease-silk) calc(1.5s + var(--stagger-delay, 0s)) forwards,
        lowDetailFadeOut 0.6s var(--ease-silk) calc(8.1s + var(--stagger-delay, 0s)) forwards !important;
}