/**
 * arena-ranking-animations.css
 * Estilos para animações do ranking em tempo real
 * - Destaque de mudança de posição
 * - Animação de subida/descida
 * - Efeitos visuais
 */

/* Elemento do ranking quando mudança de posição */
.ranking-item.position-changed {
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 24px rgba(255, 215, 0, 0.4) !important;
}

/* Elemento subiu de posição (melhora) */
.ranking-item.position-up {
    animation: positionUpAnimation 0.6s ease-out forwards;
}

@keyframes positionUpAnimation {
    0% {
        transform: translateY(20px) scale(1);
        opacity: 0.7;
        background-color: rgba(76, 175, 80, 0.1);
    }
    50% {
        background-color: rgba(76, 175, 80, 0.3);
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
        background-color: rgba(76, 175, 80, 0.15);
    }
}

/* Elemento desceu de posição (piora) */
.ranking-item.position-down {
    animation: positionDownAnimation 0.6s ease-out forwards;
}

@keyframes positionDownAnimation {
    0% {
        transform: translateY(-20px) scale(1);
        opacity: 0.7;
        background-color: rgba(244, 67, 54, 0.1);
    }
    50% {
        background-color: rgba(244, 67, 54, 0.3);
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
        background-color: rgba(244, 67, 54, 0.15);
    }
}

/* Número de posição com destaque */
.ranking-item .position-badge {
    transition: all 0.3s ease;
}

.ranking-item.position-up .position-badge {
    animation: badgeUpAnimation 0.6s ease-out forwards;
}

@keyframes badgeUpAnimation {
    0% {
        transform: scale(1.2) rotate(10deg);
        color: #4caf50;
    }
    100% {
        transform: scale(1) rotate(0deg);
        color: inherit;
    }
}

.ranking-item.position-down .position-badge {
    animation: badgeDownAnimation 0.6s ease-out forwards;
}

@keyframes badgeDownAnimation {
    0% {
        transform: scale(1.2) rotate(-10deg);
        color: #f44336;
    }
    100% {
        transform: scale(1) rotate(0deg);
        color: inherit;
    }
}

/* Pontuação piscando quando atualiza */
.ranking-item .score-value.score-updated {
    animation: scoreFlash 0.5s ease-out;
}

@keyframes scoreFlash {
    0% {
        background-color: rgba(255, 215, 0, 0.8);
        color: #000;
        transform: scale(1.1);
    }
    100% {
        background-color: transparent;
        color: inherit;
        transform: scale(1);
    }
}

/* Tempo excedido - blink */
#timeRemainingContainer.time-exceeded #timeRemaining {
    animation: timeExceededBlink 0.5s ease-in-out infinite;
    color: #ff6b6b;
    font-weight: bold;
}

@keyframes timeExceededBlink {
    0%, 100% {
        opacity: 1;
        color: #ff6b6b;
    }
    50% {
        opacity: 0.6;
        color: #ff3333;
    }
}

/* Badge de atualização */
.update-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #4caf50;
    border-radius: 50%;
    margin-left: 4px;
    animation: badgePulse 1.5s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

/* Ícone de seta para mudança de posição */
.position-change-icon {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.8rem;
    animation: arrowBounce 0.6s ease-out forwards;
}

.position-change-icon.up {
    color: #4caf50;
}

.position-change-icon.down {
    color: #f44336;
}

@keyframes arrowBounce {
    0% {
        transform: translateY(5px) scale(0.5);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Container de pontuação em tempo real */
.score-container {
    position: relative;
    transition: all 0.3s ease;
}

.score-container.updating {
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}

/* Elemento que está apresentando no ranking */
.ranking-item.presenting-now {
    border-left: 4px solid #2196f3;
    background-color: rgba(33, 150, 243, 0.05) !important;
}

.ranking-item.presenting-now::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, transparent, #2196f3, transparent);
    animation: presentingGlow 1.5s ease-in-out infinite;
}

@keyframes presentingGlow {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

/* Responsividade para mobile */
@media (max-width: 768px) {
    .ranking-item.position-changed {
        box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3) !important;
    }

    .ranking-item.position-up,
    .ranking-item.position-down {
        animation-duration: 0.4s;
    }

    #timeRemainingContainer.time-exceeded #timeRemaining {
        animation: timeExceededBlinkMobile 0.4s ease-in-out infinite;
    }

    @keyframes timeExceededBlinkMobile {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
    }
}

/* Transição suave para elementos do ranking */
.ranking-item {
    transition: all 0.3s ease;
}

.ranking-item:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Destaque para meu voto nos botões */
.btn-votacao-footer.active {
    transform: scale(1.05);
    box-shadow: 0 0 12px currentColor;
    animation: voteHighlight 0.3s ease-out;
}

@keyframes voteHighlight {
    0% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1.05);
    }
}

/* Confirmação de voto registrado */
.voto-confirmado {
    display: inline-block;
    padding: 8px 16px;
    background-color: #4caf50;
    color: white;
    border-radius: 20px;
    font-size: 0.85rem;
    animation: votoConfirmed 0.5s ease-out forwards;
    margin-top: 8px;
}

@keyframes votoConfirmed {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}