/* =====================================================================
   Base — reset, elementos globais, barra de rolagem e keyframes.
   ===================================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--smn-verde) var(--smn-fundo-trilho);
}

body {
  margin: 0;
  background: var(--smn-fundo);
  overflow-x: hidden;
  font-family: var(--smn-fonte-texto), system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--smn-txt);
}

a {
  color: var(--smn-verde);
  text-decoration: none;
}

a:hover {
  color: var(--smn-verde-link);
}

button {
  font-family: inherit;
}

input,
textarea {
  font-family: inherit;
}

::selection {
  background: rgba(var(--smn-verde-rgb), .35);
  color: var(--smn-branco);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--smn-fundo-trilho);
}

::-webkit-scrollbar-thumb {
  background: var(--smn-verde);
  border-radius: 6px;
}

/* --- keyframes ------------------------------------------------------- */

@keyframes smnGlow {
  0%, 100% { opacity: var(--smn-brilho-min); transform: scale(1); }
  50% { opacity: var(--smn-brilho-max); transform: scale(var(--smn-brilho-escala)); }
}

/* Órbita, e não sobe-desce: o percurso em quatro pontos faz a massa passear
   pelos cantos, o que se percebe muito melhor que o deslocamento vertical. */
@keyframes smnFloat {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(var(--smn-brilho-deriva-x), calc(var(--smn-brilho-deriva-y) / -2)); }
  50% { transform: translate(0, calc(var(--smn-brilho-deriva-y) * -1)); }
  75% { transform: translate(calc(var(--smn-brilho-deriva-x) * -1), calc(var(--smn-brilho-deriva-y) / -2)); }
}

@keyframes smnPulse {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}

@keyframes smnSpinGlow {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

@keyframes smnMarqueeL {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@keyframes smnMarqueeR {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Entradas de elementos que nascem junto com o render (menus suspensos).
   São animation, não transition: cada render cria o nó do zero, e só a
   animation dispara sozinha na inserção. A saída é feita pelo app.js. */
@keyframes smnMenuIn {
  from { opacity: 0; transform: translateY(-10px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes smnMenuOut {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-8px) scale(.985); }
}

/* --- faixas cinza da Home -------------------------------------------- */
/* Muda só o fundo da seção e o véu dos cards — texto, ícones e bordas
   seguem os originais. */

[data-tema="cinza"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--smn-cinza) !important;
}

[data-tema="cinza"][data-tom="escuro"] {
  background: var(--smn-cinza-escuro) !important;
}

[data-tema="cinza"] > * {
  position: relative;
  z-index: 1;
}

[data-tema="cinza"] > [data-glow] {
  z-index: 0;
}

[data-tema="cinza"] [data-card] {
  background: rgba(var(--smn-preto-rgb), .15) !important;
  transition: background-color var(--smn-t-hover) ease, border-color var(--smn-t-hover) ease;
}

[data-tema="cinza"] [data-card="ativo"]:hover {
  background: rgba(var(--smn-preto-rgb), .06) !important;
}