html {
  color-scheme: dark;
  min-height: 100%;
}

body.signal-gate-page {
  --bg: #070a0d;
  --bg-2: #10131b;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(80, 210, 255, 0.13), transparent 34%),
    radial-gradient(circle at 52% 56%, rgba(95, 255, 210, 0.08), transparent 40%),
    linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 100%);
  color: #eef8ff;
  cursor: default;
  user-select: none;
  font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
}

.signal-gate-shell {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.archive-reactor {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.72;
  mix-blend-mode: screen;
  transition: opacity 800ms ease, filter 800ms ease, transform 280ms ease;
}

.archive-reactor::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 52% 52%, rgba(70, 255, 209, 0.20), transparent 0 4%, transparent 14%),
    radial-gradient(circle at 50% 54%, rgba(60, 140, 255, 0.18), transparent 0 7%, transparent 22%),
    conic-gradient(
      from 210deg at 50% 55%,
      transparent 0deg,
      rgba(0, 255, 210, 0.10) 18deg,
      transparent 34deg,
      transparent 116deg,
      rgba(155, 88, 255, 0.12) 134deg,
      transparent 152deg,
      transparent 225deg,
      rgba(0, 170, 255, 0.10) 246deg,
      transparent 270deg
    );
  filter: blur(18px);
  animation: archive-reactor-breathe 9s ease-in-out infinite;
}

.archive-reactor::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.34;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 50%, rgba(0, 0, 0, 0.06) 50%) 0 0 / 100% 4px,
    radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.34) 100%);
  mix-blend-mode: soft-light;
}

.archive-reactor.focus-mode {
  opacity: 0.78;
  filter: saturate(1.18);
}

.archive-reactor-disabled .archive-reactor,
.archive-reactor-paused .archive-reactor {
  opacity: 0;
  visibility: hidden;
}

.archive-reactor-paused .archive-reactor,
.archive-reactor-paused .archive-reactor *,
.archive-reactor-paused .archive-reactor::before,
.archive-reactor-paused .archive-reactor::after {
  animation-play-state: paused !important;
  transition-duration: 0.001ms !important;
}

.archive-reactor-ring,
.archive-reactor-alignment {
  position: absolute;
  left: 54%;
  top: 49%;
  border-radius: 50%;
  border: 1px solid rgba(150, 255, 230, 0.12);
  transform: translate(-50%, -50%);
  filter: blur(0.3px) drop-shadow(0 0 12px rgba(100, 255, 220, 0.14));
  opacity: 0.34;
}

.archive-reactor-ring-a {
  width: 28vw;
  height: 28vw;
  min-width: 260px;
  min-height: 260px;
  animation: archive-reactor-orbit-a 42s linear infinite;
}

.archive-reactor-ring-b {
  width: 40vw;
  height: 40vw;
  min-width: 420px;
  min-height: 420px;
  border-color: rgba(140, 180, 255, 0.08);
  opacity: 0.2;
  animation: archive-reactor-orbit-b 68s linear infinite reverse;
}

.archive-reactor-ring-c {
  width: 58vw;
  height: 58vw;
  min-width: 620px;
  min-height: 620px;
  border-color: rgba(220, 140, 255, 0.06);
  opacity: 0.14;
  animation: archive-reactor-orbit-c 120s linear infinite;
}

.archive-reactor-depth {
  position: absolute;
  inset: -10%;
  filter: blur(90px);
  opacity: 0.22;
}

.archive-reactor-depth-a {
  background: radial-gradient(circle at 34% 44%, rgba(0, 255, 210, 0.14), transparent 28%);
  animation: archive-reactor-depth-a 34s ease-in-out infinite;
}

.archive-reactor-depth-b {
  background: radial-gradient(circle at 66% 56%, rgba(70, 120, 255, 0.14), transparent 32%);
  animation: archive-reactor-depth-b 48s ease-in-out infinite;
}

.archive-reactor-depth-c {
  background: radial-gradient(circle at 52% 70%, rgba(180, 90, 255, 0.10), transparent 30%);
  animation: archive-reactor-depth-c 60s ease-in-out infinite;
}

.archive-reactor-eye {
  position: absolute;
  left: 54%;
  top: 49%;
  width: 9vw;
  height: 4vw;
  min-width: 90px;
  min-height: 40px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.8) 0 4%, rgba(120, 255, 240, 0.20) 10%, transparent 40%),
    radial-gradient(ellipse at center, rgba(130, 220, 255, 0.08), transparent 70%);
  filter: blur(8px);
  animation: archive-reactor-eye-awaken 95s ease-in-out infinite;
}

.archive-reactor-alignment {
  width: 34vw;
  height: 34vw;
  min-width: 330px;
  min-height: 330px;
  opacity: 0;
  border-color: rgba(180, 255, 235, 0.24);
  transition: opacity 700ms ease;
}

.archive-reactor-alignment-2 {
  width: 47vw;
  height: 47vw;
  min-width: 470px;
  min-height: 470px;
  border-style: dashed;
}

.archive-reactor-aligning .archive-reactor-alignment {
  opacity: 0.34;
}

.archive-reactor-core {
  position: absolute;
  left: 54%;
  top: 49%;
  width: 8vw;
  height: 8vw;
  min-width: 90px;
  min-height: 90px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.78;
  background:
    radial-gradient(circle, rgba(220, 255, 255, 0.88) 0 2%, rgba(85, 255, 215, 0.58) 3% 8%, rgba(45, 145, 255, 0.22) 12%, transparent 54%);
  filter: blur(8px);
  transition: transform 420ms ease, filter 420ms ease, opacity 420ms ease;
  animation: archive-reactor-core-pulse 7s ease-in-out infinite;
}

.archive-reactor-eclipse {
  position: absolute;
  left: 54%;
  top: 49%;
  width: 17vw;
  height: 17vw;
  min-width: 170px;
  min-height: 170px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.12;
  background: radial-gradient(circle, rgba(110, 255, 225, 0.22), transparent 58%);
  filter: blur(24px);
}

.archive-reactor-grid {
  position: absolute;
  left: 0;
  right: 0;
  height: 42%;
  opacity: 0.16;
  background:
    linear-gradient(90deg, rgba(70, 255, 220, 0.18) 1px, transparent 1px) 0 0 / 82px 100%,
    linear-gradient(0deg, rgba(130, 170, 255, 0.15) 1px, transparent 1px) 0 0 / 100% 38px;
  animation: archive-reactor-grid-flow 14s linear infinite;
}

.archive-reactor-grid-floor {
  bottom: -7%;
  transform: perspective(600px) rotateX(62deg);
  transform-origin: bottom;
}

.archive-reactor-grid-ceiling {
  top: -8%;
  transform: perspective(600px) rotateX(-62deg);
  transform-origin: top;
}

.archive-reactor-dust {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(180, 255, 240, 0.7);
  box-shadow: 0 0 12px rgba(120, 255, 230, 0.45);
  opacity: 0.18;
  animation: archive-reactor-dust-float linear infinite;
}

.archive-reactor-dust:nth-child(1) { left: 12%; top: 22%; animation-duration: 28s; animation-delay: -3s; }
.archive-reactor-dust:nth-child(2) { left: 22%; top: 68%; animation-duration: 34s; animation-delay: -12s; }
.archive-reactor-dust:nth-child(3) { left: 38%; top: 32%; animation-duration: 40s; animation-delay: -8s; }
.archive-reactor-dust:nth-child(4) { left: 61%; top: 18%; animation-duration: 31s; animation-delay: -18s; }
.archive-reactor-dust:nth-child(5) { left: 73%; top: 58%; animation-duration: 36s; animation-delay: -4s; }
.archive-reactor-dust:nth-child(6) { left: 84%; top: 38%; animation-duration: 42s; animation-delay: -21s; }
.archive-reactor-dust:nth-child(7) { left: 47%; top: 76%; animation-duration: 38s; animation-delay: -9s; }
.archive-reactor-dust:nth-child(8) { left: 15%; top: 49%; animation-duration: 33s; animation-delay: -15s; }

.signal-gate-auth-active .archive-reactor {
  opacity: 0.9;
}

@keyframes archive-reactor-breathe {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.72; }
  50% { transform: scale(1.06) rotate(1deg); opacity: 0.95; }
}

@keyframes archive-reactor-orbit-a {
  from { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  to { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

@keyframes archive-reactor-orbit-b {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes archive-reactor-orbit-c {
  from { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  to { transform: translate(-50%, -50%) rotate(-360deg) scale(1.02); }
}

@keyframes archive-reactor-depth-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.18; }
  50% { transform: translate3d(6%, -4%, 0) scale(1.12); opacity: 0.35; }
}

@keyframes archive-reactor-depth-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.16; }
  50% { transform: translate3d(-5%, 5%, 0) scale(1.10); opacity: 0.32; }
}

@keyframes archive-reactor-depth-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.12; }
  50% { transform: translate3d(0, -7%, 0) scale(1.16); opacity: 0.28; }
}

@keyframes archive-reactor-eye-awaken {
  0%, 92%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.86); }
  95% { opacity: 0.2; transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes archive-reactor-core-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.72; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.94; }
}

@keyframes archive-reactor-grid-flow {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 0, 0 38px; }
}

@keyframes archive-reactor-dust-float {
  0% { transform: translate3d(0, 0, 0) scale(0.8); opacity: 0.08; }
  50% { opacity: 0.28; }
  100% { transform: translate3d(20vw, -18vh, 0) scale(1.15); opacity: 0.04; }
}

@media (prefers-reduced-motion: reduce) {
  .archive-reactor,
  .archive-reactor *,
  .archive-reactor::before,
  .archive-reactor::after {
    animation: none !important;
  }
}