/* ============================================================
   PADRÃO FAMÍLIA PULSAR (2ª geração) — calibragem RH: mesmo motion, brilhos MAIS LEVES que o Finance
   Tokens em canais RGB + utilitários de motion/fx idênticos aos
   de ~/projetos/ag-painel/src/index.css. Um easing para tudo:
   cubic-bezier(.22,1,.36,1) · fill backwards (nunca both).
   ============================================================ */

:root {
  /* Família tipográfica Pulsar (Fontshare): Chillax títulos · Author corpo · Clash Display apoio. */
  --font-sans: 'Author', 'Inter', system-ui, sans-serif;
  --font-titulo: 'Chillax', 'Author', sans-serif;
  --font-apoio: 'Clash Display', 'Author', sans-serif;

  --c-primary: 112 72 232;
  --c-secondary: 155 110 255;
  --c-accent: 8 193 106;
  --c-danger: 255 92 92;
  --c-warn: 255 188 125;
  --c-info: 91 141 239;
  --c-bg: 10 15 26;
  --c-surface: 15 24 41;
  --c-surface2: 24 34 54;
  --c-surface3: 30 45 71;
  --c-bd: 26 45 71;
  --c-text: 232 238 255;
  --c-muted: 122 155 196;
}

[data-theme='light'] {
  --c-bg: 243 238 255;
  --c-surface: 253 251 255;
  --c-surface2: 234 226 255;
  --c-surface3: 216 204 255;
  --c-bd: 192 176 236;
  --c-text: 28 19 56;
  --c-muted: 110 94 166;
}

/* Tipografia da família aplicada globalmente. */
body {
  font-family: var(--font-sans);
}
h1,
h2,
h3 {
  font-family: var(--font-titulo);
}
.font-apoio {
  font-family: var(--font-apoio);
}

/* ── Motion essencial (gen-2) ── */
@keyframes pad-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pad-pop {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes pad-tab-in {
  from { opacity: 0; transform: translateY(6px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.anim-fade-up { animation: pad-fade-up 0.32s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.anim-pop { animation: pad-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.anim-tab-in { animation: pad-tab-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) backwards; }

/* ── FX gen-2 ── */
.fx-press { transition: transform 0.1s ease; }
.fx-press:active { transform: scale(0.98); }
.fx-neon-primary { text-shadow: 0 0 10px rgb(var(--c-primary) / 0.28); }
.fx-neon-secondary { text-shadow: 0 0 10px rgb(var(--c-secondary) / 0.28); }
.fx-neon-accent { text-shadow: 0 0 10px rgb(var(--c-accent) / 0.28); }
.fx-neon-danger { text-shadow: 0 0 10px rgb(var(--c-danger) / 0.28); }
.fx-grid-bg {
  background-image:
    linear-gradient(rgb(var(--c-bd) / 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--c-bd) / 0.16) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── Identidade de pulso (compartilhada com o Finance) ── */
@keyframes pulso-respira {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 9px rgb(var(--c-primary) / 0.25)); }
  50% { transform: scale(1.02); filter: drop-shadow(0 0 16px rgb(var(--c-secondary) / 0.38)); }
}
.pulso-respira { animation: pulso-respira 3.6s ease-in-out infinite; }

@keyframes pulso-vivo {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.pulso-vivo { animation: pulso-vivo 1.6s ease-in-out infinite; }

/* Piso de radar 3D: anéis expandindo num plano inclinado + grid HUD esmaecendo. */
@keyframes pulso-piso-anel {
  0% { transform: scale(0.05); opacity: 0; }
  15% { opacity: 0.85; }
  100% { transform: scale(1); opacity: 0; }
}
.pulso-piso {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 760px;
  height: 760px;
  margin-left: -380px;
  transform: perspective(700px) rotateX(72deg);
  pointer-events: none;
  background-image:
    linear-gradient(rgb(var(--c-primary) / 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--c-primary) / 0.13) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle, black 30%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle, black 30%, transparent 72%);
}
.pulso-piso span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgb(var(--c-secondary) / 0.42);
  box-shadow: 0 0 12px rgb(var(--c-primary) / 0.2);
  animation: pulso-piso-anel 4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.pulso-piso span:nth-child(2) { animation-delay: -1.3s; border-color: rgb(var(--c-primary) / 0.38); }
.pulso-piso span:nth-child(3) { animation-delay: -2.6s; border-color: rgb(var(--c-secondary) / 0.28); }

/* ── Menu retrátil padrão (espelho do Finance): hambúrguer + colapso por largura ── */
.menu-hamburguer {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgb(var(--c-bd));
  background: rgb(var(--c-surface));
  color: rgb(var(--c-muted));
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s, border-color 0.2s;
}
.menu-hamburguer:hover {
  color: rgb(var(--c-text));
  border-color: rgb(var(--c-primary));
}
/* Variante flutuante (portais sem topbar): acompanha a borda da sidebar. */
.menu-hamburguer-fixo {
  position: fixed;
  top: 12px;
  left: calc(var(--sidebar-w, 240px) + 14px);
  z-index: 150;
  transition: left 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s, border-color 0.2s;
}
.sidebar.collapsed ~ .menu-hamburguer-fixo {
  left: 14px;
}

/* Card com tilt 3D (transform setado via JS no mousemove — GPU only). */
.tilt-3d {
  transition: transform 0.18s ease-out;
  will-change: transform;
}

/* ── Acessibilidade: tudo colapsa no estado final ── */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up,
  .anim-pop,
  .anim-tab-in,
  .pulso-respira,
  .pulso-vivo,
  .pulso-piso span {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .tilt-3d {
    transition: none !important;
    transform: none !important;
  }
}