/* =========================================================================
   E-FOOTBALL COSMETIC CSS ENGINE
   Location: assets/css/cosmetics.css
   Description: Ultra-premium text-based animated cosmetics for the Badge System
   ========================================================================= */

/* Base setup for all badges */
[class^="badge-"], [class*=" badge-"] {
    position: relative;
    top: -2px; /* Optical baseline correction to pull the stencil text up (avoids transform conflicts) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: 'eFootballStencil_Force', sans-serif !important;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: clamp(0.75rem, 1.5vw, 1rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    z-index: 1;
    transform: translateZ(0); /* Hardware acceleration */
    will-change: transform, opacity;
}

/* =========================================
   CUSTOM EFOOTBALL FONTS
   ========================================= */

@font-face {
    font-family: 'eFootballStencil_Force';
    src: url('../fonts/eFootballStencil-Regular.woff2?v=3.0') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block; /* Hides text until loaded to prevent layout glitch FOUT */
}

/* =========================================
   GLOBAL COSMETIC CLASSES (SINGLE SOURCE OF TRUTH)
   ========================================= */

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

.frame-outer {
    position: relative;
    padding: 2px; /* Border thickness */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    z-index: 1;
    transform: translateZ(0);
    will-change: transform;
}

.frame-inner {
    width: 100%;
    height: 100%;
    background-color: rgba(10, 15, 25, 0.95);
    background-image: 
        radial-gradient(circle at center, rgba(30, 40, 60, 0.9) 0%, rgba(10, 15, 25, 0.95) 100%),
        linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.03) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.03) 75%, rgba(255, 255, 255, 0.03) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.03) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.03) 75%, rgba(255, 255, 255, 0.03) 76%, transparent 77%, transparent);
    background-size: 100% 100%, 20px 20px, 20px 20px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------------- SHAPES ---------------- */

/* Cyber Cut Shape (Chamfered Rectangle) */
.shape-cyber, .shape-cyber .frame-inner {
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.shape-cyber .frame-inner {
    padding: 0.6em 2em;
}

/* Shield Shape (Crest) */
.shape-shield, .shape-shield .frame-inner {
    clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}
.shape-shield .frame-inner {
    padding: 0.8em 2.2em 1em 2.2em;
}

/* ---------------- TIER 1 MATERIALS ---------------- */

.frame-silver-wire {
    background: linear-gradient(90deg, 
        rgba(255,255,255,0) 0%, 
        #ffffff 16.66%, 
        #9ca3af 33.33%, 
        rgba(255,255,255,0) 50%, 
        #ffffff 66.66%, 
        #9ca3af 83.33%, 
        rgba(255,255,255,0) 100%
    );
    background-size: 200% 100%;
    animation: border-flow 4s linear infinite;
    will-change: background-position;
}

.frame-neon-trace {
    background: linear-gradient(90deg, 
        rgba(0,243,255,0) 0%, 
        #00f3ff 16.66%, 
        #ff00c8 33.33%, 
        rgba(0,243,255,0) 50%, 
        #00f3ff 66.66%, 
        #ff00c8 83.33%, 
        rgba(0,243,255,0) 100%
    );
    background-size: 200% 100%;
    animation: border-flow 3.5s linear infinite;
    will-change: background-position;
}

/* ---------------- TIER 2 MATERIALS ---------------- */

.frame-mythic-gold {
    background: linear-gradient(90deg, 
        rgba(255,215,0,0) 0%, 
        #ffd700 16.66%, 
        #ffffff 33.33%, 
        rgba(255,215,0,0) 50%, 
        #ffd700 66.66%, 
        #ffffff 83.33%, 
        rgba(255,215,0,0) 100%
    );
    background-size: 200% 100%;
    animation: border-flow 4.5s linear infinite;
    will-change: background-position;
}

.frame-crimson-obsidian {
    background: linear-gradient(90deg, 
        rgba(255,0,0,0) 0%, 
        #ff0000 16.66%, 
        #ff4d4d 33.33%, 
        rgba(255,0,0,0) 50%, 
        #ff0000 66.66%, 
        #ff4d4d 83.33%, 
        rgba(255,0,0,0) 100%
    );
    background-size: 200% 100%;
    animation: border-flow 5s linear infinite;
    will-change: background-position;
}

/* =========================================
   TIER 1: PREMIUM STORE RENTALS (15 Classes)
   ========================================= */

/* 1. Neon Cyber */
.badge-neon-cyber {
    background: linear-gradient(90deg, #0ff, #f0f, #0ff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 3.5s linear infinite, cyber-glitch 4s infinite;
    filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.6));
}

/* 2. Smooth Ocean */
.badge-smooth-ocean {
    background: linear-gradient(270deg, #00c6ff, #0072ff, #00c6ff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 4.5s ease infinite;
    filter: drop-shadow(0 0 8px rgba(0, 114, 255, 0.4));
}

/* 3. Blood Moon */
.badge-blood-moon {
    background: linear-gradient(90deg, #ff0000, #8b0000, #ff0000);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.8)) drop-shadow(0 0 20px rgba(139, 0, 0, 0.6));
    animation: gradient-flow 3.5s linear infinite, blood-pulse 2.5s infinite alternate;
}

/* 4. Toxic Venom */
.badge-toxic-venom {
    background: linear-gradient(90deg, #39ff14, #00ff00, #39ff14);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.8)) drop-shadow(0 0 10px rgba(57, 255, 20, 0.6));
    animation: gradient-flow 3.5s linear infinite, venom-drip 3s infinite alternate;
}

/* 5. Electric Violet */
.badge-electric-violet {
    background: linear-gradient(90deg, #8a2be2, #4b0082, #8a2be2);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(138, 43, 226, 0.7));
    animation: gradient-flow 3s linear infinite;
}

/* 6. Solar Flare */
.badge-solar-flare {
    background: linear-gradient(90deg, #ff8c00, #ffd700, #ff8c00);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(255, 140, 0, 0.8));
    animation: gradient-flow 4.5s linear infinite;
}

/* 7. Arctic Frost */
.badge-arctic-frost {
    background: linear-gradient(90deg, #e0ffff, #00ffff, #e0ffff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 8px rgba(224, 255, 255, 0.8));
    animation: gradient-flow 6s linear infinite;
}

/* 8. Crimson Fade */
.badge-crimson-fade {
    background: linear-gradient(90deg, #dc143c, #000000, #dc143c);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 4.5s linear infinite;
}

/* 9. Emerald City */
.badge-emerald-city {
    background: linear-gradient(90deg, #00ff7f, #008000, #00ff7f);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(0, 255, 127, 0.5));
    animation: gradient-flow 4s linear infinite;
}

/* 10. Twilight Spark */
.badge-twilight-spark {
    background: linear-gradient(90deg, #ff69b4, #9370db, #ff69b4);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 8px rgba(255, 105, 180, 0.6));
    animation: gradient-flow 5s linear infinite;
}

/* 11. Liquid Gold */
.badge-liquid-gold {
    background: linear-gradient(90deg, #cfb53b, #ffdf00, #cfb53b);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px rgba(207, 181, 59, 0.5));
    animation: gradient-flow 4.5s linear infinite;
}

/* 12. Starlight Silver */
.badge-starlight-silver {
    background: linear-gradient(90deg, #c0c0c0, #ffffff, #c0c0c0);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 8px rgba(192, 192, 192, 0.6));
    animation: gradient-flow 6s linear infinite;
}

/* 13. Cherry Blossom */
.badge-cherry-blossom {
    background: linear-gradient(90deg, #ffb7c5, #ff69b4, #ffb7c5);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(255, 183, 197, 0.6));
    animation: gradient-flow 4s linear infinite;
}

/* 14. Deep Void */
.badge-deep-void {
    background: linear-gradient(90deg, #4b0082, #000000, #4b0082);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(75, 0, 130, 0.9));
    animation: gradient-flow 7s linear infinite;
}

/* 15. Magma Core */
.badge-magma-core {
    background: linear-gradient(90deg, #ff4500, #8b0000, #ff4500);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(255, 69, 0, 0.8));
    animation: gradient-flow 3.5s linear infinite;
}

/* =========================================
   TIER 2: LIFETIME ACHIEVEMENTS (10 Classes)
   ========================================= */

/* 16. Mythic Gold */
.badge-mythic-gold {
    background: linear-gradient(90deg, #ffd700 0%, #ffaa00 20%, #ffffff 50%, #ffaa00 80%, #ffd700 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 3s linear infinite;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 30px rgba(255, 170, 0, 0.6));
}

/* 17. Hellfire */
.badge-hellfire {
    background: linear-gradient(0deg, #ff0000, #ff7300, #fffb00, #ff7300, #ff0000);
    background-size: 100% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: vertical-flow 2.5s linear infinite, hellfire-pulse 1s infinite alternate;
    filter: drop-shadow(0 0 10px #ff0000) drop-shadow(0 -5px 15px #ff7300);
}

/* 18. Radiant God */
.badge-radiant-god {
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 3.5s linear infinite;
    filter: drop-shadow(0 0 15px rgba(255,255,255,0.8)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.4));
}

/* 19. Dark Matter */
.badge-dark-matter {
    background: linear-gradient(90deg, #ff00ff, #a200ff, #ff00ff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 6s linear infinite, void-pulse 4s infinite alternate;
}

/* 20. Celestial Nova */
.badge-celestial-nova {
    background: linear-gradient(90deg, #ffffff, #87ceeb, #ffffff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 2.5s linear infinite, nova-pulse 2.5s infinite alternate;
    filter: drop-shadow(0 0 20px rgba(135, 206, 235, 1));
}

/* 21. Abyssal Terror */
.badge-abyssal-terror {
    background: linear-gradient(90deg, #dc143c, #8b0000, #dc143c);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 2px 0px rgba(139, 0, 0, 0.8)) drop-shadow(-2px -2px 0px rgba(0, 0, 0, 0.8));
    animation: gradient-flow 3.5s linear infinite, glitch-terror 0.5s infinite;
}

/* 22. Thunder Strike */
.badge-thunder-strike {
    background: #fff;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px #0ff) drop-shadow(0 0 20px #00f);
    animation: thunder-flash 4s infinite;
}

/* 23. Divine Light */
.badge-divine-light {
    background: linear-gradient(90deg, #ffffe0, #ffffff, #ffffe0);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 3.5s linear infinite;
    filter: drop-shadow(0 0 20px rgba(255, 255, 224, 1)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.5));
}

/* 24. Obsidian Blade */
.badge-obsidian-blade {
    background: linear-gradient(90deg, #1a1a1a 0%, #333 45%, #ff0000 50%, #333 55%, #1a1a1a 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}

/* 25. Quantum Realm */
.badge-quantum-realm {
    background: linear-gradient(90deg, #0ff, #f0f, #ff0, #0ff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 2s linear infinite;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.8)) drop-shadow(0 0 20px rgba(255, 0, 255, 0.8));
}

/* =========================================================================
   KEYFRAMES
   ========================================================================= */

@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes vertical-flow {
    0% { background-position: 50% 0%; }
    100% { background-position: 50% 200%; }
}

@keyframes cyber-glitch {
    0%, 96%, 100% { transform: skew(0deg) translateZ(0); }
    97% { transform: skew(-10deg) translateZ(0); opacity: 0.8; }
    98% { transform: skew(10deg) translateZ(0); opacity: 1; }
    99% { transform: skew(-5deg) translateZ(0); opacity: 0.9; }
}

@keyframes void-pulse {
    0% { opacity: 0.85; transform: scale(0.98) translateZ(0); }
    100% { opacity: 1; transform: scale(1.03) translateZ(0); }
}

@keyframes blood-pulse {
    from { opacity: 0.85; transform: scale(1) translateZ(0); }
    to { opacity: 1; transform: scale(1.02) translateZ(0); }
}

@keyframes venom-drip {
    from { opacity: 0.85; transform: translateY(0) translateZ(0); }
    to { opacity: 1; transform: translateY(2px) translateZ(0); }
}

@keyframes hellfire-pulse {
    from { opacity: 0.85; transform: scale(1) translateZ(0); }
    to { opacity: 1; transform: scale(1.05) translateZ(0); }
}

@keyframes nova-pulse {
    0% { opacity: 0.85; transform: scale(1) translateZ(0); }
    50% { opacity: 1; transform: scale(1.1) translateZ(0); }
    100% { opacity: 0.85; transform: scale(1) translateZ(0); }
}

@keyframes glitch-terror {
    0% { transform: translate(0, 0) translateZ(0); opacity: 1; }
    20% { transform: translate(-2px, 1px) translateZ(0); opacity: 0.8; }
    40% { transform: translate(2px, -1px) translateZ(0); opacity: 1; }
    60% { transform: translate(-1px, 2px) translateZ(0); opacity: 0.8; }
    80% { transform: translate(1px, -2px) translateZ(0); opacity: 1; }
    100% { transform: translate(0, 0) translateZ(0); opacity: 1; }
}

@keyframes thunder-flash {
    0%, 90%, 94%, 98% { opacity: 0.9; transform: scale(1) translateZ(0); }
    92%, 96% { opacity: 1; transform: scale(1.05) translateZ(0); color: #0ff; }
}

/* =========================================
   NAME ANIMATIONS (TEXT COSMETICS)
   ========================================= */

[class^="name-anim-"] {
    display: inline-block;
    font-weight: 900;
    transform: translateZ(0); /* GPU acceleration */
    will-change: transform, text-shadow, background-position;
}

/* 1. Cyber Glitch */
.name-anim-cyber-glitch {
    background: linear-gradient(90deg, #00f0ff, #ff00f0, #00f0ff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 3s linear infinite, cyber-glitch 4s infinite;
    text-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}

/* 2. Liquid Gold */
.name-anim-liquid-gold {
    background: linear-gradient(90deg, #ffd700 0%, #ffdf00 30%, #ffffff 50%, #ffdf00 70%, #ffd700 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 3s linear infinite;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* 3. Neon Pulse */
.name-anim-neon-pulse {
    color: #fff;
    -webkit-text-fill-color: #fff;
    animation: neon-pulse-fresh 2s infinite alternate;
}
@keyframes neon-pulse-fresh {
    from { text-shadow: 0 0 4px #fff, 0 0 8px #0ff, 0 0 15px #0ff; }
    to { text-shadow: 0 0 2px #fff, 0 0 4px #0ff, 0 0 8px #0ff; }
}

/* 4. Plasma Flow */
.name-anim-plasma-flow {
    background: linear-gradient(90deg, #8a2be2, #00ffff, #8a2be2);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 4s ease-in-out infinite;
    text-shadow: 0 0 12px rgba(138, 43, 226, 0.35);
}

/* 5. Holographic Glare */
.name-anim-holographic-glare {
    background: linear-gradient(110deg, #e0ffff 0%, #00ffff 20%, #ffffff 50%, #00ffff 80%, #e0ffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 2.5s linear infinite;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

/* 6. Void Walker */
.name-anim-void-walker {
    background: linear-gradient(90deg, #4b0082 0%, #8a2be2 30%, #ff00ff 50%, #8a2be2 70%, #4b0082 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 5s ease infinite;
    text-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
}


/* =========================================================================
   SMART DEVICE PERFORMANCE RENDERING & OPTIMIZATION
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}