/* ============================================================ vivo.css — camada de "vida" compartilhada do sistema MTBB Micro-interações e animações aplicadas em todas as páginas. TUDO fica dentro de prefers-reduced-motion: no-preference, então quem prefere menos movimento não recebe nada disso. Carregar SEMPRE por último no p/ ter precedência. ============================================================ */ /* entrada SÓ com transform (nunca opacity:0) — se a animação for pausada/throttled (ex.: aba em segundo plano), o conteúdo continua VISÍVEL, só deslocado. À prova de sumiço. */ @keyframes vivoEnter { 0% { transform: translateY(20px) scale(.94); } 62% { transform: translateY(-3px) scale(1.012); } 100% { transform: none; } } @keyframes vivoTabPop{ 0% { transform: scale(.9); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } } @keyframes vivoPulse { 0%,100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 70% { box-shadow: 0 0 0 9px transparent; opacity: .45; } } @keyframes vivoSheen { from { background-position: -160% 0; } to { background-position: 280% 0; } } @keyframes vivoTick { 0% { transform: translateY(0); } 35% { transform: translateY(-3px); } 100% { transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { /* ---------- transições universais em elementos interativos ---------- */ button, .btn, [class*="btn"], .vtab, .stab, .crm-stab, .vsw, .pfw, .preset, .uc, .adml-card, .da-card, .metric, .kpi, .imp-stat, .card, input, select, textarea, .search-input { transition: transform .2s cubic-bezier(.2,.75,.25,1), box-shadow .22s ease, border-color .18s ease, background-color .18s ease, color .15s ease, filter .18s ease; } /* ---------- hover FORTE em botões e abas ---------- */ button:hover, .btn:hover, [class*="btn"]:hover, .vtab:hover, .stab:hover, .crm-stab:hover, .vsw:hover, .pfw:hover, .preset:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.06); box-shadow: 0 6px 16px rgba(0,0,0,.16); } button:active, .btn:active, [class*="btn"]:active, .vtab:active, .stab:active, .crm-stab:active, .vsw:active, .pfw:active, .preset:active { transform: translateY(0) scale(.94); filter: brightness(.96); } /* ---------- tiles/cards clicáveis: SOBEM bastante + sombra grande ---------- */ .uc:hover, .adml-card:hover, .da-card:hover, .metric:hover, .kpi:hover, .imp-stat:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 18px 40px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.08); position: relative; z-index: 3; } /* card de lead (kanban): acende borda azul + sombra (sem transform — não brigar com o drag) */ .card:hover { box-shadow: 0 12px 26px rgba(0,0,0,.16); border-color: rgba(37,99,235,.6); } /* ---------- foco em campos: anel azul nítido ---------- */ input:focus, select:focus, textarea:focus, .search-input:focus { box-shadow: 0 0 0 3px rgba(37,99,235,.28); border-color: rgba(37,99,235,.7); } /* ---------- ENTRADA (classe .vivo-enter posta pelo vivo.js quando o elemento aparece) ---------- */ .vivo-enter { animation: vivoEnter .6s cubic-bezier(.2,.8,.25,1) both; } /* ---------- aba ativa dá um "pop" ao ser ativada ---------- */ .vtab.on, .crm-stab.on, .preset.on, .stab.on, .vsw.on { animation: vivoTabPop .32s ease; } /* ---------- pulso em status "ao vivo" (utilitário .vivo-pulse) ---------- */ .vivo-pulse { border-radius: 50%; animation: vivoPulse 1.8s ease-out infinite; } /* ---------- brilho varrendo botões primários ---------- */ .btn-primary, .btn-new-lead, .followup-adv-btn, .da-cta { background-image: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); background-size: 220% 100%; background-repeat: no-repeat; background-position: -160% 0; } .btn-primary:hover, .btn-new-lead:hover, .followup-adv-btn:hover, .da-cta:hover { animation: vivoSheen .9s ease; } /* "tique" no número quando o count-up termina */ .vivo-counting { will-change: contents; } .vivo-tick { animation: vivoTick .38s ease; } }