@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Open+Sans:wght@400;600&display=swap');

/* --- Root Variables and Base Styles (UPDATED TO GOLD/BLACK ONLY) --- */
:root { 
    --font-heading: 'Montserrat', sans-serif; 
    --font-body: 'Open Sans', sans-serif; 
    
    /* NEW GOLD THEME COLORS */
    --glow-primary: #FFD700;      /* Pure Gold (Primary Glow) */
    --glow-secondary: #FFEA00;    /* Lighter Gold/Yellow (Accent) */
    --glow-gold: #FFD700;         /* Alias for Pure Gold */
    --glow-purple: #FFA500;       /* Orange-Gold (Secondary Primary Glow) */
    --glow-teal: #FFEA00;         /* White replaced with Light Gold/Yellow */
    
    --color-error: #ef4444;       /* Error Red (Standard, kept for alerts) */
    --color-success: #22c55e;     /* Success Green (Standard, kept for alerts) */
    --dark-bg: #000000;           /* True Black Background */
    --text-primary: #FFEA00;      /* Default text color is light gold/yellow */
}
html, body { 
    overflow-x: hidden; 
}
body { 
    font-family: var(--font-body); 
    background-color: var(--dark-bg); /* Use true black */
    color: var(--text-primary); 
    min-height: 100vh; 
    position: relative; 
}

/* --- GOLD AURORA BACKGROUND LAYER (NEW) --- */
.gold-aurora-bg {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: -40; /* Furthest back layer */
    background: 
        radial-gradient(circle at 10% 10%, rgba(255, 215, 0, 0.15), transparent),
        radial-gradient(circle at 70% 30%, rgba(255, 234, 0, 0.1), transparent),
        radial-gradient(circle at 40% 90%, rgba(255, 165, 0, 0.15), transparent);
    background-size: 80% 80%, 70% 70%, 60% 60%;
    background-repeat: no-repeat;
    animation: flowGoldAurora 40s ease-in-out infinite alternate;
    filter: blur(100px); /* Heavy blur for soft glow effect */
    opacity: 0.8;
}

@keyframes flowGoldAurora {
    0% {
        background-position: 0% 0%, 50% 100%, 100% 50%;
        transform: rotate(0deg) scale(1);
    }
    100% {
        background-position: 100% 100%, 0% 0%, 50% 0%;
        transform: rotate(10deg) scale(1.1);
    }
}
/* --- END GOLD AURORA BACKGROUND LAYER --- */


/* --- Global Blur Overlay (NEW) --- */
#blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -35; /* Between stars (-30) and canvas (-40) */
    pointer-events: none;
    /* Apply a subtle dark transparent overlay with a light blur */
    background-color: rgba(0, 0, 0, 0.1); 
    backdrop-filter: blur(2px); /* Subtle blur (approx 10% effect) */
}

/* --- Parallax Star Background (CSS Animations) --- */
@keyframes animStar { 
    from { transform: translateY(0px); } 
    to { transform: translateY(-2000px); } 
}
#stars, #stars2, #stars3 { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: -30; 
    pointer-events: none; 
    background: transparent; 
}

/* --- General Utility Styles --- */
.aurora-shimmer { 
    transition: all 0.3s ease; 
    text-shadow: 0 0 2px rgba(255, 234, 0, 0.8); /* Use light gold for shimmer */
    color: var(--text-primary);
}
.aurora-shimmer:hover { 
    color: var(--glow-secondary); 
    /* Gold Fire Glow on Socials */
    text-shadow: 0 0 5px var(--glow-primary), 0 0 10px #000, 0 0 15px var(--glow-secondary); 
    transform: scale(1.1); 
}

/* -------------------------------------------------------- */
/* --- UPDATED: GOLD GLASSY STYLES --- */
/* -------------------------------------------------------- */

/* Core Content/Card Glass Box - Darker, Smokier, Gold Glow */
.glassy-box { 
    background-color: rgba(17, 17, 17, 0.6); /* Darker glass background */
    backdrop-filter: blur(25px); /* Strong blur */
    border: 1px solid rgba(255, 215, 0, 0.2); /* Gold-tinted border */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7), 0 0 5px rgba(255, 215, 0, 0.3); /* Subtle initial gold glow */
    transition: all 0.3s ease; 
}
.glassy-box:hover { 
    /* Intense Gold Glow on hover */
    border-color: rgba(255, 215, 0, 0.8); /* Stronger Gold Border */
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.7), 0 0 40px rgba(255, 165, 0, 0.5), 0 0 15px rgba(255, 234, 0, 0.3); 
}

/* Specific Style for Header, Footer, and Bottom Nav (ULTRA Glassy) */
.glassy-header-footer {
    background-color: rgba(0, 0, 0, 0.9); /* Near-black background, slight transparency */
    backdrop-filter: blur(30px); /* Max blur for full glassy effect */
    border-bottom: 1px solid rgba(255, 215, 0, 0.15); /* Gold highlight */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
}

/* Popup and Modal Glass Style (Use primary gold for borders/glow) */
.glassy-popup { 
    background-color: rgba(10, 10, 14, 0.95); /* Very dark background */
    backdrop-filter: blur(25px); 
    border: 1px solid var(--glow-primary); /* Gold border for emphasis */
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.9), 0 0 50px rgba(255, 215, 0, 0.6); /* Gold glow */
    z-index: 50; 
}
/* -------------------------------------------------------- */

.gradient-divider { 
    height: 2px; 
    /* Gold -> Light Gold Gradient */
    background: linear-gradient(90deg, var(--glow-primary), var(--glow-secondary), var(--glow-primary)); 
    background-size: 400% 400%; 
    animation: flowingGlow 8s ease infinite; 
    opacity: 0.8; 
}
.desktop-home-link, .home-nav-active > span { 
    /* Gold/Light Gold Gradient for Home Link */
    background: linear-gradient(45deg, var(--glow-primary), var(--glow-secondary)); 
    -webkit-background-clip: text; 
    background-clip: text; 
    color: transparent; 
}
.home-nav-active { 
    color: var(--glow-primary); /* Use primary gold for mobile icon */
}
@keyframes flowingGlow { 
    0% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
    100% { background-position: 0% 50%; } 
}
.animated-pencil { 
    display: inline-block; 
    animation: pulsePencil 2s infinite ease-in-out; 
}
#preloader { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: #000000; /* Pure Black */
    z-index: 100; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    transition: opacity 0.5s ease; 
}
#preloader.hidden { 
    display: none !important; 
    opacity: 0; 
}
.hidden { 
    display: none !important; 
}

/* Style for Login/Register Buttons */
.auth-button { 
    background-color: rgba(255, 215, 0, 0.1); /* Gold tint on black background */
    border: 1px solid rgba(255, 215, 0, 0.3); 
    padding: 6px 12px; 
    border-radius: 99px; 
    font-size: 0.8rem; 
    font-weight: 600; 
    transition: background-color 0.3s; 
    color: var(--text-primary); 
}
.auth-button:hover { 
    background-color: rgba(255, 215, 0, 0.2); 
}
.auth-button.primary { 
    /* Gold Primary Button Gradient */
    background: linear-gradient(90deg, var(--glow-primary) 0%, var(--glow-secondary) 100%); 
    border: none; 
    color: #000; /* Black text on bright gradient */
    font-weight: 900;
}
.auth-button.primary:hover { 
    opacity: 0.9; 
}

/* Artist Quick Links Styles */
#artist-quick-links { 
    background-color: rgba(10, 10, 14, 0.8); 
    backdrop-filter: blur(15px); 
    border: 1px solid rgba(255, 215, 0, 0.4); /* Use Gold border */
    padding: 1.25rem; 
    border-radius: 1.5rem; 
    margin-top: 1rem; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); 
}
#artist-quick-links h3 { 
    color: var(--glow-primary); 
    font-weight: 700; 
    margin-bottom: 0.75rem; 
    font-size: 1rem; 
    border-bottom: 1px solid rgba(255, 215, 0, 0.1); /* Gold tint border */
    padding-bottom: 0.5rem; 
}
#artist-quick-links ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: flex; 
    justify-content: space-around; 
    gap: 0.5rem; 
    flex-wrap: wrap; 
}
#artist-quick-links a { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 0.25rem; 
    padding: 0.5rem; 
    border-radius: 0.5rem; 
    transition: background-color 0.2s ease; 
    color: var(--text-primary); /* Default text color */
    font-size: 0.75rem; 
    text-decoration: none; 
}
#artist-quick-links a:hover { 
    background-color: rgba(255, 215, 0, 0.15); /* Gold hover tint */
    color: var(--glow-secondary); 
}
#artist-quick-links a .lucide { 
    width: 1.25rem; 
    height: 1.25rem; 
}

/* Artist Stats Styles */
#artist-stats { 
    display: flex; 
    gap: 1rem; 
    margin-left: auto; 
    align-items: center; 
    font-size: 0.8rem; 
    color: #9CA3AF; /* Kept gray for subtle stats */
}
#artist-stats span { 
    display: flex; 
    align-items: center; 
    gap: 0.25rem; 
}
#artist-stats .lucide { 
    width: 1rem; 
    height: 1rem; 
}
#artist-stats .stat-value { 
    font-weight: 600; 
    color: var(--text-primary); 
}

/* Profile Popup User Info */
#profile-user-info { 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
    padding: 0.75rem; 
    border-bottom: 1px solid rgba(255, 215, 0, 0.1); /* Gold tint border */
    margin-bottom: 0.5rem; 
}
#profile-user-info img { 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 1px solid rgba(255, 215, 0, 0.2); 
}
#profile-user-info div { 
    line-height: 1.3; 
}
#profile-user-info .display-name { 
    font-weight: 600; 
    color: var(--glow-secondary); 
    font-size: 0.9rem; 
}
#profile-user-info .user-email { 
    font-size: 0.75rem; 
    color: #9CA3AF; 
}

/* Become Artist Banner */
#become-artist-banner { 
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.25) 0%, rgba(10, 10, 14, 0.8) 100%); /* Gold tint fading to dark */
    border: 1px solid rgba(255, 215, 0, 0.5); 
    padding: 1.5rem; 
    border-radius: 1.5rem; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-top: 1rem; 
}
#become-artist-banner div p:first-child { 
    font-weight: 700; 
    font-size: 1.1rem; 
    color: var(--glow-secondary); 
    margin-bottom: 0.25rem; 
}
#become-artist-banner div p:last-child { 
    font-size: 0.9rem; 
    color: var(--text-primary); 
}
#become-artist-banner button { 
    width: auto; 
    padding: 0.6rem 1.2rem; 
    font-size: 0.9rem; 
    /* Gold Gradient */
    background: linear-gradient(90deg, var(--glow-primary) 0%, var(--glow-secondary) 100%); 
    border: none; 
    color: #000; 
    font-weight: 900; 
    border-radius: 99px; 
}

/* -------------------------------------------------------- */
/* --- Dynamic Follow Button Styles --- */
/* -------------------------------------------------------- */

/* Default Button (Black/Gold Gradient) */
.follow-button.default-style {
    background: linear-gradient(90deg, var(--glow-gold), rgba(0, 0, 0, 0.9));
    border: 1px solid var(--glow-gold);
    color: var(--dark-bg); /* Black text on gold is best contrast */
    font-weight: 700;
}

/* Following Button (Gold/Black Gradient - Reversed) */
.follow-button.following-style {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.9), var(--glow-primary));
    border: 1px solid var(--glow-primary);
    color: var(--glow-secondary); 
    background-size: 300% 100%;
    animation: flowFollowing 5s infinite linear;
}

@keyframes flowFollowing {
    0% { background-position: 100% 0; }
    50% { background-position: 0% 0; }
    100% { background-position: 100% 0; }
}

/* Follow Button Inner Content Animation (Unchanged) */
.follow-button-text {
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
    min-width: 60px; 
    text-align: center;
}
.follow-button-count {
    display: block;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateY(100%); 
    opacity: 0;
}
.follow-button.show-count .follow-button-text {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}
.follow-button.show-count .follow-button-count {
    transform: translateY(0);
    opacity: 1;
}

/* -------------------------------------------------------- */
/* --- Art Card Image Shading (For Visual Depth) --- */
/* -------------------------------------------------------- */
.art-image-wrapper {
    position: relative;
}

/* Gradient shade under the art image (Darker black shade) */
.art-image-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px; 
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.0) 80%);
    pointer-events: none;
}