/* animations.css */

/* --- Animações de Layout e Efeitos --- */
@keyframes rainbow-border-spin {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes rainbow-shadow-pulse {
    0% { box-shadow: 0 0 20px var(--cor-destaque-principal), 0 0 30px var(--cor-celestial), 0 0 40px var(--cor-abissal); }
    50% { box-shadow: 0 0 30px var(--cor-celestial), 0 0 40px var(--cor-abissal), 0 0 20px var(--cor-destaque-principal); }
    100% { box-shadow: 0 0 20px var(--cor-abissal), 0 0 30px var(--cor-destaque-principal), 0 0 40px var(--cor-celestial); }
}

@keyframes status-pulse {
    0% { transform: scale(1); box-shadow: 0 0 5px rgba(255, 0, 169, 0.5); }
    50% { transform: scale(1.05); box-shadow: 0 0 15px rgba(255, 0, 169, 0.8); }
    100% { transform: scale(1); box-shadow: 0 0 5px rgba(255, 0, 169, 0.5); }
}

@keyframes pulseFade {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Animações de Combate e Duelo --- */

@keyframes card-flip {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(180deg); }
}

@keyframes attack-animation {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -150%) scale(1.5); }
}

@keyframes damage-animation {
    0% { opacity: 1; transform: translate(-50%, -150%) scale(1.5); }
    100% { opacity: 0; transform: translate(-50%, -150%) scale(1.5); }
}

@keyframes regen-animation {
    0% { opacity: 0; transform: translate(-50%, 50%); }
    25% { opacity: 1; transform: translate(-50%, 0); }
    80% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -50%); }
}

@keyframes d12-bonus-animation {
    0% { opacity: 0; transform: translate(-50%, 50%) scale(0.8); }
    25% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
    80% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

/* --- Animações de Entrada Direcional --- */
@keyframes slideInFromTop {
    from { opacity: 0; transform: translateY(-100%); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInFromBottom {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Classes de Gatilho de Animação --- */
/* ATUALIZAÇÃO CRÍTICA: As classes agora miram no .card-container, como pretendido. */
.card-container.entering-celestial { animation: slideInFromTop 0.8s ease-out forwards; }
.card-container.entering-abissal { animation: slideInFromBottom 0.8s ease-out forwards; }

.status-effect.enraged { animation: status-pulse 1.5s infinite; }
.countdown-text { animation: pulseFade 1s forwards; }
.narration-text { animation: fadeInUp 1s 0.5s forwards; opacity: 0; }
.attack-indicator { animation: attack-animation 1.5s forwards; }
.damage-indicator { animation: damage-animation 1.5s forwards; }
.regeneration-indicator { animation: regen-animation 1.8s forwards; }
.d12-bonus-indicator { animation: d12-bonus-animation 2.2s forwards; }
.duel-results { animation: fadeIn 0.5s; }
.winner-card { animation: rainbow-shadow-pulse 3s infinite; }