/* OurFriendSpace — Custom CSS (backgrounds, sparkles, scrollbars) */

/* ============================
   Background Themes for Profiles
   (BackgroundTheme is int 1-12 in DB)
   Chaos is a feature, not a bug.
   ============================ */
.bg-theme-1  { background: linear-gradient(135deg, #ff69b4 0%, #ff1493 50%, #ff69b4 100%); background-size: 400% 400%; animation: gradient-shift 5s ease infinite; } /* Sparkle Pink */
.bg-theme-2  { background: linear-gradient(135deg, #4169e1 0%, #1e90ff 50%, #00bfff 100%); background-size: 400% 400%; animation: gradient-shift 5s ease infinite; } /* Sparkle Blue */
.bg-theme-3  { background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); } /* Galaxy */
.bg-theme-4  { background: #000000; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='0' y='30' fill='%2300ff00' fill-opacity='0.2' font-family='monospace' font-size='10'%3E01001%3C/text%3E%3C/svg%3E"); } /* Matrix */
.bg-theme-5  { background: linear-gradient(180deg, #ff4500 0%, #ff6347 25%, #ff8c00 50%, #ffa500 75%, #ff4500 100%); background-size: 100% 200%; animation: flames 2s ease infinite; } /* Flames */
.bg-theme-6  { background-color: #ffb6c1; background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='5' y='25' font-size='20'%3E%F0%9F%92%95%3C/text%3E%3C/svg%3E"); } /* Hearts */
.bg-theme-7  { background: linear-gradient(45deg, #ff0000 0%, #ff7f00 14%, #ffff00 28%, #00ff00 42%, #0000ff 57%, #4b0082 71%, #9400d3 85%, #ff0000 100%); background-size: 400% 400%; animation: rainbow 3s ease infinite; } /* Chaos */
.bg-theme-8  { background: #000000; color: #ffffff; } /* Emo */
.bg-theme-9  { background: repeating-linear-gradient(45deg, #ff00ff 0px, #ff00ff 10px, #000000 10px, #000000 20px); } /* Scene */
.bg-theme-10 { background: linear-gradient(135deg, #ffd700, #ff69b4, #00ffff, #ff1493, #ffd700); background-size: 400% 400%; animation: rainbow 2s ease infinite; } /* Glitter Explosion */
.bg-theme-11 { background: #f5f5dc; } /* Corporate */
.bg-theme-12 { background: linear-gradient(180deg, #78b4e8 0%, #9cc8f0 40%, #78b4e8 60%, #4a9ae0 100%); } /* Windows XP */
.bg-theme-13 { background: linear-gradient(180deg, #0a0a2e 0%, #0d1f3c 30%, #0a2a3c 60%, #0a0a2e 100%); background-size: 100% 300%; animation: aurora-shift 8s ease-in-out infinite; } /* Northern Lights */
.bg-theme-14 { background: radial-gradient(ellipse at center, #0a0a1a 0%, #000005 100%); } /* Starfield */
.bg-theme-15 { background: linear-gradient(180deg, #001a33 0%, #003366 40%, #004d80 70%, #002244 100%); background-size: 100% 200%; animation: underwater-drift 6s ease-in-out infinite; } /* Underwater */
.bg-theme-16 { background: linear-gradient(180deg, #0a0014 0%, #1a0033 40%, #0d001a 100%); } /* Neon City */
.bg-theme-17 { background: linear-gradient(135deg, #1a0033 0%, #330066 25%, #660066 50%, #ff71ce 75%, #01cdfe 100%); background-size: 400% 400%; animation: gradient-shift 6s ease infinite; } /* Vaporwave */
.bg-theme-18 { background: radial-gradient(ellipse at 30% 50%, #0a0020 0%, #050010 40%, #000005 100%); } /* Deep Space */

/* ============================
   Animations
   ============================ */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

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

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

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

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

@keyframes sparkle-fade {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0) translateY(-20px);
    }
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 191, 0.7); }
    50% { box-shadow: 0 0 0 10px rgba(124, 92, 191, 0); }
}

@keyframes slide-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ============================
   Sparkle Cursor Trail
   ============================ */
.cursor-sparkle {
    position: fixed;
    pointer-events: none;
    font-size: 12px;
    animation: sparkle-fade 1s ease-out forwards;
    z-index: 9999;
}

/* ============================
   Glitter Text Effect
   ============================ */
.glitter-text {
    background: linear-gradient(90deg, #ffd700, #ff69b4, #00ffff, #ffd700);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 3s linear infinite;
}

.blink {
    animation: blink 1s step-end infinite;
}

/* ============================
   Scrollbar (dark purple era)
   ============================ */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #1A1A2E;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7C5CBF, #5B2D8E);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #9C7FE8, #7C5CBF);
}

/* ============================
   Loading Spinner
   ============================ */
.loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid #7C5CBF;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

/* ============================
   Friend Request Pulse
   ============================ */
.friend-request-pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* ============================
   Music Player Glow
   The profile's most important ambient animation.
   It makes the profile feel alive.
   (The AI thinks it's playing a real song. It's chiptune bleeps.)
   ============================ */
@keyframes player-glow {
    0%, 100% { box-shadow: 0 0 16px rgba(124, 92, 191, 0.6); }
    50% { box-shadow: 0 0 16px rgba(124, 92, 191, 0.3); }
}

.player-glowing {
    animation: player-glow 2s ease-in-out infinite;
}

/* ============================
   Profile Page
   ============================ */
.profile-page {
    min-height: 500px;
}

/* ============================
   Responsive — Bible Section 09
   Desktop-first. Mobile shouldn't be broken.
   ============================ */

/* Sticky mobile music player */
@media (max-width: 767px) {
    #music-player-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        border-radius: 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    }

    #music-player-container .ofs-section-header {
        display: none;
    }

    /* Pad bottom of page so content isn't hidden behind sticky player */
    .profile-page {
        padding-bottom: 80px;
    }

    /* Contact box buttons — tighter on small screens */
    .contact-action {
        padding: 0.5rem 0.5rem;
        font-size: 11px;
    }
}

/* Tablet tweaks (768-959px) */
@media (min-width: 768px) and (max-width: 959px) {
    /* Slightly tighter gaps */
    .profile-page .flex.gap-5 {
        gap: 1rem;
    }
}