/* ——————————
Cyber Login Theme (processor + neon bursts)
—————————— */

:root {
  --bg-0: #070707;
  --bg-1: #0d0d10;
  --grid: #1a1a1a;
  --trace: #7a0c12;
  --node: #a3121c;
  --electric: #e02424;
  --electric-2: #ff4b4b;
  --text: #e9e9ea;
  --muted: #b9b9bb;
  --error: #ff5c7c;
  --radius: 18px;
  --glass: rgba(12, 12, 14, 0.65);
  --glow: 0 0 18px rgba(224,36,36,.45), 0 0 50px rgba(224,36,36,.2);

  /* Lightning timing (staggered) */
  --zap-a: 7.5s;
  --zap-b: 8.6s;
  --zap-c: 9.4s;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(1400px 700px at 10% 10%, #0a1a30 0%, transparent 60%),
    radial-gradient(1200px 700px at 90% 90%, #061523 0%, transparent 60%),
    linear-gradient(160deg, var(--bg-0), var(--bg-1));
  font: 500 16px/1.5 ui-sans-serif, system-ui, Segoe UI, Roboto, Arial;
  overflow: clip;
}

/*******************
* Background layers
*******************/
.bg { position: fixed; inset: 0; z-index: -1; }
.bg-grid, .bg-circuit { position: absolute; inset: 0; }

/* Subtle blueprint grid */
.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(1200px 900px at 50% 50%, #000 60%, transparent);
  opacity: .25;
}

/* Circuit traces + nodes */
.bg-circuit::before,
.bg-circuit::after {
  content: ""; position: absolute; inset: -10% -10%;
  background:
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(39,176,255,.12) 34px 35px, transparent 35px 70px),
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(39,176,255,.12) 42px 43px, transparent 43px 86px);
  filter: drop-shadow(0 0 6px rgba(39,176,255,.15));
}
.bg-circuit::after {
  background-image:
    radial-gradient(circle at 10% 20%, rgba(124,211,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 72%, rgba(124,211,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 34%, rgba(124,211,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 90% 80%, rgba(124,211,255,.18) 0 2px, transparent 3px);
}

/*******************
* Lightning bursts (appear → flash → fade)
*******************/
.bg-lightning { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; pointer-events: none; }

.bolt {
  stroke: var(--electric);
  stroke-width: 2;
  fill: none;
  filter: url(#glow);
  stroke-dasharray: 14 20;
  /* Burst animation (mostly invisible, brief flash, fade away) */
  animation: zap var(--zap-a) linear infinite both;
}

/* Staggered timings for variety */
.bolt-a { animation-duration: var(--zap-a); animation-delay: .0s; }
.bolt-b { animation-duration: var(--zap-b); animation-delay: 1.3s; }
.bolt-c { animation-duration: var(--zap-c); animation-delay: 2.4s; }

@keyframes zap {
  /* idle/invisible */
  0%   { opacity: 0; stroke-dashoffset: 0;   filter: url(#glow); }
  60%  { opacity: 0; stroke-dashoffset: 60; }
  /* appear + ramp */
  68%  { opacity: .35; stroke: var(--electric);   stroke-width: 2;   }
  72%  { opacity: .95; stroke: var(--electric-2); stroke-width: 2.4; text-shadow: 0 0 12px var(--electric-2); }
  76%  { opacity: .55; stroke: var(--electric);   stroke-width: 2;   }
  /* fade away */
  84%  { opacity: .25; }
  92%  { opacity: .08; }
  100% { opacity: 0;   stroke-dashoffset: 120; }
}

/* Extra flare: container flashes very slightly during peak */
.bg-lightning {
  animation: flashField 9s ease-in-out infinite;
}
@keyframes flashField {
  0%, 58% { filter: none; }
  70%     { filter: drop-shadow(0 0 10px rgba(124,211,255,.25)) drop-shadow(0 0 26px rgba(39,176,255,.18)); }
  100%    { filter: none; }
}

/*******************
* Login Card
*******************/
.shell { display:flex; align-items:center; justify-content:center; height:100vh; }

.card {
  background: var(--glass);
  border: 2px solid var(--electric);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--glow);
  backdrop-filter: blur(12px);
  width: 100%;
  max-width: 360px;
  animation: pulseBorder 6s ease-in-out infinite;
}

@keyframes pulseBorder {
  0%,100% { box-shadow: 0 0 15px rgba(39,176,255,.4), 0 0 40px rgba(39,176,255,.2); }
  50%     { box-shadow: 0 0 25px rgba(124,211,255,.8), 0 0 60px rgba(39,176,255,.4); }
}

h1.brand {
  text-align:center;
  font-size: 2rem;
  color: var(--electric-2);
  margin-bottom: .2rem;
  text-shadow: 0 0 8px var(--electric);
}
h1.brand span { color: var(--electric); }

p.subtitle {
  text-align:center;
  font-size:.9rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

label.field {
  display:block;
  margin-bottom: 1rem;
}
label.field span {
  display:block;
  font-size:.8rem;
  margin-bottom:.3rem;
  color: var(--muted);
}
input {
  width: 100%;
  padding: .6rem .8rem;
  border-radius: 8px;
  border: 1px solid var(--grid);
  background: rgba(0,0,0,.3);
  color: var(--text);
  font-size: 1rem;
}
input:focus {
  outline: none;
  border-color: var(--electric);
  box-shadow: 0 0 10px rgba(39,176,255,.6);
}

button {
  width: 100%;
  padding: .7rem;
  font-size: 1rem;
  border-radius: 8px;
  border: none;
  background: var(--electric);
  color: #000;
  font-weight: 600;
  margin-top: 1rem;
  cursor:pointer;
  transition: background .2s, box-shadow .2s;
}
button:hover {
  background: var(--electric-2);
  box-shadow: 0 0 14px var(--electric-2);
}

/* Flash messages */
ul.flash {
  margin-top: 1rem;
  list-style: none;
  padding:0;
  color: var(--error);
  font-size:.9rem;
  text-align:center;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .bolt, .bg-lightning, .card { animation: none !important; }
}