/*
  Ultron landing circuit — radial topology (B layout)
  Resting state: traces barely visible scaffolding, nodes invisible.
  Discharge events bring the grid alive briefly.
  HUD telemetry removed per design: lightning-from-core aesthetic is mythic,
  not chrome.
*/

/* ── Container ─────────────────────────────────────────────────────────── */
.landing-circuit {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #0a0612;
  pointer-events: none;
  overflow: hidden;
}

.landing-circuit__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Traces (resting state — barely visible) ───────────────────────────── */
/* Resting trace — barely visible scaffolding */
.trace {
  fill: none;
  stroke: #8b5cf6;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.05;
  transition: opacity 1.4s ease-out;
  vector-effect: non-scaling-stroke;
}

/* Discharge layers (created by JS) — keep stroke width constant under
   the horizontal scale on .circuit-scale */
.spark-halo, .spark-head {
  vector-effect: non-scaling-stroke;
}

/* When a spark recently passed, trace is in afterglow state */
.trace.is-afterglow {
  opacity: 0.18;
  transition: opacity 0s;  /* instant ON; fade-out via class removal + transition */
}

/* Nodes — fully invisible, used only as adjacency anchors in JS */
.node {
  fill: transparent;
  stroke: none;
  opacity: 0;
  pointer-events: none;
}

/* ── Page shell ────────────────────────────────────────────────────────── */
.auth-page {
  position: relative;
  background: #0a0612;
  min-height: 100vh;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

/* Hero — absolute centered cluster, never scrolls */
.landing-hero {
  position: fixed !important;
  inset: 0;
  z-index: 10;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  pointer-events: none;
}

.landing-hero > * {
  pointer-events: auto;
}

/* Logo wrapper for breathing + shimmer ring */
.landing-logo-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--u-space-5);
}

/* Logo — STATIC baseline. No continuous animation. The reactor sits
   quiescent until lightning strikes. */
.landing-logo {
  width: 76px;
  height: 76px;
  color: var(--u-primary);
  margin-bottom: 0 !important;
  opacity: 0.75;
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.35));
}

/* On strike: flare bright, then fade slowly. Triggered by JS toggling
   .is-pulse on .landing-logo-wrap (with class re-toggle for repeat strikes). */
.landing-logo-wrap.is-pulse .landing-logo {
  animation: ultronFlare 1100ms ease-out 1;
}

@keyframes ultronFlare {
  0%   { opacity: 0.75; filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.35)); }
  6%   { opacity: 1.00; filter: drop-shadow(0 0 56px rgba(219, 234, 254, 1.00)); }
  100% { opacity: 0.75; filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.35)); }
}


/* Wordmark + tagline + button — identical to before but no margins eat the center */
.landing-wordmark {
  margin: 0 0 var(--u-space-3);
}

.landing-tagline {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--u-text-muted);
  margin: 0 0 var(--u-space-7);
  opacity: 0.7;
}

/* Drop sub-tagline if it ever renders */
.landing-sub { display: none !important; }

/* Drop footer entirely */
.landing-footer { display: none !important; }

/* CTA: ENTER button — smaller than u-btn--lg, monospaced, sci-fi vibe */
.landing-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--u-space-3);
}

.landing-enter-btn {
  font-family: var(--u-font-display, 'JetBrains Mono', 'SF Mono', Consolas, monospace);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: 13px;
  padding: 12px 32px;
  min-width: 160px;
  border-radius: 4px;
}

.landing-register-link {
  font-family: var(--u-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--u-text-muted);
  opacity: 0.6;
  text-decoration: none;
  transition: opacity 0.2s, color 0.2s;
}

.landing-register-link:hover {
  opacity: 1;
  color: var(--u-text-secondary);
}

/* Reduced motion: kill animation, leave static layout */
@media (prefers-reduced-motion: reduce) {
  .trace, .node, .landing-logo {
    transition: none !important;
    animation: none !important;
  }
}

/* Mobile — keep cluster centered, scale down slightly */
@media (max-width: 768px) {
  .landing-logo { width: 60px; height: 60px; }
  .landing-wordmark { font-size: 36px !important; }
  .landing-tagline { font-size: 11px; }
}