/* Cosmetic Effects CSS */

/* Border Cosmetics
   Note: !important is intentional here -- cosmetic effects are user-purchased
   overrides that must always display regardless of base card styles. */
.cosmetic-border-border_gold_01 {
    border: 3px solid gold !important;
    box-shadow: 0 0 10px gold !important;
}

.cosmetic-border-border_elemental_fire {
    border: 3px solid #ff4500 !important;
    box-shadow: 0 0 10px #ff4500 !important;
    animation: fire-border 3s infinite alternate !important;
}

.cosmetic-border-border_elemental_water {
    border: 3px solid #1e90ff !important;
    box-shadow: 0 0 10px #1e90ff !important;
    animation: water-border 3s infinite alternate !important;
}

.cosmetic-border-border_premium {
    border: 3px solid #9932cc !important;
    box-shadow: 0 0 15px #9932cc !important;
    animation: premium-border 4s infinite alternate !important;
}

/* Diamond Border - This matches the cosmetic ID 'cosmetic2' in cosmeticsScreenHandler.js */
.cosmetic-border-cosmetic2 {
    border: 3px solid #b9f2ff !important;
    box-shadow: 0 0 15px #b9f2ff, inset 0 0 10px rgba(185, 242, 255, 0.5) !important;
    animation: diamond-border 4s infinite alternate !important;
}

/* Golden Border - This matches the cosmetic ID 'cosmetic1' in cosmeticsScreenHandler.js */
.cosmetic-border-cosmetic1 {
    border: 3px solid gold !important;
    box-shadow: 0 0 10px gold, inset 0 0 5px rgba(255, 215, 0, 0.5) !important;
}

/* Foil Effects */
.cosmetic-foil-foil_standard .foil-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    animation: standard-foil 3s infinite linear;
    z-index: 10;
}

.cosmetic-foil-foil_holographic .foil-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(255, 0, 0, 0.2) 0%,
            rgba(0, 255, 0, 0.2) 25%,
            rgba(0, 0, 255, 0.2) 50%,
            rgba(255, 255, 0, 0.2) 75%,
            rgba(255, 0, 255, 0.2) 100%);
    pointer-events: none;
    animation: holographic-foil 5s infinite linear;
    z-index: 10;
}

.cosmetic-foil-foil_elemental_fire .foil-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(255, 69, 0, 0.2) 0%,
            rgba(255, 140, 0, 0.2) 50%,
            rgba(255, 69, 0, 0.2) 100%);
    pointer-events: none;
    animation: fire-foil 3s infinite alternate;
    z-index: 10;
}

.cosmetic-foil-foil_elemental_water .foil-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(30, 144, 255, 0.2) 0%,
            rgba(0, 191, 255, 0.2) 50%,
            rgba(30, 144, 255, 0.2) 100%);
    pointer-events: none;
    animation: water-foil 3s infinite alternate;
    z-index: 10;
}

.cosmetic-foil-foil_rare_card .foil-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(255, 215, 0, 0.3) 0%,
            rgba(218, 165, 32, 0.3) 50%,
            rgba(255, 215, 0, 0.3) 100%);
    pointer-events: none;
    animation: rare-foil 4s infinite alternate;
    z-index: 10;
}

/* Holographic Sheen - This matches cosmetic ID 'cosmetic4' in cosmeticsScreenHandler.js */
.cosmetic-foil-cosmetic4 .foil-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(255, 0, 0, 0.2) 0%,
            rgba(0, 255, 0, 0.2) 25%,
            rgba(0, 0, 255, 0.2) 50%,
            rgba(255, 255, 0, 0.2) 75%,
            rgba(255, 0, 255, 0.2) 100%);
    pointer-events: none;
    animation: holographic-foil 5s infinite linear;
    z-index: 10;
}

/* Animated Sparkle - This matches cosmetic ID 'cosmetic3' in cosmeticsScreenHandler.js */
.cosmetic-foil-cosmetic3 .foil-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    animation: sparkle-foil 2s infinite linear;
    z-index: 10;
}

/* Animations */
@keyframes standard-foil {
    0% {
        background-position: -200% -200%;
    }

    100% {
        background-position: 300% 300%;
    }
}

@keyframes holographic-foil {
    0% {
        background-position: 0% 0%;
        opacity: 0.5;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        background-position: 200% 200%;
        opacity: 0.5;
    }
}

@keyframes fire-border {
    0% {
        box-shadow: 0 0 10px #ff4500, 0 0 20px #ff4500;
    }

    100% {
        box-shadow: 0 0 15px #ff4500, 0 0 30px #ff4500;
    }
}

@keyframes water-border {
    0% {
        box-shadow: 0 0 10px #1e90ff, 0 0 20px #1e90ff;
    }

    100% {
        box-shadow: 0 0 15px #1e90ff, 0 0 30px #1e90ff;
    }
}

@keyframes premium-border {
    0% {
        box-shadow: 0 0 10px #9932cc, 0 0 20px #9932cc;
        border-color: #9932cc;
    }

    50% {
        box-shadow: 0 0 15px #ff00ff, 0 0 30px #ff00ff;
        border-color: #ff00ff;
    }

    100% {
        box-shadow: 0 0 10px #9932cc, 0 0 20px #9932cc;
        border-color: #9932cc;
    }
}

@keyframes diamond-border {
    0% {
        box-shadow: 0 0 10px #b9f2ff, 0 0 20px #b9f2ff, inset 0 0 10px rgba(185, 242, 255, 0.5);
        border-color: #b9f2ff;
    }

    50% {
        box-shadow: 0 0 20px #b9f2ff, 0 0 30px #b9f2ff, inset 0 0 15px rgba(185, 242, 255, 0.7);
        border-color: #d1f8ff;
    }

    100% {
        box-shadow: 0 0 10px #b9f2ff, 0 0 20px #b9f2ff, inset 0 0 10px rgba(185, 242, 255, 0.5);
        border-color: #b9f2ff;
    }
}

@keyframes sparkle-foil {
    0% {
        background-position: -200% -200%;
        opacity: 0.3;
    }

    50% {
        opacity: 0.9;
    }

    100% {
        background-position: 300% 300%;
        opacity: 0.3;
    }
}

@keyframes fire-foil {
    0% {
        background-position: 0% 0%;
        opacity: 0.4;
    }

    100% {
        background-position: 100% 100%;
        opacity: 0.7;
    }
}

@keyframes water-foil {
    0% {
        background-position: 0% 0%;
        opacity: 0.4;
    }

    100% {
        background-position: 100% 100%;
        opacity: 0.7;
    }
}

@keyframes rare-foil {
    0% {
        background-position: 0% 0%;
        opacity: 0.5;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        background-position: 100% 100%;
        opacity: 0.5;
    }
}