/* EcoFornecedor — animações e microinterações
   Tudo é desligado automaticamente para quem prefere menos movimento (prefers-reduced-motion). */

@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }

:root { --ease: cubic-bezier(.22, .9, .3, 1); --ease-back: cubic-bezier(.34, 1.56, .64, 1); }

/* ── Transição suave entre páginas (Chrome/Edge): o menu fica parado, o conteúdo troca com fade ── */
@view-transition { navigation: auto; }
.sidebar { view-transition-name: menu; }
.topbar { view-transition-name: topo; }
::view-transition-old(root) { animation: vt-sai .16s ease both; }
::view-transition-new(root) { animation: vt-entra .28s var(--ease) both; }
@keyframes vt-sai { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(8px); } }

/* ── Entrada dos blocos da página (cascata) ── */
@keyframes sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes surge { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes desliza { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.anim-in { animation: sobe .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
.anim-row { animation: desliza .38s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms + 120ms); }

/* ── Hero do dashboard: brilho que se move devagar ── */
.hero { background-size: 160% 160% !important; animation: hero-mov 14s ease-in-out infinite alternate; }
@keyframes hero-mov { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.hero::after { animation: bolha 9s ease-in-out infinite alternate; }
@keyframes bolha { from { transform: translate(0, 0) scale(1); } to { transform: translate(-30px, 20px) scale(1.15); } }
.hero h1 { animation: sobe .6s var(--ease) both .05s; }
.hero p, .hero-eyebrow { animation: sobe .6s var(--ease) both .15s; }
.hero-actions .btn { animation: surge .5s var(--ease-back) both; animation-delay: .25s; }
.hero-actions .btn + .btn { animation-delay: .33s; }

/* ── Cartões e indicadores ── */
.card { transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .3s, background-color .3s; }
.kpi:hover, .howto-step:hover, a.card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16, 36, 66, .12); }
.kpi .ic { transition: transform .35s var(--ease-back); }
.kpi:hover .ic { transform: scale(1.12) rotate(-6deg); }
.kpi b { font-variant-numeric: tabular-nums; }

/* ── Botões ── */
.btn { transition: background .18s, border-color .18s, color .18s, box-shadow .18s, transform .12s; position: relative; overflow: hidden; }
.btn:active { transform: scale(.96); }
.btn-primary:hover, .btn-hero:hover, .btn-success:hover { box-shadow: 0 6px 16px rgba(30, 111, 217, .28); }
.btn-primary::after, .btn-hero::after, .lg-btn::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); pointer-events: none;
}
.btn-primary:hover::after, .btn-hero:hover::after, .lg-btn:hover::after { animation: brilho .7s ease; }
@keyframes brilho { to { left: 130%; } }
.btn .bi-plus-lg, .btn .bi-arrow-right { display: inline-block; transition: transform .25s var(--ease-back); }
.btn:hover .bi-plus-lg { transform: rotate(90deg); }
.btn:hover .bi-arrow-right, .lg-btn:hover .bi-arrow-right { transform: translateX(4px); }
.icon-btn { transition: background .18s, transform .2s var(--ease-back); }
.icon-btn:hover { transform: scale(1.08); }

/* Efeito "onda" no clique */
.onda { position: absolute; border-radius: 50%; background: currentColor; opacity: .22; transform: scale(0); animation: onda .55s ease-out forwards; pointer-events: none; }
@keyframes onda { to { transform: scale(2.6); opacity: 0; } }

/* ── Menu lateral ── */
.sidebar nav a { transition: background .2s, color .2s, padding-left .25s var(--ease); }
.sidebar nav a:hover { padding-left: 16px; }
html.sb-collapsed .sidebar nav a:hover { padding-left: 0; }
.sidebar nav a:hover i { transform: scale(1.12); }
.sidebar nav a i { transition: color .15s, transform .25s var(--ease-back); }
.sidebar nav a.active { animation: desliza .45s var(--ease) both; }
.sidebar nav a em { animation: badge .6s var(--ease-back) both .4s; }
@keyframes badge { from { transform: scale(0); } to { transform: scale(1); } }
.sb-float:hover { transform: scale(1.12); }
.sb-float { transition: left .2s ease, background .15s, transform .2s var(--ease-back); }
.brand-ico img { transition: transform .5s var(--ease-back); }
.brand:hover .brand-ico img { transform: rotate(-12deg) scale(1.06); }

/* ── Sininho de notificações ── */
.dropdown summary b { animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(229, 72, 77, 0); } }
.dropdown summary:hover .bi-bell { animation: sino .6s ease; display: inline-block; transform-origin: 50% 0; }
@keyframes sino { 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }

/* ── Menus suspensos ── */
details.dropdown[open] .dropdown-menu { animation: abre .2s var(--ease) both; transform-origin: top right; }
@keyframes abre { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.dd-item { transition: background .15s, padding-left .2s var(--ease); }
.dd-item:hover { padding-left: 18px; }

/* ── Tema claro/escuro ── */
.tema-btn i { transition: transform .5s var(--ease-back); }
.tema-btn:hover i { transform: rotate(-25deg); }
body, .topbar, .table td { transition: background-color .3s, border-color .3s, color .3s; }

/* ── Tabelas e listas ── */
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: rgba(30, 111, 217, .045); }
.list-item { transition: background .15s; }
.list-item:hover { background: linear-gradient(90deg, rgba(30, 111, 217, .05), transparent); }
.steps li { transition: background .2s; }
.steps li:hover { background: rgba(30, 111, 217, .035); }
.step-n { animation: surge .45s var(--ease-back) both; animation-delay: calc(var(--i, 0) * 70ms + .2s); }
.steps .chk:not(.off) { animation: surge .5s var(--ease-back) both .45s; }

/* ── Barras de progresso e anéis (preenchem ao abrir) ── */
.bar i, .hbar .track i, .stackbar i { transition: width 1s var(--ease); }
.ring { transition: --p 1.1s var(--ease); }

/* ── Selos (pills) ── */
.pill { transition: transform .2s var(--ease-back); }
tr:hover .pill, .list-item:hover .pill { transform: scale(1.04); }
.pill-red .bi-lock-fill { animation: treme 3s ease-in-out infinite; display: inline-block; }
@keyframes treme { 0%, 90%, 100% { transform: none; } 93% { transform: rotate(-10deg); } 96% { transform: rotate(10deg); } }

/* ── Alertas e mensagens ── */
.flash { animation: alerta .45s var(--ease-back) both; }
@keyframes alerta { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.flash.saindo { transition: opacity .4s, transform .4s, max-height .4s .2s, margin .4s .2s, padding .4s .2s; opacity: 0; transform: translateY(-6px); max-height: 0 !important; margin: 0 !important; padding-top: 0; padding-bottom: 0; overflow: hidden; }
.toast { transition: opacity .3s, transform .45s var(--ease-back); }

/* ── Visualizador de documentos ── */
.viewer:not([hidden]) { animation: fundo .25s ease both; }
.viewer:not([hidden]) .viewer-box { animation: zoom .35s var(--ease-back) both; }
@keyframes fundo { from { background: rgba(10, 22, 40, 0); backdrop-filter: blur(0); } to { backdrop-filter: blur(3px); } }
@keyframes zoom { from { opacity: 0; transform: translateY(24px) scale(.96); } }

/* ── Kanban ── */
.kcard { transition: transform .2s var(--ease), box-shadow .2s, opacity .2s; }
.kcard:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(16, 36, 66, .12); }
.kcard.dragging { transform: rotate(2.5deg) scale(1.02); }
.kcard.chegou { animation: chegou .5s var(--ease-back); }
@keyframes chegou { 0% { transform: scale(.92); box-shadow: 0 0 0 3px rgba(18, 166, 121, .5); } 100% { transform: none; box-shadow: 0 1px 2px rgba(16, 36, 66, .05); } }
.col-body { transition: background .2s, outline-color .2s; }
.col-head .count { transition: transform .3s var(--ease-back), background .2s; }
.col-head .count.pulsa { transform: scale(1.3); }

/* ── GED ── */
.ged-thumb, .ged-folder { transition: transform .25s var(--ease), box-shadow .25s; }
.ged-thumb:hover, .ged-folder:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(16, 36, 66, .12); }
.upload.drop.over { animation: respira 1s ease-in-out infinite; }
@keyframes respira { 50% { transform: scale(1.015); } }

/* ── Campos ── */
.input, .search input { transition: border-color .2s, box-shadow .2s, background-color .3s; }
.input:focus, .search input:focus { box-shadow: 0 0 0 3px rgba(30, 111, 217, .14); }
.is-invalid, .treme { animation: erro .4s ease; }
@keyframes erro { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* ── Abas ── */
.tabs a { transition: color .2s, border-color .25s, background .2s; }

/* ── Tela de login ── */
.lg-card { animation: sobe .7s var(--ease) both .1s; }
.lg-pitch > * { animation: sobe .7s var(--ease) both; }
.lg-pitch > *:nth-child(2) { animation-delay: .12s; }
.lg-pitch > *:nth-child(3) { animation-delay: .24s; }
.lg-feats li { animation: desliza .5s var(--ease) both; }
.lg-feats li:nth-child(1) { animation-delay: .4s; } .lg-feats li:nth-child(2) { animation-delay: .5s; } .lg-feats li:nth-child(3) { animation-delay: .6s; }
.lg-watermark { animation: flutua 12s ease-in-out infinite alternate; }
@keyframes flutua { from { transform: translateY(0) rotate(0); } to { transform: translateY(-18px) rotate(-3deg); } }
.lg-brand-ico { animation: surge .6s var(--ease-back) both; }
.lg-btn { position: relative; overflow: hidden; }
.lg-btn:active { transform: scale(.97); }
.lg-demo button { transition: transform .2s var(--ease-back), background .2s, border-color .2s; }
.lg-demo button:hover { transform: translateY(-3px); }
.lg-msg.err { animation: erro .45s ease; }

/* ── Preferência do sistema: menos movimento ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  @view-transition { navigation: none; }
}