/**
 * GitWay - Sistema de Animações Sofisticadas
 * 
 * Design System de animações elegantes e performáticas
 * Foco em micro-interações e feedback visual sutil
 * 
 * @author Artur da Silva Júnior
 * @version 1.0.0
 */

/* ========================================
   VARIÁVEIS GLOBAIS DE ANIMAÇÃO
   ======================================== */
:root {
    /* Duração das animações */
    --anim-duration-instant: 0.15s;
    --anim-duration-fast: 0.25s;
    --anim-duration-normal: 0.35s;
    --anim-duration-slow: 0.5s;
    
    /* Easing functions sofisticadas */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Valores de transformação */
    --lift-distance: -4px;
    --lift-distance-subtle: -2px;
    --scale-hover: 1.02;
    --scale-active: 0.98;
}

/* ========================================
   ANIMAÇÕES DE ENTRADA (Page Load)
   ======================================== */

/* Fade In + Slide Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp var(--anim-duration-normal) var(--ease-out-expo) forwards;
}

/* Fade In + Scale */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.fade-in-scale {
    animation: fadeInScale var(--anim-duration-normal) var(--ease-out-expo) forwards;
}

/* Slide In from Right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-right {
    animation: slideInRight var(--anim-duration-normal) var(--ease-out-expo) forwards;
}

/* Slide In from Left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-left {
    animation: slideInLeft var(--anim-duration-normal) var(--ease-out-expo) forwards;
}

/* Stagger delay para múltiplos elementos */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.3s; }

/* Fade In from Down (utilidade Tailwind-like) */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-down {
    animation: fadeInDown var(--anim-duration-normal) var(--ease-out-expo) forwards;
    opacity: 0;
}

/* Fade In from Left (para layout 2 colunas) */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-left {
    animation: fadeInLeft var(--anim-duration-slow) var(--ease-out-expo) forwards;
    opacity: 0;
}

/* Fade In from Right (para layout 2 colunas) */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-right {
    animation: fadeInRight var(--anim-duration-slow) var(--ease-out-expo) forwards;
    opacity: 0;
}

/* Fade In + Up (utilidade Tailwind-like) */
.animate-fade-in-up {
    animation: fadeInUp var(--anim-duration-normal) var(--ease-out-expo) forwards;
    opacity: 0;
}

/* ========================================
   MICRO-INTERAÇÕES - BOTÕES
   ======================================== */

/* Efeito lift em botões */
.btn {
    position: relative;
    transition: all var(--anim-duration-fast) var(--ease-smooth);
    transform: translateY(0);
}

.btn:hover:not(:disabled):not(.disabled) {
    transform: translateY(var(--lift-distance-subtle));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn:active:not(:disabled):not(.disabled) {
    transform: translateY(0) scale(var(--scale-active));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Ripple effect em botões */
.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: translate(-50%, -50%);
    transition: width var(--anim-duration-fast) ease, 
                height var(--anim-duration-fast) ease;
}

.btn:active::before {
    width: 120%;
    height: 120%;
    opacity: 0;
}

/* Botão com loading state */
.btn-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    color: inherit;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   CARDS E CONTAINERS
   ======================================== */

/* Card hover effect sofisticado */
.card,
.issue-card,
.alert {
    transition: all var(--anim-duration-fast) var(--ease-smooth);
}

.card:hover,
.issue-card:hover {
    transform: translateY(var(--lift-distance-subtle));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Card com borda animada */
.card-highlight {
    position: relative;
    overflow: hidden;
}

.card-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--bs-primary), transparent);
    transition: left var(--anim-duration-slow) var(--ease-smooth);
}

.card-highlight:hover::before {
    left: 100%;
}

/* ========================================
   INPUTS E FORMS
   ======================================== */

/* Focus state sofisticado */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    transition: all var(--anim-duration-fast) var(--ease-smooth);
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    transform: scale(1.01);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15),
                0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Label float animation */
.form-floating label {
    transition: all var(--anim-duration-fast) var(--ease-smooth);
}

/* ========================================
   BADGES E LABELS
   ======================================== */

/* Badge hover effect */
.badge {
    transition: all var(--anim-duration-fast) var(--ease-smooth);
}

.badge:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Badge pulse para novos itens */
@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(var(--bs-primary-rgb), 0);
    }
}

.badge-pulse {
    animation: badgePulse 2s ease-in-out 3;
    animation-fill-mode: forwards;
}

/* ========================================
   TOOLTIPS E POPOVERS
   ======================================== */

/* Tooltip entrada suave */
.tooltip {
    animation: fadeInScale var(--anim-duration-fast) var(--ease-out-expo);
}

.tooltip.show {
    opacity: 1;
}

/* ========================================
   DROPDOWNS E MODALS
   ======================================== */

/* Dropdown entrada com slide */
.dropdown-menu {
    animation: fadeInUp var(--anim-duration-fast) var(--ease-out-expo);
}

.dropdown-menu.show {
    display: block;
}

/* Dropdown item hover */
.dropdown-item {
    transition: all var(--anim-duration-instant) var(--ease-smooth);
    position: relative;
}

.dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: var(--bs-primary);
    transform: scaleY(0);
    transition: transform var(--anim-duration-fast) var(--ease-out-expo);
}

.dropdown-item:hover::before {
    transform: scaleY(1);
}

/* Modal backdrop fade */
.modal-backdrop {
    animation: fadeIn var(--anim-duration-normal) ease;
}

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

/* Modal content slide */
.modal.fade .modal-dialog {
    transform: translateY(-30px) scale(0.95);
    transition: transform var(--anim-duration-normal) var(--ease-out-expo),
                opacity var(--anim-duration-normal) ease;
}

.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}

/* ========================================
   ALERTS E NOTIFICAÇÕES
   ======================================== */

/* Alert entrada com bounce sutil */
.alert {
    animation: slideInRight var(--anim-duration-normal) var(--ease-out-expo);
}

.alert-dismissible .btn-close {
    transition: all var(--anim-duration-fast) var(--ease-smooth);
}

.alert-dismissible .btn-close:hover {
    transform: rotate(90deg) scale(1.1);
}

/* Toast animation */
@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast {
    animation: toastSlideIn var(--anim-duration-normal) var(--ease-out-expo);
}

/* ========================================
   LOADING STATES
   ======================================== */

/* Skeleton loading melhorado */
@keyframes skeletonShimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 0px,
        #f8f8f8 40px,
        #f0f0f0 80px
    );
    background-size: 200px 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* Pulse loading */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Spinner suave */
.spinner-grow {
    animation: spinnerGrow 0.75s linear infinite;
}

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

/* ========================================
   TABELAS E LISTAS
   ======================================== */

/* Table row hover */
.table tbody tr {
    transition: all var(--anim-duration-instant) var(--ease-smooth);
}

.table tbody tr:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
    transform: scale(1.01);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* List item entrance */
.list-group-item {
    transition: all var(--anim-duration-fast) var(--ease-smooth);
}

.list-group-item:hover {
    transform: translateX(4px);
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

/* ========================================
   PROGRESS E STATUS
   ======================================== */

/* Progress bar animation */
.progress-bar {
    transition: width var(--anim-duration-slow) var(--ease-smooth);
}

/* Status indicator pulse */
@keyframes statusPulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 currentColor;
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 0 4px transparent;
    }
}

.status-indicator {
    animation: statusPulse 2s ease-in-out infinite;
}

/* ========================================
   PAGINAÇÃO
   ======================================== */

/* Page item hover */
.page-item .page-link {
    transition: all var(--anim-duration-fast) var(--ease-smooth);
}

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

.page-item.active .page-link {
    transform: scale(1.1);
}

/* ========================================
   NAVBAR E SIDEBAR
   ======================================== */

/* Navbar item hover */
.navbar-menu-desktop a,
.sidebar-menu li a {
    position: relative;
    transition: all var(--anim-duration-fast) var(--ease-smooth);
}

.navbar-menu-desktop a::after,
.sidebar-menu li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--bs-primary);
    transition: all var(--anim-duration-fast) var(--ease-smooth);
    transform: translateX(-50%);
}

.navbar-menu-desktop a:hover::after {
    width: 80%;
}

.sidebar-menu li a::after {
    bottom: auto;
    top: 50%;
    left: 0;
    height: 100%;
    width: 3px;
    transform: translateY(-50%) scaleY(0);
}

.sidebar-menu li a:hover::after {
    transform: translateY(-50%) scaleY(1);
}

/* ========================================
   ICONES
   ======================================== */

/* Icon bounce on hover */
.icon-hover {
    transition: transform var(--anim-duration-fast) var(--ease-bounce);
}

.icon-hover:hover {
    transform: scale(1.2) rotate(5deg);
}

/* Icon spin */
.icon-spin {
    animation: spin 1s linear infinite;
}

/* Icon pulse */
.icon-pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* ========================================
   UTILITÁRIOS DE ANIMAÇÃO
   ======================================== */

/* Smooth all transitions */
.smooth-all {
    transition: all var(--anim-duration-normal) var(--ease-smooth);
}

/* Disable animations (accessibility) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   EFEITOS ESPECIAIS
   ======================================== */

/* Glow effect */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(var(--bs-primary-rgb), 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.8);
    }
}

.glow {
    animation: glow 2s ease-in-out infinite;
}

/* Shake animation (para erros) */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

/* Success checkmark animation */
@keyframes checkmark {
    0% {
        stroke-dashoffset: 100;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.checkmark {
    stroke-dasharray: 100;
    animation: checkmark 0.6s var(--ease-out-expo) forwards;
}

/* Tada animation (para sucesso) - versão sutil */
@keyframes tada {
    from {
        transform: scale3d(1, 1, 1);
    }
    10%, 20% {
        transform: scale3d(0.98, 0.98, 0.98) rotate3d(0, 0, 1, -1deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale3d(1.02, 1.02, 1.02) rotate3d(0, 0, 1, 1.5deg);
    }
    40%, 60%, 80% {
        transform: scale3d(1.02, 1.02, 1.02) rotate3d(0, 0, 1, -1.5deg);
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}

.tada {
    animation: tada 0.8s ease-in-out;
}

/* ========================================
   PERFORMANCE HINTS
   ======================================== */

/* GPU Acceleration apenas para elementos marcados explicitamente */
.gpu-accelerated {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Smooth transitions para elementos interativos */
.btn,
.card,
.issue-card,
.dropdown-item,
.page-link,
.form-control,
.badge,
.alert {
    backface-visibility: hidden;
    perspective: 1000px;
}