/* ============================================================================
   LOGIN DO PAINEL - cena do lado escuro

   Servido por ServerModule.CustomFiles (login-adson.css?v=N): editar e dar F5
   ja vale. A cena e montada pelo login-adson.js, chamado no OnShow do form.

   Tema: corrida de rua + academia. Sem foto: tudo desenhado.
     .ar-cena-base      fundo preto com um leve degrade, para nao ficar chapado
     .ar-cena-pista     raias de pista de atletismo girando bem devagar
     .ar-cena-ecg       linha de batimento cardiaco cruzando a tela
     .ar-faisca         particulas subindo, como poeira de esforco
     .ar-cena-holofote  luz que segue o mouse - a parte interativa
   ========================================================================== */

.ar-cena {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.ar-cena-base {
  position: absolute; inset: 0;
  background: radial-gradient(130% 95% at 18% 8%, #1b1b20 0%, #0c0c0e 52%, #050506 100%);
}

/* luz que acompanha o cursor: e a variavel --mx/--my que o JS atualiza */
.ar-cena-holofote {
  position: absolute; inset: 0;
  background: radial-gradient(300px 300px at var(--mx, 30%) var(--my, 45%),
              rgba(224, 49, 43, .30), rgba(224, 49, 43, .08) 45%, transparent 68%);
  transition: opacity .4s ease;
}

/* raias da pista, giro lento no canto */
.ar-cena-pista {
  position: absolute;
  right: -20%; bottom: -32%;
  width: min(74%, 820px);
  opacity: .18;
  transform-origin: 50% 50%;
  animation: arGira 120s linear infinite;
}
@keyframes arGira { to { transform: rotate(360deg); } }

/* batimento: a linha se desenha, segura um instante e recomeca.
   So na metade da direita: cruzando a tela inteira ela passava por cima do
   paragrafo do hero (1280 e 1920). O texto fica a esquerda, com no maximo
   34ch; 460px ja passa dele em 1280, 1366 e 1920. */
.ar-cena-ecg {
  position: absolute;
  left: max(44%, 460px); right: 0; top: 50%;
  height: 140px;
  opacity: .55;
  /* nasce do escuro em vez de comecar cortada no meio da tela */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%);
}
.ar-cena-ecg path {
  fill: none;
  stroke: #e0312b;
  stroke-width: .004;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: arBatimento 5.2s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes arBatimento {
  0%        { stroke-dashoffset: 1; }
  62%, 100% { stroke-dashoffset: 0; }
}

/* poeira de esforco subindo */
.ar-faisca {
  position: absolute;
  bottom: -16px;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0;
  animation-name: arSobe;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.ar-faisca-vermelha { background: #e0312b; }
@keyframes arSobe {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
  10%  { opacity: .65; }
  85%  { opacity: .25; }
  100% { transform: translate3d(14px, -105vh, 0) scale(.35); opacity: 0; }
}

/* o conteudo desliza de leve com o mouse (parallax discreto) */
.ar-hero {
  transition: transform .45s cubic-bezier(.2, .8, .3, 1);
  will-change: transform;
}

/* quem pediu menos movimento no sistema nao ve animacao nenhuma */
@media (prefers-reduced-motion: reduce) {
  .ar-cena-pista, .ar-cena-ecg path, .ar-faisca { animation: none; }
  .ar-faisca { opacity: .18; }
  .ar-hero { transition: none; }
}

/* credito da softhouse, abaixo da linha do rodape do hero */
.ar-hero-credito {
  /* cinza escuro no preto nao se lia (contraste 2,4:1); 13px, o minimo da casa */
  font-size: 13px;
  color: #8A8F98;
  letter-spacing: .4px;
  margin-top: 4px;
}
.ar-hero-credito a { color: #C5CAD3; font-weight: 600; text-decoration: none; }
.ar-hero-credito a:hover { color: #e0312b; }

/* A marca d'agua sangra de proposito pelo canto (right -6%, bottom -12%).
   Com overflow hidden o .ar-hero virava caixa de rolagem com 60 a 130px
   escondidos, e a auditoria acusava conteudo cortado. clip corta igual, sem
   criar rolagem. Nenhum texto passa da caixa em 1280x720, 1366x768 e 1920x1080. */
.ar-login-hero .ar-hero { overflow: clip; }

/* titulo em Bebas com entrelinha .92: em tela larga a caixa da segunda linha
   encostava no texto de baixo (3px sobrepostos em 1920) */
.ar-login-hero .ar-hero-sub { margin-top: clamp(22px, 2vw, 34px); }