/* ARQUIVO: css/itens_loja.css */

/* MOLDURAS */
.frame-padrao { border: 3px solid #52525b; }
.frame-rubi { border: 3px solid #ef4444; box-shadow: 0 0 10px #ef4444; animation: pulse-red 3s infinite; }
.frame-ouro { border: 3px solid #fbbf24; box-shadow: 0 0 15px #fbbf24; animation: pulse-gold 2s infinite; }
.frame-cyber { border: 3px dashed #06b6d4; box-shadow: 0 0 10px #06b6d4; animation: spin-cyber 10s linear infinite; }
.frame-void { border: 3px double #d8b4fe; outline: 1px solid #7c3aed; box-shadow: 0 0 15px #7c3aed; animation: pulse-purple 4s infinite alternate; }
.frame-esmeralda { border: 3px solid #10b981; box-shadow: 0 0 10px #10b981; }
.frame-angel { border: 3px solid white; box-shadow: 0 0 15px rgba(255,255,255,0.8); }

/* FUNDOS */
.bg-discord { background-color: #5865F2; }
.bg-nebula { background: linear-gradient(135deg, #2e1065 0%, #7c3aed 100%); }
.bg-sunset { background: linear-gradient(to top, #4c1d95, #db2777, #f59e0b); }
.bg-matrix { background-color: #000; background-image: linear-gradient(0deg, transparent 24%, rgba(34, 197, 94, .3) 25%, rgba(34, 197, 94, .3) 26%, transparent 27%, transparent 74%, rgba(34, 197, 94, .3) 75%, rgba(34, 197, 94, .3) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(34, 197, 94, .3) 25%, rgba(34, 197, 94, .3) 26%, transparent 27%, transparent 74%, rgba(34, 197, 94, .3) 75%, rgba(34, 197, 94, .3) 76%, transparent 77%, transparent); background-size: 30px 30px; }
.bg-fire { background: linear-gradient(to bottom, #7f1d1d, #b91c1c, #f97316); }
.bg-ocean { background: linear-gradient(180deg, #0f172a 0%, #0ea5e9 100%); }
.bg-gold { background: radial-gradient(circle at center, #facc15 0%, #a16207 100%); }
.bg-dark-light { background: radial-gradient(circle at top, #4b5563 0%, #000000 80%); }

/* ANIMAÇÕES */
@keyframes pulse-red { 50% { border-color: #ef4444; box-shadow: 0 0 20px #dc2626; } }
@keyframes pulse-gold { 0%, 100% { box-shadow: 0 0 10px #fbbf24; } 50% { box-shadow: 0 0 25px #f59e0b; } }
@keyframes spin-cyber { to { transform: rotate(360deg); } }
@keyframes pulse-purple { from { box-shadow: 0 0 15px #7c3aed; } to { box-shadow: 0 0 30px #a78bfa; } }

/* =========================================
   MOLDURAS LENDÁRIAS (TOP TIER)
   ========================================= */

/* 1. GLÓRIA ETERNA (Dourada e Brilhante - A mais top) */
.frame-lenda-gold {
    border: 3px solid #ffffff;
    /* Camadas de brilho interno e externo */
    box-shadow: 
        0 0 10px #fbbf24, 
        0 0 30px #d97706, 
        inset 0 0 20px #fbbf24;
    animation: pulso-divino 2s infinite alternate;
}

@keyframes pulso-divino {
    0% { 
        box-shadow: 0 0 10px #fbbf24, 0 0 20px #d97706, inset 0 0 10px #fbbf24; 
        border-color: #fff;
    }
    100% { 
        box-shadow: 0 0 30px #fbbf24, 0 0 60px #b45309, inset 0 0 30px #f59e0b; 
        border-color: #fcd34d;
        transform: scale(1.02); /* Leve "respiração" */
    }
}

/* 2. RGB GAMER (Troca de cor frenética) */
.frame-lenda-rgb {
    border: 3px solid #ff0000;
    box-shadow: 0 0 15px #ff0000, inset 0 0 10px #ff0000;
    animation: rgb-gamer 3s linear infinite;
}

@keyframes rgb-gamer {
    0% { border-color: #ff0000; box-shadow: 0 0 15px #ff0000, inset 0 0 10px #ff0000; }
    20% { border-color: #ffff00; box-shadow: 0 0 15px #ffff00, inset 0 0 10px #ffff00; }
    40% { border-color: #00ff00; box-shadow: 0 0 15px #00ff00, inset 0 0 10px #00ff00; }
    60% { border-color: #00ffff; box-shadow: 0 0 15px #00ffff, inset 0 0 10px #00ffff; }
    80% { border-color: #0000ff; box-shadow: 0 0 15px #0000ff, inset 0 0 10px #0000ff; }
    100% { border-color: #ff00ff; box-shadow: 0 0 15px #ff00ff, inset 0 0 10px #ff00ff; }
}

/* 3. VORTEX NEGRO (Para quem gosta de estilo dark/vilão) */
.frame-lenda-dark {
    border: 3px dashed #a855f7;
    box-shadow: 0 0 20px #581c87;
    animation: giro-vortex 10s linear infinite;
}

@keyframes giro-vortex {
    0% { border-color: #a855f7; box-shadow: 0 0 20px #581c87; transform: rotate(0deg); }
    50% { border-color: #d8b4fe; box-shadow: 0 0 40px #7e22ce; }
    100% { border-color: #a855f7; box-shadow: 0 0 20px #581c87; transform: rotate(360deg); }
}

/* --- ESTILO DAS CARTAS TIPO TCG --- */
.card-wrapper {
    position: relative;
    aspect-ratio: 2/3; /* Formato retrato de carta padrão */
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #1a1a1a;
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
}

.card-wrapper:hover {
    transform: translateY(-5px) scale(1.02);
    z-index: 10;
}

/* A Imagem de Fundo (A arte do card) */
.card-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay de Informações (Nome na base) */
.card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px 4px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    text-align: center;
}

/* --- RARIDADES (Bordas e Brilhos) --- */

/* COMUM */
.border-Comum { border: 2px solid #52525b; }

/* RARO (Azul Neon) */
.border-Raro { 
    border: 2px solid #3b82f6; 
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}

/* ÉPICO (Roxo Neon) */
.border-Épico { 
    border: 2px solid #a855f7; 
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
}

/* LENDÁRIO (Ouro Holográfico Animado) */
.border-Lendário {
    border: 2px solid #eab308;
    box-shadow: 0 0 20px rgba(234, 179, 8, 0.6);
    animation: pulsar-lenda 2s infinite alternate;
}

/* Efeito HOLO (Passa uma luz na carta lendária) */
.holo-effect::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.1), 
        rgba(255, 255, 255, 0.4), 
        rgba(255, 255, 255, 0.1), 
        transparent
    );
    transform: skewX(-20deg);
    animation: holo-sweep 3s infinite linear;
    pointer-events: none;
}

@keyframes pulsar-lenda {
    from { box-shadow: 0 0 10px #ca8a04; }
    to { box-shadow: 0 0 25px #facc15; }
}

@keyframes holo-sweep {
    0% { left: -150%; }
    100% { left: 150%; }
}