/* ============================================================
   NEXI LEAD 360 — ANIMATIONS
   @import './animations.css';
   ============================================================ */

/* ──────────────────────────────────────────
   PAGE TRANSITIONS
────────────────────────────────────────── */

@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

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

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0);    }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0);     }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1);    }
}

/* Classes utilitárias de entrada (tokens de movimento em tokens.css).
   REGRA (Motion Lab 10/06): entrada anima UMA vez por navegação, no
   chrome ESTÁTICO da página — nunca em linhas/grids repopulados por JS
   (re-stagger a cada render foi uma das causas do jank de 01/06). */
.anim-page-in   { animation: pageIn     var(--m-enter, 0.45s) var(--e-out, cubic-bezier(0.16,1,0.3,1)) both; }
.anim-fade-in   { animation: fadeIn     0.25s ease both; }
.anim-slide-right { animation: slideInRight var(--m-slow, 0.3s) var(--e-out, cubic-bezier(0.16,1,0.3,1)) both; }
.anim-slide-left  { animation: slideInLeft  var(--m-slow, 0.3s) var(--e-out, cubic-bezier(0.16,1,0.3,1)) both; }
.anim-scale-in  { animation: scaleIn    0.2s var(--e-out, cubic-bezier(0.16,1,0.3,1)) both; }

/* Stagger helpers — aplicar em containers de CHROME (cards de seção,
   colunas, KPI row), não em listas dinâmicas */
.anim-stagger > *:nth-child(1)  { animation-delay: calc(var(--stagger, 50ms) * 1); }
.anim-stagger > *:nth-child(2)  { animation-delay: calc(var(--stagger, 50ms) * 2); }
.anim-stagger > *:nth-child(3)  { animation-delay: calc(var(--stagger, 50ms) * 3); }
.anim-stagger > *:nth-child(4)  { animation-delay: calc(var(--stagger, 50ms) * 4); }
.anim-stagger > *:nth-child(5)  { animation-delay: calc(var(--stagger, 50ms) * 5); }
.anim-stagger > *:nth-child(6)  { animation-delay: calc(var(--stagger, 50ms) * 6); }
.anim-stagger > *:nth-child(7)  { animation-delay: calc(var(--stagger, 50ms) * 7); }
.anim-stagger > *:nth-child(8)  { animation-delay: calc(var(--stagger, 50ms) * 8); }

/* ──────────────────────────────────────────
   SKELETON / SHIMMER (lazy loading)
────────────────────────────────────────── */

@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.09) 50%,
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 600px 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: 4px;
}

/* Tamanhos prontos de skeleton line */
.skeleton-line        { height: 10px; border-radius: 4px; }
.skeleton-line--sm    { height: 8px;  border-radius: 4px; }
.skeleton-line--lg    { height: 14px; border-radius: 4px; }
.skeleton-pill        { height: 22px; border-radius: var(--radius-full); }
.skeleton-block       { border-radius: var(--radius); }

/* ──────────────────────────────────────────
   BAR SHIMMER (barras de funil/progresso)
────────────────────────────────────────── */

@keyframes barShimmer {
  0%   { left: -100%; }
  100% { left:  200%; }
}

/* Aplicar em elementos com position:relative e overflow:hidden */
.bar-shimmer {
  position: relative;
  overflow: hidden;
}

.bar-shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; bottom: 0;
  width: 60%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  animation: barShimmer 2.5s infinite linear;
  animation-delay: 1.2s;
}

/* ──────────────────────────────────────────
   LOADING BAR (topo da página)
────────────────────────────────────────── */

@keyframes loadSlide {
  0%   { left: -30%; }
  100% { left:  130%; }
}

.load-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  z-index: var(--z-toast);
  overflow: hidden;
  pointer-events: none;
}

.load-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -30%;
  width: 30%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent),
    transparent
  );
  animation: loadSlide 1.2s ease-in-out infinite;
}

.load-bar.done {
  opacity: 0;
  transition: opacity 0.4s ease 0.3s;
}

/* ──────────────────────────────────────────
   RING PROGRESS
────────────────────────────────────────── */

@keyframes ringFill {
  from { stroke-dashoffset: 339; }
  to   { stroke-dashoffset: var(--ring-offset, 295); }
}

.ring-progress {
  animation: ringFill 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.5s;
  stroke-dashoffset: 339;
}

/* ──────────────────────────────────────────
   PULSE / GLOW (status dots ativos)
────────────────────────────────────────── */

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(9, 188, 138, 0.5); }
  50%       { box-shadow: 0 0 0 4px rgba(9, 188, 138, 0); }
}

.pulse-accent { animation: pulse 2s infinite; }

/* ──────────────────────────────────────────
   MICRO-INTERAÇÕES (hover utilities)
────────────────────────────────────────── */

.hover-lift {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.hover-slide {
  transition: transform 0.15s ease;
}
.hover-slide:hover { transform: translateX(3px); }

.hover-glow {
  transition: box-shadow 0.2s ease;
}
.hover-glow:hover { box-shadow: var(--shadow-accent); }

/* ──────────────────────────────────────────
   ÍCONES ANIMADOS NO HOVER (data-anim + .np-ico)
   Aplicar data-anim="<estilo>" no elemento que recebe :hover — .nav-item,
   .icon-btn, .btn, .kpi__icon, .card... — a animação atinge o SVG .np-ico
   de dentro (o wrapper que NexiUI.ico() gera). Escolher o estilo pelo que
   o ÍCONE REPRESENTA, não aleatoriamente:
     ring   → sino/notificação (o sino "toca")
     spin   → engrenagem, atualizar/refresh (gira de verdade)
     tilt   → telefone/ligação (inclina como o gesto de atender)
     shake  → excluir/descartar (chama atenção de ação destrutiva; também
              tinge a borda/cor em --danger)
     bounce → enviar/baixar/download (sugere "soltar" algo)
     pop    → favoritar/curtir (cresce e preenche a cor)
     slide  → avançar/ver mais/próximo
     lift / scale → uso neutro (navegação, ação sem semântica de objeto)
     pulse  → chamar atenção genérica (contador, novidade)
────────────────────────────────────────── */

.np-ico { transition: transform var(--m-base, 0.2s) ease, fill var(--m-base, 0.2s) ease, stroke var(--m-base, 0.2s) ease; }

[data-anim="lift"]:hover .np-ico  { transform: translateY(-2px) scale(1.08); }
[data-anim="scale"]:hover .np-ico { transform: scale(1.15); }
[data-anim="tilt"]:hover .np-ico  { transform: rotate(-8deg) scale(1.06); }
[data-anim="slide"]:hover .np-ico { transform: translateX(3px); }

[data-anim="spin"]:hover .np-ico { animation: iconSpin 0.6s linear; }
@keyframes iconSpin { to { transform: rotate(360deg); } }

[data-anim="pulse"]:hover .np-ico { animation: iconPulse 0.5s ease; }
@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}

[data-anim="ring"]:hover .np-ico { animation: iconRing 0.6s ease; transform-origin: top center; }
@keyframes iconRing {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(9deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
}

[data-anim="shake"]:hover .np-ico { animation: iconShake 0.4s ease; }
@keyframes iconShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px) rotate(-4deg); }
  40% { transform: translateX(2px) rotate(4deg); }
  60% { transform: translateX(-1px) rotate(-3deg); }
  80% { transform: translateX(1px) rotate(3deg); }
}
[data-anim="shake"]:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }

[data-anim="bounce"]:hover .np-ico { animation: iconBounce 0.5s ease; }
@keyframes iconBounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(3px); }
  70% { transform: translateY(-2px); }
}

[data-anim="pop"]:hover .np-ico { animation: iconPop 0.35s ease; fill: currentColor; }
@keyframes iconPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3); }
  100% { transform: scale(1.12); }
}

/* ──────────────────────────────────────────
   TOAST COM FÍSICA (Motion Lab §6)
────────────────────────────────────────── */

.toast-item {
  display: inline-flex; align-items: center; gap: 6px;
  animation: toastIn .42s var(--e-spring, cubic-bezier(.34,1.56,.64,1)) both;
}
.toast-item--out { animation: toastOut .26s var(--e-in, ease-in) both; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to   { opacity: 0; transform: translateY(8px)  scale(.98); } }
.toast-check path {
  stroke-dasharray: 30; stroke-dashoffset: 30;
  animation: checkDraw .4s var(--e-out, ease-out) .15s both;
}
@keyframes checkDraw { to { stroke-dashoffset: 0; } }

/* ──────────────────────────────────────────
   INDICADOR DESLIZANTE DE ABAS (Motion Lab §8)
   Criado por NexiShell.initTabsIndicator("#tabs")
────────────────────────────────────────── */

.tabs { position: relative; }
.tabs .tab { position: relative; z-index: 1; }
.tabs__ind {
  position: absolute; top: 3px; bottom: 3px; left: 0; width: 0;
  border-radius: 5px; box-sizing: border-box;
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  box-shadow: var(--card-edge);
  transition: transform var(--m-slow, .3s) var(--e-out, ease-out),
              width var(--m-slow, .3s) var(--e-out, ease-out),
              opacity var(--m-base, .18s) ease;
  will-change: transform; opacity: 0;
}
/* com o indicador presente, a pílula estática da aba ativa sai de cena */
.tabs:has(.tabs__ind) .tab.active { background: transparent; }

/* ──────────────────────────────────────────
   ENTRADA GLOBAL DE PÁGINA (1× por load)
────────────────────────────────────────── */

.topbar { animation: pageIn var(--m-enter, 0.45s) var(--e-out, cubic-bezier(0.16,1,0.3,1)) both; }

/* ──────────────────────────────────────────
   PRESS FEEDBACK (resposta tátil <100ms)
────────────────────────────────────────── */

.btn:active:not(:disabled),
.chip:active,
.table-action:active,
.segmented__item:active,
.stepper__btn:active:not(:disabled),
.press:active {
  transform: scale(0.97);
  transition-duration: var(--m-fast, 120ms);
}

/* ──────────────────────────────────────────
   ACESSIBILIDADE — desliga tudo
────────────────────────────────────────── */

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