/* =============================================
   HACKERQUEST - Shop Item Effects (globally loaded)
   Frame, Icon, Name, Background effects for profile/PvP
   ============================================= */

/* ── CP Icon Spin ── */
.shop-cp-icon-spin {
    display: inline-block;
    animation: cpSpin 4s linear infinite;
    color: #00ff41;
}

@keyframes cpSpin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

/* ── Frame Effects ── */
.frame-neon-green { box-shadow: 0 0 15px rgba(0,255,65,0.6), 0 0 30px rgba(0,255,65,0.3) !important; border-color: rgba(0,255,65,0.5) !important; }
.frame-blood-red { box-shadow: 0 0 15px rgba(255,51,51,0.6), 0 0 30px rgba(255,51,51,0.3) !important; border-color: rgba(255,51,51,0.5) !important; }
.frame-plasma-purple { box-shadow: 0 0 15px rgba(168,85,247,0.6), 0 0 30px rgba(168,85,247,0.3) !important; border-color: rgba(168,85,247,0.5) !important; }
.frame-cyber-blue { box-shadow: 0 0 15px rgba(59,130,246,0.6), 0 0 30px rgba(59,130,246,0.3) !important; border-color: rgba(59,130,246,0.5) !important; }
.frame-gold-elite { box-shadow: 0 0 15px rgba(251,191,36,0.6), 0 0 30px rgba(251,191,36,0.3) !important; border-color: rgba(251,191,36,0.5) !important; }

.frame-rainbow {
    animation: frameRainbow 3s linear infinite !important;
    border-width: 2px !important;
}

@keyframes frameRainbow {
    0% { border-color: #ff6b6b; box-shadow: 0 0 15px rgba(255,107,107,0.5); }
    16% { border-color: #fbbf24; box-shadow: 0 0 15px rgba(251,191,36,0.5); }
    33% { border-color: #00ff41; box-shadow: 0 0 15px rgba(0,255,65,0.5); }
    50% { border-color: #22d3ee; box-shadow: 0 0 15px rgba(34,211,238,0.5); }
    66% { border-color: #3b82f6; box-shadow: 0 0 15px rgba(59,130,246,0.5); }
    83% { border-color: #a855f7; box-shadow: 0 0 15px rgba(168,85,247,0.5); }
    100% { border-color: #ff6b6b; box-shadow: 0 0 15px rgba(255,107,107,0.5); }
}

.frame-glitch {
    animation: frameGlitch 3s steps(1) infinite !important;
    border-width: 2px !important;
}

@keyframes frameGlitch {
    0%, 90% { border-color: rgba(0,255,65,0.5); box-shadow: 0 0 15px rgba(0,255,65,0.4); }
    91% { border-color: rgba(255,51,51,0.8); box-shadow: 0 0 20px rgba(255,51,51,0.6); transform: translate(2px,-1px); }
    93% { border-color: rgba(0,200,255,0.8); box-shadow: 0 0 20px rgba(0,200,255,0.6); transform: translate(-2px,1px); }
    95% { border-color: rgba(0,255,65,0.5); box-shadow: 0 0 15px rgba(0,255,65,0.4); transform: translate(0); }
}

/* ── Icon Effects ── */
.icon-fx-spin,
.icon-fx-pulse,
.icon-fx-glitch,
.icon-fx-float {
    display: inline-block;
}

.icon-fx-spin {
    animation: iconFxSpin 3s linear infinite;
}

@keyframes iconFxSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.icon-fx-pulse {
    animation: iconFxPulse 1.5s ease-in-out infinite;
}

@keyframes iconFxPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.8; }
}

.icon-fx-glitch {
    animation: iconFxGlitch 4s steps(1) infinite;
}

@keyframes iconFxGlitch {
    0%, 88% { transform: none; filter: none; }
    89% { transform: translate(3px,-2px) skewX(5deg); filter: hue-rotate(90deg); }
    91% { transform: translate(-2px,1px) skewX(-3deg); filter: hue-rotate(200deg); }
    93% { transform: translate(1px,2px); filter: hue-rotate(45deg); }
    95% { transform: none; filter: none; }
}

.icon-fx-float {
    animation: iconFxFloat 3s ease-in-out infinite;
}

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

/* ── Name Effects ── */
.name-fx-rainbow {
    background: linear-gradient(90deg, #ff6b6b, #fbbf24, #00ff41, #22d3ee, #3b82f6, #a855f7, #ff6b6b);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: nameFxRainbow 3s linear infinite;
}

@keyframes nameFxRainbow {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.name-fx-glitch {
    animation: nameFxGlitch 4s steps(1) infinite;
    position: relative;
}

@keyframes nameFxGlitch {
    0%, 90% { text-shadow: none; }
    91% { text-shadow: 2px 0 #ff3333, -2px 0 #00ffff; }
    93% { text-shadow: -2px 0 #ff3333, 2px 0 #00ffff; }
    95% { text-shadow: none; }
}

.name-fx-neon {
    text-shadow: 0 0 7px currentColor, 0 0 10px currentColor, 0 0 21px currentColor;
    animation: nameFxNeon 2s ease-in-out infinite alternate;
}

@keyframes nameFxNeon {
    0% { text-shadow: 0 0 5px currentColor, 0 0 10px currentColor; opacity: 1; }
    100% { text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 40px currentColor; opacity: 0.9; }
}

.name-fx-matrix {
    color: #00ff41 !important;
    text-shadow: 0 0 8px rgba(0,255,65,0.6);
    animation: nameFxMatrix 2s ease-in-out infinite;
}

@keyframes nameFxMatrix {
    0%, 100% { text-shadow: 0 0 5px rgba(0,255,65,0.4); }
    50% { text-shadow: 0 0 15px rgba(0,255,65,0.8), 0 0 30px rgba(0,255,65,0.3); }
}

.name-fx-fire {
    background: linear-gradient(to top, #ff4500, #ff8c00, #ffd700);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: nameFxFire 1.5s ease-in-out infinite alternate;
}

@keyframes nameFxFire {
    0% { filter: brightness(1); }
    100% { filter: brightness(1.3); }
}

/* ── Background Effects (Profile) ── */
.bg-fx-matrix { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ctext x='0' y='15' font-family='monospace' font-size='14' fill='rgba(0,255,65,0.04)'%3E0%3C/text%3E%3C/svg%3E") !important; }
.bg-fx-circuit { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='rgba(59,130,246,0.06)' fill='none'/%3E%3Ccircle cx='20' cy='20' r='2' fill='rgba(59,130,246,0.08)'/%3E%3C/svg%3E") !important; }
.bg-fx-grid { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M30 0H0v30' stroke='rgba(6,182,212,0.05)' fill='none'/%3E%3C/svg%3E") !important; }
.bg-fx-particles { background-image: radial-gradient(circle at 20% 30%, rgba(168,85,247,0.06) 1px, transparent 1px), radial-gradient(circle at 80% 70%, rgba(168,85,247,0.04) 1px, transparent 1px) !important; background-size: 60px 60px, 40px 40px !important; }
.bg-fx-terminal {
    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,65,0.015) 2px, rgba(0,255,65,0.015) 4px) !important;
}

/* ── Shop Badges (for profile) ── */
.shop-badge {
    font-family: var(--hq-font-mono, monospace);
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 3px;
    font-size: 0.65rem;
    padding: 0.2em 0.5em;
    border: 1px solid;
}

/* ── Shop Title (under name on profile) ── */
.shop-player-title {
    font-family: var(--hq-font-mono, monospace);
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.7;
}