/* Cosmetics CSS - Visual effects for profile cosmetics */

/* ===== BASE COSMETIC WRAPPER ===== */
/* This class is applied to the avatar container when a cosmetic is equipped */
/* The PNG image is overlaid via inline styles in the blade templates */

/* ===== CSS EFFECTS (applied in addition to PNG overlays) ===== */

/* Golden Frame - Elegant golden border */
.cosmetic-frame_gold {
    border-radius: 50% !important;
}

/* Neon Glow - Pulsating neon effect */
.cosmetic-glow_neon {
    animation: neonPulse 1.5s ease-in-out infinite;
}

@keyframes neonPulse {
    0%, 100% { filter: drop-shadow(0 0 8px #00ffff) drop-shadow(0 0 15px #ff00ff); }
    50% { filter: drop-shadow(0 0 15px #ff00ff) drop-shadow(0 0 25px #00ffff); }
}

/* Cyber Wings - Digital wings effect */
.cosmetic-wings_cyber {
    animation: wingFlap 2s ease-in-out infinite;
}

@keyframes wingFlap {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* Crown of Kings - Royal crown above avatar */
.cosmetic-crown_royal {
    animation: crownFloat 2s ease-in-out infinite;
}

@keyframes crownFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Fire Aura - Blazing fire effect */
.cosmetic-aura_fire {
    animation: fireFlicker 0.5s ease-in-out infinite alternate;
}

@keyframes fireFlicker {
    0% { filter: drop-shadow(0 0 10px #ff4500) drop-shadow(0 0 20px #ff6600); }
    100% { filter: drop-shadow(0 0 15px #ff6600) drop-shadow(0 0 30px #ff8c00); }
}

/* Ice Crystal - Frozen ice effect */
.cosmetic-crystal_ice {
    animation: iceSparkle 2s ease-in-out infinite;
}

@keyframes iceSparkle {
    0%, 100% { filter: drop-shadow(0 0 10px #00bfff) drop-shadow(0 0 20px rgba(135, 206, 250, 0.8)); }
    50% { filter: drop-shadow(0 0 15px #ffffff) drop-shadow(0 0 25px #00bfff); }
}

/* Shadow Mist - Mysterious shadow effect */
.cosmetic-mist_shadow {
    animation: mistSwirl 3s ease-in-out infinite;
}

@keyframes mistSwirl {
    0%, 100% { filter: drop-shadow(0 0 15px rgba(75, 0, 130, 0.8)) drop-shadow(0 0 30px rgba(0, 0, 0, 0.5)); }
    50% { filter: drop-shadow(0 0 20px rgba(138, 43, 226, 0.9)) drop-shadow(0 0 40px rgba(75, 0, 130, 0.6)); }
}

/* Starfield Background - Animated stars */
.cosmetic-bg_stars {
    animation: starTwinkle 4s ease-in-out infinite;
}

@keyframes starTwinkle {
    0%, 100% { filter: drop-shadow(0 0 5px #ffffff); }
    50% { filter: drop-shadow(0 0 15px #ffffff) drop-shadow(0 0 25px #00ffff); }
}

/* Holographic Badge - Shimmering holographic effect */
.cosmetic-badge_holo {
    animation: holoShift 2s linear infinite;
}

@keyframes holoShift {
    0% { filter: hue-rotate(0deg) drop-shadow(0 0 10px #ff00ff); }
    100% { filter: hue-rotate(360deg) drop-shadow(0 0 10px #00ffff); }
}

/* Champion Banner - Victorious banner effect */
.cosmetic-banner_champion {
    animation: championGlow 2s ease-in-out infinite;
}

@keyframes championGlow {
    0%, 100% { filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 30px rgba(255, 165, 0, 0.4)); }
    50% { filter: drop-shadow(0 0 25px rgba(255, 215, 0, 1)) drop-shadow(0 0 50px rgba(255, 165, 0, 0.6)); }
}

/* ===== PROFILE THEMES ===== */

/* Neon Theme */
.theme-neon {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 50%, #0a1a2e 100%) !important;
    border-color: #ff00ff !important;
}

.theme-neon .card-header {
    background: linear-gradient(90deg, rgba(255, 0, 255, 0.2), rgba(0, 255, 255, 0.2)) !important;
    border-bottom: 1px solid #ff00ff !important;
}

/* Dark Pro Theme */
.theme-dark_pro {
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a2e 50%, #16213e 100%) !important;
    border-color: #4a4a6a !important;
}

.theme-dark_pro .card-header {
    background: rgba(30, 30, 50, 0.8) !important;
    border-bottom: 1px solid #4a4a6a !important;
}

/* Sunset Theme */
.theme-sunset {
    background: linear-gradient(135deg, #1a0a0a 0%, #2e1a0a 50%, #1a1a0a 100%) !important;
    border-color: #ff6b35 !important;
}

.theme-sunset .card-header {
    background: linear-gradient(90deg, rgba(255, 107, 53, 0.2), rgba(255, 165, 0, 0.2)) !important;
    border-bottom: 1px solid #ff6b35 !important;
}

/* ===== CHAT COLORS ===== */

/* Rainbow Chat */
.chat-rainbow {
    animation: rainbowText 3s linear infinite;
}

@keyframes rainbowText {
    0% { color: #ff0000; }
    17% { color: #ff8000; }
    33% { color: #ffff00; }
    50% { color: #00ff00; }
    67% { color: #0080ff; }
    83% { color: #8000ff; }
    100% { color: #ff0000; }
}

/* Gold Chat */
.chat-gold {
    color: #ffd700 !important;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5), 0 0 10px rgba(255, 165, 0, 0.3) !important;
}

/* ===== AVATAR COSMETIC POSITIONING ===== */
/* Unified cosmetic border system for all three avatar locations.
   Each location uses:
   - A wrapper div with explicit width/height and overflow:visible
   - .cosmetic-overlay-img: absolute positioned, 140% size (20% overflow each side)
   - A dedicated avatar img class with the default border/shadow
   - When cosmetic is equipped, default border is suppressed via [class*="cosmetic-"] selector
*/

/* ===== SHARED COSMETIC OVERLAY IMAGE ===== */
/* Used in sidebar (.cosmetic-overlay-img), profile, and settings */
.cosmetic-overlay-img {
    position: absolute;
    top: -24%;
    left: -27%;
    width: 152%;
    height: 152%;
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
}

/* ===== PROFILE PAGE AVATAR ===== */
.profile-avatar {
    position: relative;
    width: 120px;
    height: 120px;
    display: inline-block;
    overflow: visible;
}

.profile-avatar-img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #9370db;
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
    position: relative;
    z-index: 1;
    display: block;
}

/* Suppress default border when cosmetic is equipped */
.profile-avatar[class*="cosmetic-"] .profile-avatar-img {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ===== SETTINGS PREVIEW AVATAR ===== */
.preview-avatar {
    position: relative;
    width: 100px;
    height: 100px;
    display: inline-block;
    overflow: visible;
}

.preview-avatar-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #9370db;
    box-shadow: 0 0 15px rgba(147, 51, 234, 0.3);
    position: relative;
    z-index: 1;
    display: block;
}

/* Suppress default border when cosmetic is equipped */
.preview-avatar[class*="cosmetic-"] .preview-avatar-img {
    border-color: transparent !important;
    box-shadow: none !important;
}