/* Tela de entrada do NasLan NÔMADE: chuva binária no fundo, nome com glitch à esquerda e o acesso à direita. */
:root { --verde: #00FF41; --ciano: #00F0FF; --ciclo: 3.3s; --painel: 420px; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: var(--verde); }
body { font-family: "Share Tech Mono", Consolas, monospace; overflow-x: hidden; }
#chuva { position: fixed; inset: 0; width: 100%; height: 100%; opacity: .55; z-index: 0; }

.tela { position: relative; z-index: 1; min-height: 100%; display: flex; }

/* ---------- esquerda: o nome no meio do espaço que sobra ---------- */
.lado-logo { position: relative; flex: 1; display: grid; place-items: center; padding: 40px 24px; min-width: 0; }
.lado-logo::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 52% 36% at 50% 50%, rgba(0,0,0,.92) 0%, rgba(0,0,0,.75) 55%, rgba(0,0,0,0) 100%); }
.logo { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.marca { font-size: clamp(14px, 1.8vw, 34px); letter-spacing: .5em; margin-right: -.5em; margin-bottom: .2em;
  text-shadow: 0 0 .4em rgba(0,255,65,.6); }
.sub { font-size: clamp(10px, 1.25vw, 24px); letter-spacing: .5em; margin-right: -.5em; margin-top: .9em;
  text-shadow: 0 0 .4em rgba(0,255,65,.55); }

.glitch { position: relative; font-family: "Russo One", "Arial Black", sans-serif; font-size: clamp(56px, 10.5vw, 220px);
  line-height: 1.05; letter-spacing: .02em; padding: 0 .1em;
  text-shadow: 0 0 .03em #c8ffd6, 0 0 .08em rgba(0,255,65,.8), 0 0 .2em rgba(0,255,65,.35);
  animation: tremor var(--ciclo) infinite steps(1, end); }
.glitch::before, .glitch::after { content: attr(data-texto); position: absolute; inset: 0; padding: inherit; pointer-events: none; opacity: 0; }
.glitch::before { color: var(--ciano); mix-blend-mode: screen; text-shadow: none; animation: ciano var(--ciclo) infinite steps(1, end); }
.glitch::after  { color: var(--verde); text-shadow: 0 0 .1em rgba(0,255,65,.6); animation: verde var(--ciclo) infinite steps(1, end); }
.fatia { position: absolute; inset: 0; padding: inherit; pointer-events: none; opacity: 0; background: #000;
  animation: var(--anim) var(--ciclo) infinite steps(1, end); }
.f1 { --anim: fatia1; } .f2 { --anim: fatia2; } .f3 { --anim: fatia3; } .f4 { --anim: fatia4; }
.interferencia { position: absolute; inset: -6% -8%; pointer-events: none; opacity: 0;
  background:
    linear-gradient(transparent 0 18%, rgba(0,255,65,.9) 18% 18.6%, transparent 18.6% 47%,
                    rgba(0,240,255,.8) 47% 47.4%, transparent 47.4% 71%, rgba(0,255,65,.7) 71% 71.8%, transparent 71.8%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.55) 0 2px, transparent 2px 5px);
  animation: interferencia var(--ciclo) infinite steps(1, end); }

/* 0 → 90,9 % = 3 s parado; 90,9 → 100 % = 0,3 s de glitch */
@keyframes tremor {
  0%, 90.8% { transform: none; filter: none; }
  90.9% { transform: translateX(-.012em) skewX(-6deg); }
  92.6% { transform: translateX(.02em); filter: brightness(1.4); }
  94.3% { transform: translateX(-.006em) skewX(4deg); }
  96%   { transform: translateX(.01em); filter: brightness(.8); }
  97.7% { transform: translateX(-.015em); }
  99.4% { transform: none; filter: none; }
}
@keyframes ciano {
  0%, 90.8% { opacity: 0; transform: none; }
  90.9% { opacity: .9; transform: translate(-.035em, .01em); clip-path: inset(0 0 55% 0); }
  92.6% { opacity: .8; transform: translate(.05em, 0); clip-path: inset(30% 0 20% 0); }
  94.3% { opacity: .9; transform: translate(-.02em, -.01em); clip-path: inset(60% 0 0 0); }
  96%   { opacity: .7; transform: translate(.03em, 0); clip-path: inset(10% 0 60% 0); }
  97.7% { opacity: .8; transform: translate(-.04em, 0); clip-path: inset(45% 0 25% 0); }
  99.4% { opacity: 0; transform: none; }
}
@keyframes verde {
  0%, 90.8% { opacity: 0; transform: none; }
  90.9% { opacity: .85; transform: translate(.03em, 0); clip-path: inset(50% 0 10% 0); }
  92.6% { opacity: .9; transform: translate(-.045em, 0); clip-path: inset(0 0 70% 0); }
  94.3% { opacity: .8; transform: translate(.025em, 0); clip-path: inset(20% 0 45% 0); }
  96%   { opacity: .9; transform: translate(-.02em, 0); clip-path: inset(70% 0 5% 0); }
  97.7% { opacity: .7; transform: translate(.05em, 0); clip-path: inset(5% 0 80% 0); }
  99.4% { opacity: 0; transform: none; }
}
@keyframes fatia1 {
  0%, 90.8% { opacity: 0; transform: none; }
  90.9% { opacity: 1; clip-path: inset(12% 0 78% 0); transform: translateX(.09em); }
  94.3% { opacity: 1; clip-path: inset(40% 0 52% 0); transform: translateX(-.12em); }
  97.7% { opacity: 1; clip-path: inset(66% 0 26% 0); transform: translateX(.06em); }
  99.4% { opacity: 0; transform: none; }
}
@keyframes fatia2 {
  0%, 92.5% { opacity: 0; transform: none; }
  92.6% { opacity: 1; clip-path: inset(58% 0 33% 0); transform: translateX(-.08em); }
  96%   { opacity: 1; clip-path: inset(22% 0 70% 0); transform: translateX(.14em); }
  99.4% { opacity: 0; transform: none; }
}
@keyframes fatia3 {
  0%, 90.8% { opacity: 0; transform: none; }
  90.9% { opacity: 1; clip-path: inset(80% 0 12% 0); transform: translateX(-.05em); }
  92.6% { opacity: 0; }
  96%   { opacity: 1; clip-path: inset(48% 0 46% 0); transform: translateX(-.1em); }
  99.4% { opacity: 0; transform: none; }
}
@keyframes fatia4 {
  0%, 94.2% { opacity: 0; transform: none; }
  94.3% { opacity: 1; clip-path: inset(4% 0 88% 0); transform: translateX(.07em); }
  97.7% { opacity: 1; clip-path: inset(86% 0 6% 0); transform: translateX(-.09em); }
  99.4% { opacity: 0; transform: none; }
}
@keyframes interferencia {
  0%, 90.8% { opacity: 0; transform: none; }
  90.9% { opacity: .9; transform: translateY(0); }
  92.6% { opacity: .6; transform: translateY(-14%); }
  94.3% { opacity: .9; transform: translateY(9%); }
  96%   { opacity: .5; transform: translateY(-4%); }
  97.7% { opacity: .8; transform: translateY(16%); }
  99.4% { opacity: 0; transform: none; }
}
.marca, .sub { animation: piscar var(--ciclo) infinite steps(1, end); }
@keyframes piscar { 0%, 92.5% { opacity: 1; } 92.6% { opacity: .35; } 94.3% { opacity: 1; } 97.7% { opacity: .6; } 99.4% { opacity: 1; } }

/* ---------- direita: o acesso ---------- */
.lado-login { width: var(--painel); flex: none; display: flex; align-items: center; padding: 40px 36px;
  background: linear-gradient(180deg, rgba(0,12,4,.88), rgba(0,0,0,.92));
  border-left: 1px solid rgba(0,255,65,.35); box-shadow: -10px 0 40px rgba(0,255,65,.08);
  backdrop-filter: blur(2px); }
.caixa { width: 100%; }
.caixa h1 { margin: 0 0 6px; font-weight: 400; font-size: 22px; letter-spacing: .12em; text-transform: uppercase;
  text-shadow: 0 0 .4em rgba(0,255,65,.5); }
.dica { margin: 0 0 26px; color: rgba(0,255,65,.65); font-size: 14px; }
.caixa label { display: block; margin: 16px 0 6px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(0,255,65,.8); }
.caixa input[type=text], .caixa input[type=password] { width: 100%; padding: 12px 14px; font: 16px "Share Tech Mono", Consolas, monospace;
  color: #d6ffe0; background: rgba(0,0,0,.7); border: 1px solid rgba(0,255,65,.35); border-radius: 6px; outline: none;
  transition: border-color .15s, box-shadow .15s; }
.caixa input:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(0,255,65,.18), 0 0 14px rgba(0,255,65,.25); }
.caixa button { width: 100%; margin-top: 28px; padding: 13px; font: 16px "Share Tech Mono", Consolas, monospace; letter-spacing: .3em;
  text-transform: uppercase; color: #000; background: var(--verde); border: 0; border-radius: 6px; cursor: pointer;
  box-shadow: 0 0 18px rgba(0,255,65,.45); transition: filter .15s, box-shadow .15s; }
.caixa button:hover { filter: brightness(1.12); box-shadow: 0 0 26px rgba(0,255,65,.7); }
.caixa button:focus-visible { outline: 2px solid #c8ffd6; outline-offset: 3px; }
.erro { margin: 0 0 8px; padding: 10px 12px; border: 1px solid #ff4d4d; border-radius: 6px; color: #ff8080; background: rgba(60,0,0,.5); font-size: 14px; }
.rodape { margin: 34px 0 0; font-size: 12px; letter-spacing: .12em; color: rgba(0,255,65,.45); text-align: center; }

/* ---------- celular / tela estreita: nome em cima, acesso embaixo ---------- */
@media (max-width: 820px) {
  .tela { flex-direction: column; }
  .lado-logo { flex: none; padding: 48px 16px 24px; }
  .glitch { font-size: clamp(44px, 15vw, 120px); }
  .marca { font-size: 16px; } .sub { font-size: 11px; letter-spacing: .3em; margin-right: -.3em; }
  .lado-login { width: 100%; flex: 1; padding: 28px 16px 40px; border-left: 0; border-top: 1px solid rgba(0,255,65,.35); }
  .caixa { max-width: 420px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .glitch, .glitch::before, .glitch::after, .fatia, .interferencia, .marca, .sub { animation: none; }
}