/**
 * ============================================================================
 * POSTOS FLORENSE - ANIMAÇÕES E TRANSIÇÕES
 * ============================================================================
 * Arquivo: public/assets/css/animations.css
 * Descrição: Animações para SPA, modais, toasts e transições AJAX
 */

/* ====== FADE ====== */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ====== SLIDE ====== */
@keyframes slideInUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes slideInDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}
@keyframes slideOutDown {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}

/* ====== SCALE ====== */
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes scaleOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.92); }
}

/* ====== PULSE ====== */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.04); }
}
@keyframes pulseShadow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 51, 153, 0.4); }
    50%       { box-shadow: 0 0 0 8px rgba(0, 51, 153, 0); }
}

/* ====== SPIN ====== */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ====== BOUNCE ====== */
@keyframes bounceIn {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { opacity: 1; transform: scale(1.05); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* ====== SHAKE (ERRO) ====== */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}

/* ====== SKELETON LOADING ====== */
@keyframes shimmer {
    0%   { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}

/* ====== CLASSES UTILITÁRIAS ====== */
.animate-fade-in      { animation: fadeIn      var(--transition-normal, 250ms) ease forwards; }
.animate-fade-in-up   { animation: fadeInUp    var(--transition-normal, 250ms) ease forwards; }
.animate-fade-in-down { animation: fadeInDown  var(--transition-normal, 250ms) ease forwards; }
.animate-fade-in-left { animation: fadeInLeft  var(--transition-normal, 250ms) ease forwards; }
.animate-scale-in     { animation: scaleIn     var(--transition-normal, 250ms) ease forwards; }
.animate-bounce-in    { animation: bounceIn    400ms ease forwards; }
.animate-shake        { animation: shake       400ms ease; }
.animate-pulse        { animation: pulse       2s ease-in-out infinite; }
.animate-spin         { animation: spin        0.7s linear infinite; }

/* Delays em cascata */
.delay-1 { animation-delay: 50ms; }
.delay-2 { animation-delay: 100ms; }
.delay-3 { animation-delay: 150ms; }
.delay-4 { animation-delay: 200ms; }
.delay-5 { animation-delay: 250ms; }
.delay-6 { animation-delay: 300ms; }

/* ====== AJAX CONTENT TRANSITION ====== */
#main-content {
    transition: opacity var(--transition-normal, 250ms) ease;
}
#main-content.loading {
    opacity: 0.4;
    pointer-events: none;
}
#main-content.loaded {
    animation: fadeIn var(--transition-normal, 250ms) ease forwards;
}

/* ====== MODAL ANIMAÇÃO ====== */
.modal-overlay {
    animation: fadeIn 200ms ease forwards;
}
.modal-overlay.closing {
    animation: fadeOut 150ms ease forwards;
}
.modal-box {
    animation: scaleIn 200ms ease forwards;
}
.modal-box.closing {
    animation: scaleOut 150ms ease forwards;
}

/* ====== TOAST ANIMAÇÃO ====== */
.toast-enter { animation: fadeInRight 200ms ease forwards; }
.toast-leave { animation: fadeOut 150ms ease forwards; }

/* ====================================================================
   SCROLL REVEAL — INSTITUCIONAL
   Uso: adicione class="fl-reveal" (ou fl-reveal-left / fl-reveal-right)
   ao elemento. O IntersectionObserver em index.php adiciona .fl-visible.
   ==================================================================== */
.fl-reveal,
.fl-reveal-left,
.fl-reveal-right {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity  780ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 780ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fl-reveal       { transform: translateY(32px); }
.fl-reveal-left  { transform: translateX(-32px); }
.fl-reveal-right { transform: translateX(32px); }

.fl-reveal.fl-visible,
.fl-reveal-left.fl-visible,
.fl-reveal-right.fl-visible {
    opacity: 1;
    transform: none;
}

/* Delays de cascata (stagger) */
.fl-d1 { transition-delay:  80ms; }
.fl-d2 { transition-delay: 180ms; }
.fl-d3 { transition-delay: 280ms; }
.fl-d4 { transition-delay: 380ms; }
.fl-d5 { transition-delay: 480ms; }

/* Respeito a preferência do usuário por menos movimento */
@media (prefers-reduced-motion: reduce) {
    .fl-reveal,
    .fl-reveal-left,
    .fl-reveal-right {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ====== SKELETON ====== */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 936px 100%;
    animation: shimmer 1.4s infinite linear;
    border-radius: 4px;
}
.skeleton-text  { height: 14px; margin-bottom: 8px; }
.skeleton-title { height: 24px; margin-bottom: 12px; width: 60%; }
.skeleton-image { height: 200px; }

/* ====== HOVER LIFT ====== */
.hover-lift { transition: transform var(--transition-normal, 250ms) ease, box-shadow var(--transition-normal, 250ms) ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }

/* ====== SMOOTH SCROLL ====== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ====== PROGRESS BAR AJAX ====== */
#ajax-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: #003399;
    width: 0%;
    z-index: 9999;
    transition: width 300ms ease, opacity 200ms ease;
    border-radius: 0 2px 2px 0;
}
#ajax-progress.done { width: 100%; opacity: 0; }