/* animations.css — camada de dinamismo para o admin Letess
   Não-invasiva: mira classes existentes. Respeita prefers-reduced-motion. */

@keyframes letFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes letFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes letPop { 0% { opacity: 0; transform: scale(.96); } 60% { transform: scale(1.01); } 100% { opacity: 1; transform: scale(1); } }
@keyframes letPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 86, 0, .45); }
  50% { box-shadow: 0 0 0 6px rgba(232, 86, 0, 0); }
}
@keyframes letDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(162, 248, 101, .55); }
  50% { box-shadow: 0 0 10px 2px rgba(162, 248, 101, .25); }
}
@keyframes letShimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

/* Entrada da página ao navegar */
.page { animation: letFadeUp .42s cubic-bezier(.22,.61,.36,1) both; }
.page-head { animation: letFadeIn .5s ease both; }

/* Entrada escalonada dos cartões e KPIs */
.stat, .card { animation: letFadeUp .5s cubic-bezier(.22,.61,.36,1) both; }
.stat-grid .stat:nth-child(1), .card:nth-child(1) { animation-delay: .03s; }
.stat-grid .stat:nth-child(2), .card:nth-child(2) { animation-delay: .08s; }
.stat-grid .stat:nth-child(3), .card:nth-child(3) { animation-delay: .13s; }
.stat-grid .stat:nth-child(4), .card:nth-child(4) { animation-delay: .18s; }
.stat-grid .stat:nth-child(5) { animation-delay: .23s; }
.stat-grid .stat:nth-child(6) { animation-delay: .28s; }

/* Hover com leve elevação */
.stat, .card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.stat:hover, .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.55);
}

/* Navegação: deslize + transição do estado ativo */
.nav-item { transition: background .16s ease, color .16s ease, transform .16s ease, padding-left .16s ease; }
.nav-item:hover { transform: translateX(2px); }
.nav-item.active { animation: letFadeIn .2s ease both; }

/* Botões responsivos ao toque */
.btn, .icon-btn, .store-pill, .sidebar-foot { transition: transform .14s ease, background .16s ease, box-shadow .16s ease, opacity .16s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active, .icon-btn:active, .nav-item:active { transform: translateY(0) scale(.98); }
.icon-btn:hover, .store-pill:hover, .sidebar-foot:hover { transform: translateY(-1px); }

/* Badge "AO VIVO" e botão de live pulsando */
.badge.accent { animation: letPulse 2.2s ease-in-out infinite; }
.go-live-btn { animation: letPulse 2.4s ease-in-out infinite; transition: transform .14s ease; }
.go-live-btn:hover { transform: translateY(-1px); }

/* Ponto da marca com brilho suave */
.brand-dot { animation: letDot 2.6s ease-in-out infinite; }

/* Barras de progresso/meta: crescem ao carregar + brilho deslizante */
.bar-fill, .progress-fill, .meta-fill {
  background-image: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  background-size: 200% 100%;
  transform-origin: left center;
  animation: letBarGrow 1s cubic-bezier(.22,.61,.36,1) both, letShimmer 2.6s linear 1s infinite;
}

/* Eyebrow já tem gradiente; reforça o "play" pulsando */
.eyebrow .play { animation: letPulse 1.8s ease-in-out infinite; }

/* ===== Gráficos carregando (desenho animado) ===== */
@keyframes letDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes letBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes letDonut { from { transform: rotate(-130deg) scale(.82); opacity: 0; } to { transform: none; opacity: 1; } }

/* Linha do gráfico se desenha */
.lc-line { stroke-dasharray: 100; stroke-dashoffset: 100; animation: letDraw 1.2s ease forwards; }
.lc-area { opacity: 0; animation: letFadeIn 1s ease .55s forwards; }
.lc-dot  { opacity: 0; animation: letFadeIn .4s ease forwards; }

/* Donut faz sweep-in */
.donut-svg { transform-origin: 50% 50%; animation: letDonut .95s cubic-bezier(.22,.61,.36,1) both; }

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  .lc-line { stroke-dashoffset: 0 !important; }
  .lc-area, .lc-dot { opacity: 1 !important; }
}