/* 
 * UI Global Animations & Styling
 * Creates modern, smooth transition effects across the entire application.
 */

/* Fade-in nas páginas ao carregar */
@keyframes fadeInPage {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body {
    animation: fadeInPage 0.6s ease-out forwards;
}

/* Transições suaves e globais para botões */
button,
.btn,
.btn-log-alteracoes,
.hero-action,
.header-quick-link,
a[class*="btn"],
.login-button,
.botao-form,
input[type="submit"] {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

button:hover,
.btn:hover,
.btn-log-alteracoes:hover,
.hero-action:hover,
.header-quick-link:hover,
a[class*="btn"]:hover,
.login-button:hover,
.botao-form:hover,
input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

button:active,
.btn:active,
.btn-log-alteracoes:active,
.hero-action:active,
.header-quick-link:active,
a[class*="btn"]:active,
.login-button:active,
.botao-form:active,
input[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Hover suave em listagens, cards e boxes */
.card-config,
.gallery-items,
.formatacao-imagem,
.section-form,
.info-form,
.info-container,
.livro-form {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.card-config:hover,
.gallery-items:hover,
.formatacao-imagem:hover,
.section-form:hover,
.info-form:hover,
.livro-form:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Efeito de hover em Links em geral */
a {
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

/* Animação extra suave para imagens de capa / galerias */
.gallery-items img,
.livro-form img,
.hero-media img {
    transition: transform 0.4s ease;
}

.gallery-items:hover img,
.livro-form:hover img {
    transform: scale(1.03);
}

/* Inputs form focus global */
input, select, textarea {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus, select:focus, textarea:focus {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-color: #aaa;
}

/* Imagens dos cards da Home — proporcionais ao card */
.app-card-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: contain;
    border-radius: 14px;
    margin: 0 auto;
    display: block;
}