/*
 * animations.css - Keyframe Animations
 * ======================================
 * PORQUE: Centraliza TODAS as animacoes reutilizaveis.
 * Componentes referenciam via animation-name sem duplicar @keyframes.
 *
 * Sprint 10: Adicionadas animacoes premium de nivel enterprise:
 * - springIn: entrada com overshoot (bounce elastico)
 * - shimmerSlide: gradiente deslizante para skeleton/loading
 * - rippleOut: onda circular para feedback de clique
 * - typeChar: cursor de digitacao (typewriter blink)
 * - slideInRight/slideInLeft: entrada lateral suave
 * - scalePress: press feedback em botoes
 * - glowPulse: pulso de brilho para destaque
 * - staggerFadeUp: fade com delay controlavel (nth-child)
 */

/* ── Fade up - entrada padrao de elementos ── */
@keyframes fadeUp {
 from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
}

/* ── Pulse - glow no logo ── */
@keyframes pulse {
 0%, 100% { filter: drop-shadow(0 0 16px rgba(196, 30, 30, 0.3)); }
 50% { filter: drop-shadow(0 0 28px rgba(196, 30, 30, 0.6)); }
}

/* ── Typing bounce - dots do indicador de digitacao ── */
@keyframes typingBounce {
 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
 30% { transform: translateY(-5px); opacity: 1; }
}

/* ── Logo float - flutuacao suave + glow dinamico ── */
@keyframes logoFloat {
 0%, 100% {
 transform: translateY(0);
 filter: drop-shadow(0 0 25px rgba(196, 30, 30, 0.35));
 }
 50% {
 transform: translateY(-10px);
 filter: drop-shadow(0 0 45px rgba(196, 30, 30, 0.65));
 }
}

/* ── Aura glow - pulso radial atras do logo ── */
@keyframes auraGlow {
 0%, 100% { transform: scale(0.9); opacity: 0.5; }
 50% { transform: scale(1.15); opacity: 1; }
}

/* ── Message enter - bolha entra suave ── */
@keyframes msgEnter {
 from { opacity: 0; transform: translateY(12px) scale(0.97); }
 to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Pill reveal - action pills aparecem apos a mensagem ── */
@keyframes pillReveal {
 from { opacity: 0; transform: translateY(4px); }
 to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════
 SPRINT 10 - PREMIUM ANIMATIONS
 ═══════════════════════════════════════════════════ */

/* ── Spring In - entrada com overshoot elastico ── */
@keyframes springIn {
 0% {
 opacity: 0;
 transform: translateY(24px) scale(0.92);
 }
 40% {
 opacity: 1;
 transform: translateY(-4px) scale(1.02);
 }
 65% {
 transform: translateY(2px) scale(0.99);
 }
 85% {
 transform: translateY(-1px) scale(1.005);
 }
 100% {
 transform: translateY(0) scale(1);
 }
}

/* ── Spring In from Left - bolha user ── */
@keyframes springInLeft {
 0% {
 opacity: 0;
 transform: translateX(-20px) scale(0.95);
 }
 40% {
 opacity: 1;
 transform: translateX(3px) scale(1.01);
 }
 70% {
 transform: translateX(-1px) scale(0.998);
 }
 100% {
 transform: translateX(0) scale(1);
 }
}

/* ── Spring In from Right - bolha assistant ── */
@keyframes springInRight {
 0% {
 opacity: 0;
 transform: translateX(20px) scale(0.95);
 }
 40% {
 opacity: 1;
 transform: translateX(-3px) scale(1.01);
 }
 70% {
 transform: translateX(1px) scale(0.998);
 }
 100% {
 transform: translateX(0) scale(1);
 }
}

/* ── Shimmer Slide - gradiente deslizante (loading, skeleton) ── */
@keyframes shimmerSlide {
 0% { background-position: -200% 50%; }
 100% { background-position: 200% 50%; }
}

/* ── Ripple Out - onda circular para feedback de clique ── */
@keyframes rippleOut {
 0% {
 box-shadow: 0 0 0 0 rgba(196, 30, 30, 0.35);
 }
 70% {
 box-shadow: 0 0 0 12px rgba(196, 30, 30, 0);
 }
 100% {
 box-shadow: 0 0 0 0 rgba(196, 30, 30, 0);
 }
}

/* ── Typewriter Blink - cursor piscando ── */
@keyframes typewriterBlink {
 0%, 100% { border-right-color: var(--red, #c41e1e); }
 50% { border-right-color: transparent; }
}

/* ── Scale Press - feedback de clique em botoes ── */
@keyframes scalePress {
 0% { transform: scale(1); }
 40% { transform: scale(0.92); }
 100% { transform: scale(1); }
}

/* ── Glow Pulse - pulso de brilho para destaque ── */
@keyframes glowPulse {
 0%, 100% {
 box-shadow: 0 0 0 0 rgba(196, 30, 30, 0);
 }
 50% {
 box-shadow: 0 0 20px 4px rgba(196, 30, 30, 0.15);
 }
}

/* ── Slide Down - para dropdown/toast ── */
@keyframes slideDown {
 from { opacity: 0; transform: translateY(-10px); }
 to { opacity: 1; transform: translateY(0); }
}

/* ── Shake - erro suave ── */
@keyframes shake {
 0%, 100% { transform: translateX(0); }
 15% { transform: translateX(-6px); }
 30% { transform: translateX(5px); }
 45% { transform: translateX(-3px); }
 60% { transform: translateX(2px); }
}

/* ── Smooth Theme Transition ── */
@keyframes themeSwitch {
 0% { filter: brightness(0.8); }
 50% { filter: brightness(1.1); }
 100% { filter: brightness(1); }
}

/* ═══════════════════════════════════════════════════
 UTILITY CLASSES - Usar direto no HTML/JS
 ═══════════════════════════════════════════════════ */

.anim-spring-in { animation: springIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.anim-spring-left { animation: springInLeft 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.anim-spring-right { animation: springInRight 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.anim-fade-up { animation: fadeUp 0.3s ease both; }
.anim-scale-press { animation: scalePress 0.2s ease; }
.anim-ripple { animation: rippleOut 0.5s ease; }
.anim-shake { animation: shake 0.4s ease; }
.anim-slide-down { animation: slideDown 0.3s ease both; }
.anim-theme-switch { animation: themeSwitch 0.4s ease; }

/* Shimmer utility (apply to loading elements) */
.anim-shimmer {
 background: linear-gradient(
 90deg,
 rgba(255,255,255,0) 0%,
 rgba(255,255,255,0.04) 40%,
 rgba(255,255,255,0.08) 50%,
 rgba(255,255,255,0.04) 60%,
 rgba(255,255,255,0) 100%
 );
 background-size: 200% 100%;
 animation: shimmerSlide 1.8s ease-in-out infinite;
}

/* Typewriter cursor */
.anim-typewriter {
 border-right: 2px solid var(--red, #c41e1e);
 animation: typewriterBlink 0.8s step-end infinite;
 padding-right: 2px;
}

/* Stagger children (use with JS: el.style.animationDelay) */
.anim-stagger > * {
 animation: springIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.anim-stagger > *:nth-child(1) { animation-delay: 0ms; }
.anim-stagger > *:nth-child(2) { animation-delay: 60ms; }
.anim-stagger > *:nth-child(3) { animation-delay: 120ms; }
.anim-stagger > *:nth-child(4) { animation-delay: 180ms; }
.anim-stagger > *:nth-child(5) { animation-delay: 240ms; }
.anim-stagger > *:nth-child(6) { animation-delay: 300ms; }