/* 
 * Fileify Mod: Halloween Theme (Total Orange Edition)
 * Type: CSS
 * Description: Burnt orange gradients, global pumpkin text, geometric spiderwebs, and floating embers.
 */

/* --- GPU WARNING BANNER --- */
@keyframes slide-warning {
    0%   { transform: translate(-50%, -100%); opacity: 0; }
    10%  { transform: translate(-50%, 20px); opacity: 1; }
    85%  { transform: translate(-50%, 20px); opacity: 1; }
    100% { transform: translate(-50%, -150%); opacity: 0; visibility: hidden; }
}

html::before {
    content: "⚠️ WARNING: Intensive CSS animations active. High GPU usage expected.";
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%); /* Centers it and hides it off-screen initially */
    background-color: #7a2600 !important;
    color: #ffcead !important;
    padding: 12px 24px;
    border: 1px solid #ff6a00 !important;
    border-radius: 8px;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(255, 106, 0, 0.4);
    z-index: 10000 !important; /* Forces it above the frost/web vignette */
    pointer-events: none !important; /* Prevents it from blocking clicks */
    
    /* Plays once for 7 seconds, then stops permanently on the 100% hidden frame */
    animation: slide-warning 10s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

:root {
    /* Base dark hues */
    --bg-base: #0a0500 !important;
    --bg-surface: #140b05 !important;
    --bg-element: #24130a !important;
    --bg-hover: #381b0a !important;
    
    /* Vibrant pumpkin text */
    --text-main: #ffb473 !important;
    --text-sub: #cc7a3a !important;
    
    /* Core Accents */
    --spotify-green: #ff6a00 !important; 
    
    /* Swapped from deep purple to burnt orange */
    --header-gradient-start: #7a2600 !important; 
}

/* Force EVERY element to use the pumpkin text color */
* {
    color: var(--text-main) !important;
}

.main-content {
    background-image: linear-gradient(to bottom, var(--header-gradient-start) 0%, rgba(20, 11, 5, 0.8) 300px, var(--bg-surface) 500px) !important;
}

/* --- ANIMATED FLOATING EMBERS --- */
@keyframes ghostly-drift {
    0% { background-position: 0px 0px, 0px 0px, 0px 0px; }
    100% { background-position: 400px -800px, -300px -600px, 200px -1000px; }
}

body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none !important;
    z-index: 9998 !important;
    background-image: 
        /* Bright Orange Embers */
        radial-gradient(circle, rgba(255, 106, 0, 0.5) 2px, transparent 4px),
        /* Pale Orange Orbs (Replaced Purple) */
        radial-gradient(circle, rgba(255, 180, 115, 0.4) 3px, transparent 6px),
        /* Toxic Green Particles */
        radial-gradient(circle, rgba(50, 205, 50, 0.3) 1.5px, transparent 3px);
    background-size: 350px 350px, 250px 250px, 400px 400px;
    animation: ghostly-drift 15s linear infinite;
}

/* --- SPIDERWEBS & VIGNETTE --- */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none !important;
    z-index: 9999 !important;
    background-image: 
        radial-gradient(circle at center, transparent 60%, rgba(10, 5, 0, 0.85) 100%),
        repeating-radial-gradient(circle at 0 0, transparent 0, transparent 20px, rgba(255, 180, 115, 0.15) 21px, transparent 22px),
        repeating-conic-gradient(from 0deg at 0 0, rgba(255, 180, 115, 0.15) 0deg, rgba(255, 180, 115, 0.15) 1deg, transparent 1deg, transparent 15deg),
        repeating-radial-gradient(circle at 100% 0, transparent 0, transparent 20px, rgba(255, 180, 115, 0.15) 21px, transparent 22px),
        repeating-conic-gradient(from 0deg at 100% 0, rgba(255, 180, 115, 0.15) 0deg, rgba(255, 180, 115, 0.15) 1deg, transparent 1deg, transparent 15deg);
    background-size: 100% 100%, 250px 250px, 250px 250px, 250px 250px, 250px 250px;
    background-position: center, top left, top left, top right, top right;
    background-repeat: no-repeat;
}

/* --- UI INTERACTIONS --- */
.music-card:hover, .rec-card:hover {
    background-color: var(--bg-hover) !important;
    box-shadow: 0 4px 15px rgba(255, 106, 0, 0.2) !important;
}
.progress-fill, .volume-fill {
    background-color: var(--spotify-green) !important;
}
.player-bar {
    border-top: 1px solid #7a2600 !important;
}

/* Override global text color to keep the play icon dark */
.control-btn.play-pause, .fs-btn.fs-play-pause,
.control-btn.play-pause *, .fs-btn.fs-play-pause * {
    background-color: var(--spotify-green) !important;
    color: #0a0500 !important;
}

.now-playing-fullscreen .fs-gradient {
    background: linear-gradient(to top, rgba(10, 5, 0, 1) 0%, rgba(10, 5, 0, 0.85) 45%, transparent 100%) !important;
}

/* --- HEARTBEAT LYRICS --- */
@keyframes heartbeat-glow {
    0%, 100% { text-shadow: 0 4px 15px rgba(255, 106, 0, 0.4); color: #ff6a00 !important; }
    50% { text-shadow: 0 4px 30px rgba(255, 106, 0, 1); color: #ffa25e !important; }
}

.lyric-line.active-lyric {
    animation: heartbeat-glow 1.5s ease-in-out infinite !important;
}