/*
 * Versalles RP - Folha de Animações
 * * Contém @keyframes e classes de utilidade para movimento e feedback.
 * * Inspirado no "Breathing Effect"
 * e na UI dinâmica de "Persona".
 */

/* ---------------------------------- */
/* 1. @KEYFRAMES (Definições)
/* ---------------------------------- */

/**
 * Animação "Breathing Effect" (Arte de Personagem Animada)
 * * Conforme especificado no Documento Mestre.
 * * Cria um movimento de respiração lento e sutil.
 */
@keyframes breathe {
    0% { transform: scale(1); }
    50% { transform: scale(1.005); } /* Expansão sutil */
    100% { transform: scale(1); }
}

/**
 * Animação "Explosão" (Estilo Persona)
 * * Usado para Modais (ex: Pop-up de Rolagem de Dado).
 * * Faz o elemento "explodir" na tela.
 */
@keyframes modal-explode {
    from {
        opacity: 0;
        transform: scale(0.8) rotate(-5deg); /* Começa pequeno e torto */
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg); /* Termina em 100% */
    }
}

/**
 * Animação "Flash" (Feedback de UI)
 * * Usado para feedback instantâneo (ex: gastar recurso).
 * * Pisca uma cor (vermelho) rapidamente.
 */
@keyframes flash-red {
    0% {
        background-color: var(--cor-fundo-secundario); /* Usa a variável definida em style.css */
    }
    50% {
        background-color: var(--cor-primaria-vermelho); /* Usa a variável definida em style.css */
        color: var(--cor-texto-principal); /* Garante que o texto fique visível */
    }
    100% {
        background-color: var(--cor-fundo-secundario); /* Usa a variável definida em style.css */
    }
}

/**
 * Animação "Fade In" (Carregamento de Página)
 * * Usado para elementos de página (cards, etc.) aparecerem suavemente.
 */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------- */
/* 2. CLASSES DE ANIMAÇÃO (Utilidades)
/* ---------------------------------- */

/**
 * Classe para a Arte do Personagem na Ficha
 * * Aplica a animação 'breathe'.
 */
.character-art-animated {
    /* (O elemento com a arte do personagem deve ter esta classe) */
    animation: breathe 8s ease-in-out infinite;
}

/**
 * Classe para Modal (Pop-up de Rolagem)
 * * O JS deve adicionar a classe 'is-visible' para ativar a animação.
 */
.roll-modal {
    display: none; /* Escondido por padrão */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--cor-fundo-secundario); /* Usa a variável definida em style.css */
    border: 2px solid var(--cor-primaria-vermelho); /* Usa a variável definida em style.css */
    border-radius: var(--border-radius); /* Usa a variável definida em style.css */
    padding: 30px;
    z-index: 2000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    /* Adicione max-width e width se necessário */
    /* width: 90%; */
    /* max-width: 400px; */
}

.roll-modal.is-visible {
    display: block;
    animation: modal-explode 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/**
 * Classe para Feedback de Recurso
 * * O JS deve adicionar esta classe ao medidor de recurso (ex: Mana)
 * quando ele for gasto.
 */
.resource-flash-feedback {
    animation: flash-red 0.5s ease-out;
}

/**
 * Classe para Fade-In (ex: Cards do Dashboard)
 * * Pode ser adicionado aos elementos filhos de .card-grid
 */
.animate-fade-in {
    animation: fade-in 0.5s ease-out forwards;
    opacity: 0; /* Começa invisível */
}

/*
 * Animações angulares (Estilo Persona)
 * Adiciona um 'skew' (inclinação) sutil em hovers de botões/links.
 */
.nav-menu-link:hover .nav-menu-label,
.login-button:hover {
    transform: skew(-10deg); /* Inclina o texto/botão */
    transition: transform 0.1s ease-in-out; /* Transição rápida para o skew */
}

/* Garante a transição de volta ao normal */
.nav-menu-link .nav-menu-label,
.login-button {
    display: inline-block; /* Necessário para o transform funcionar corretamente */
    transition: transform 0.2s ease-out; /* Transição mais suave de volta */
}