/* HarpionTech Portal — identidade visual compartilhada com a landing */
:root {
  --bg: #080704;
  --bg-2: rgba(13, 11, 7, 0.9);
  --bg-3: rgba(24, 20, 12, 0.92);
  --accent: #F5A623;
  --accent-2: #FFD166;
  --accent-glow: rgba(245, 166, 35, 0.38);
  --accent-glow-soft: rgba(245, 166, 35, 0.13);
}

body {
  position: relative;
  isolation: isolate;
  background: #050505;
}

/* Mesma arquitetura visual do hero: arte-base + LED correndo nas linhas. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -3;
  background:
    linear-gradient(rgba(5, 5, 3, 0.32), rgba(5, 5, 3, 0.58)),
    url("../assets/background_hero.png") center / cover no-repeat;
  transform: scaleX(-1);
  filter: brightness(0.9) saturate(1.08);
}

/* LED correndo nas linhas — .led-sweep é injetado pelo bg.js em todas as
   páginas do portal. Container fixo segura a máscara; a banda de luz interna
   anima com transform (GPU/composited). A versão antiga animava
   background-position no body::after — não-composited, repintava a tela
   inteira a cada frame e travava/pulava no celular. */
.led-sweep {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask: url("../assets/background_hero.png") center / cover no-repeat;
          mask: url("../assets/background_hero.png") center / cover no-repeat;
  -webkit-mask-mode: luminance;
          mask-mode: luminance;
  mix-blend-mode: screen;
}

/* Geometria idêntica ao efeito original: gradiente pintado numa caixa de
   260vw (mesmo background-size: 260% 100% de antes) — é essa largura que
   deixa o feixe diagonal largo e suave em vez de um bloco. O percurso
   translateX(-320vw → 160vw) equivale ao background-position 200% → -100%. */
.led-sweep-band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 260vw;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255, 209, 102, 0.2) 44%,
    rgba(255, 246, 210, 0.5) 50%,
    rgba(245, 166, 35, 0.2) 56%,
    transparent 70%);
  transform: translateX(-320vw);
  animation: ledSweep 6s linear infinite;
  will-change: transform;
}

@keyframes ledSweep {
  from { transform: translateX(-320vw); }
  to   { transform: translateX(160vw); }
}

#particles-canvas {
  opacity: 0.62;
  mix-blend-mode: screen;
}

.bg-grid {
  background-image:
    linear-gradient(rgba(245, 166, 35, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 166, 35, 0.022) 1px, transparent 1px);
}

/* ── A barra não é uma faixa ──
   Esta folha carrega por último e vencia o que os painéis pediam: era daqui
   que saía o retângulo escuro do topo, não de admin.css nem de dashboard.css.
   Foi a mesma armadilha da altura da logo.

   Agora o desvanecimento da landing mora aqui, que é o lugar certo para uma
   decisão de identidade compartilhada: opaco atrás da marca, sumindo por
   volta de 96px. A barra deixa de terminar numa linha e passa a flutuar. */
.header {
  background: linear-gradient(to bottom,
    rgba(7, 6, 4, 0.92) 0%,
    rgba(7, 6, 4, 0.55) 46px,
    transparent 96px);
  border-bottom: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background 0.35s var(--ease, ease), backdrop-filter 0.35s var(--ease, ease);
}

/* Com conteúdo passando por baixo ela volta a ser sólida — senão o texto
   apareceria através do topo. Quem liga a classe é dashboard.js / admin.js. */
.header.rolado {
  background: rgba(7, 6, 4, 0.9);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* SEM backdrop-filter (2026-09-19). O card desfocava o fundo atrás de
   si, e com a grade técnica e o vento dourado passando por baixo o
   resultado era uma mancha borrada permanente no meio da tela — a
   queixa do Victor, e ele tem razão: o fundo daqui tem desenho, e
   desenho borrado incomoda mais do que fundo nenhum. O gradiente já é
   quase opaco, então a legibilidade não dependia do desfoque. */
.login-card {
  background:
    linear-gradient(155deg, rgba(22, 18, 10, 0.94), rgba(8, 7, 5, 0.92));
  box-shadow: 0 0 60px rgba(245, 166, 35, 0.07), 0 40px 80px rgba(0, 0, 0, 0.52);
}

/* Nova wordmark — mesma usada no header da landing. */
.login-logo {
  margin-bottom: 14px;
}

.login-logo img {
  width: min(100%, 240px);
  height: auto !important;
  object-fit: contain;
  filter: drop-shadow(0 5px 22px rgba(245, 166, 35, 0.26));
}

/* A altura vem de --logo-h, que cada painel define (admin.css, dashboard.css).
   O !important existia para vencer outra folha; o efeito colateral era que
   NENHUM painel conseguia mais mudar o tamanho da marca — as regras deles
   perdiam por ordem de carregamento. Variável resolve os dois: o !important
   continua ganhando a disputa, e o valor continua sendo de quem manda. */
.header-logo img {
  height: var(--logo-h, 56px) !important;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 18px rgba(245, 166, 35, 0.24));
}

@media (max-width: 1024px) {
  .led-sweep { opacity: 0.58; }
  .led-sweep-band { animation-duration: 8s; }
  #particles-canvas { opacity: 0.45; }
  .header-logo img { height: var(--logo-h-md, 48px) !important; width: auto; }
}

@media (max-width: 620px) {
  body::before {
    background-position: 58% center;
  }
  .led-sweep { opacity: 0.38; }
  .login-logo img { width: min(82vw, 230px); }
  .header-logo img { height: var(--logo-h-sm, 44px) !important; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .led-sweep { display: none; }
}