/* ════════════════════════════════════════════════════════════════════
   KartData — Camada de identidade visual compartilhada (design tokens)
   Reutilizável por landing.html, site-admin.html e o app (index/app.html).
   Framework-free. Não substitui kartdata.css do app; complementa como
   fonte única de tokens + primitivos de UI + estilos de suporte aos FX.
   Inspiração de motion/identidade: ReactBits (Hyperspeed, Threads,
   ShinyText, GradientText, Spotlight, Magnet, DotGrid) portados p/ vanilla.
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Paleta da marca (fonte única — igual à do app kartdata.css) ── */
  --kd-bg:#0A0A0F;
  --kd-panel:#13131A;
  --kd-panel-2:#1A1A25;
  --kd-border:#2A2A3A;
  --kd-border-2:#3A3A50;
  --kd-neon:#00FF88;
  --kd-blue:#00B4FF;
  --kd-orange:#FF6B35;
  --kd-yellow:#FFD700;
  --kd-red:#FF2D55;
  --kd-gray:#8A8A9A;
  --kd-white:#F0F0F8;

  /* aliases retrocompatíveis (nomes usados pelo app/landing legados) */
  --bg:var(--kd-bg);
  --panel:var(--kd-panel);
  --panel2:var(--kd-panel-2);
  --border:var(--kd-border);
  --border2:var(--kd-border-2);
  --neon:var(--kd-neon);
  --blue:var(--kd-blue);
  --orange:var(--kd-orange);
  --yellow:var(--kd-yellow);
  --red:var(--kd-red);
  --gray:var(--kd-gray);
  --white:var(--kd-white);

  /* ── Superfícies translúcidas / glass ── */
  --kd-glass:rgba(19,19,26,.72);
  --kd-glass-strong:rgba(10,10,15,.92);
  --kd-neon-soft:rgba(0,255,136,.10);
  --kd-neon-line:rgba(0,255,136,.30);
  --kd-blue-soft:rgba(0,180,255,.10);

  /* ── Tipografia ── */
  --kd-font-mono:'JetBrains Mono','Courier New',monospace;
  --kd-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* ── Raio / elevação ── */
  --kd-radius-sm:8px;
  --kd-radius:12px;
  --kd-radius-lg:16px;
  --kd-radius-pill:100px;
  --kd-elev-1:0 6px 22px rgba(0,0,0,.35);
  --kd-elev-2:0 20px 50px rgba(0,0,0,.45);
  --kd-glow-neon:0 6px 26px rgba(0,255,136,.28);
  --kd-glow-blue:0 6px 26px rgba(0,180,255,.25);

  /* ── Motion (base para os FX e micro-interações) ── */
  --kd-ease:cubic-bezier(.22,.61,.36,1);
  --kd-ease-out:cubic-bezier(.16,1,.3,1);
  --kd-dur-fast:.18s;
  --kd-dur:.32s;
  --kd-dur-slow:.6s;
}

/* ════════════════════════════════════════════════════════════════════
   Primitivos de UI compartilhados
   ════════════════════════════════════════════════════════════════════ */

.kd-mono{font-family:var(--kd-font-mono)}
.kd-neon{color:var(--kd-neon)} .kd-blue{color:var(--kd-blue)} .kd-yellow{color:var(--kd-yellow)}

/* Botões */
.kd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--kd-font-mono);font-weight:700;font-size:13px;letter-spacing:.3px;
  padding:11px 20px;border-radius:var(--kd-radius-sm);cursor:pointer;
  border:1px solid transparent;text-transform:uppercase;text-decoration:none;
  transition:transform var(--kd-dur-fast) var(--kd-ease), filter var(--kd-dur-fast), border-color var(--kd-dur-fast), color var(--kd-dur-fast);
  will-change:transform;
}
.kd-btn-primary{background:var(--kd-neon);color:#04120b;box-shadow:var(--kd-glow-neon)}
.kd-btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.kd-btn-blue{background:var(--kd-blue);color:#04121a;box-shadow:var(--kd-glow-blue)}
.kd-btn-blue:hover{filter:brightness(1.08);transform:translateY(-1px)}
.kd-btn-ghost{background:transparent;border-color:var(--kd-border-2);color:var(--kd-white)}
.kd-btn-ghost:hover{border-color:var(--kd-neon);color:var(--kd-neon)}

/* Foco de teclado visível (acessibilidade) — compartilhado por landing/app/admin.
   Usa :focus-visible para não aparecer em cliques de mouse; outline não desloca layout. */
.kd-btn:focus-visible,.kd-pill:focus-visible{outline:2px solid var(--kd-neon);outline-offset:2px}

/* Pill / badge */
.kd-pill{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--kd-font-mono);
  background:var(--kd-neon-soft);border:1px solid var(--kd-neon-line);color:var(--kd-neon);
  font-size:12px;font-weight:600;padding:7px 14px;border-radius:var(--kd-radius-pill);
  text-transform:uppercase;letter-spacing:.5px;
}

/* Card base + variante com contorno neon */
.kd-card{
  background:var(--kd-panel);border:1px solid var(--kd-border);border-radius:var(--kd-radius);
  padding:24px;box-shadow:var(--kd-elev-1);
  transition:transform var(--kd-dur) var(--kd-ease), border-color var(--kd-dur);
}
.kd-card:hover{border-color:var(--kd-neon-line);transform:translateY(-4px)}

/* ════════════════════════════════════════════════════════════════════
   Suporte aos efeitos (ReactBits → vanilla). O JS (kartdata-fx.js)
   ativa via atributos data-fx-*; o CSS abaixo faz o trabalho visual.
   ════════════════════════════════════════════════════════════════════ */

/* Canvas de fundo (Hyperspeed / Threads / DotGrid / Particles) */
.kd-fx-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  pointer-events:none;z-index:0;
}
[data-fx-host]{position:relative}
[data-fx-host] > :not(.kd-fx-canvas){position:relative;z-index:1}

/* ShinyText — brilho varrendo o texto */
.kd-shiny{
  color:var(--kd-gray);
  background:linear-gradient(120deg,var(--kd-gray) 40%,var(--kd-white) 50%,var(--kd-gray) 60%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:kd-shine 4s linear infinite;
}
@keyframes kd-shine{to{background-position:-200% 0}}

/* GradientText — gradiente animado da marca */
.kd-gradient-text{
  background:linear-gradient(90deg,var(--kd-neon),var(--kd-blue),var(--kd-neon));
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:kd-gradient 5s linear infinite;
}
@keyframes kd-gradient{to{background-position:200% center}}

/* SplitText — revelação por caractere (JS envolve cada char em .kd-char
   e cada palavra em .kd-word para não quebrar no meio) */
.kd-word{display:inline-block;white-space:nowrap}
.kd-char{display:inline-block;opacity:0;transform:translateY(.5em);
  animation:kd-char-in .6s var(--kd-ease-out) forwards;animation-delay:var(--kd-d,0ms)}
@keyframes kd-char-in{to{opacity:1;transform:none}}

/* Reveal on scroll — entra ao aparecer no viewport (IntersectionObserver) */
[data-fx-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity var(--kd-dur-slow) var(--kd-ease-out), transform var(--kd-dur-slow) var(--kd-ease-out)}
[data-fx-reveal].kd-in{opacity:1;transform:none}

/* Spotlight — brilho radial que segue o mouse dentro do card */
/* Sem overflow:hidden — o brilho já fica contido no ::before (inset:0),
   e border-radius:inherit arredonda os cantos. Assim badges/selos que
   ultrapassam a borda do card (ex.: "MAIS ESCOLHIDO") não são cortados. */
[data-fx-spotlight]{position:relative}
[data-fx-spotlight]::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  border-radius:inherit;overflow:hidden;
  transition:opacity var(--kd-dur) var(--kd-ease);
  background:radial-gradient(320px circle at var(--kd-mx,50%) var(--kd-my,50%),
    rgba(0,255,136,.14),transparent 60%);
}
[data-fx-spotlight]:hover::before{opacity:1}
[data-fx-spotlight] > *{position:relative;z-index:1}

/* Magnet — o JS aplica translate; aqui só a transição de retorno */
[data-fx-magnet]{transition:transform var(--kd-dur) var(--kd-ease-out);will-change:transform}

/* BorderGlow — borda com gradiente cônico girando (ReactBits/BorderGlow).
   CSS puro, attribute-driven. Registra --kd-ba como <angle> p/ animar. */
@property --kd-ba{syntax:'<angle>';initial-value:0deg;inherits:false}
[data-fx-border-glow]{position:relative;isolation:isolate}
[data-fx-border-glow]::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--kd-ba),
    transparent 0deg, var(--kd-neon) 60deg, var(--kd-blue) 130deg,
    transparent 200deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  opacity:.55;
  transition:opacity var(--kd-dur) var(--kd-ease);
  animation:kd-ba-spin 5.5s linear infinite;
}
[data-fx-border-glow]:hover::after{opacity:1}
@keyframes kd-ba-spin{to{--kd-ba:360deg}}

@media (prefers-reduced-motion:reduce){
  .kd-shiny,.kd-gradient-text{animation:none}
  .kd-char{animation:none;opacity:1;transform:none}
  [data-fx-reveal]{opacity:1;transform:none;transition:none}
  [data-fx-magnet]{transition:none}
  [data-fx-border-glow]::after{animation:none}
}