:root {
  --loader-overlay: #ffffff;
  --loader-ink: #1a1815;
  --loader-muted: #6b6760;
  --loader-accent: #2563eb;
  --loader-grid: #e5e5e5;
}

body.is-page-loading {
  overflow: hidden;
}

.page-loader[hidden],
.download-loader[hidden] {
  display: none !important;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--loader-overlay);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.42s ease, visibility 0.42s ease;
}

.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader svg {
  display: block;
  overflow: visible;
}

.page-loader__label {
  color: var(--loader-muted);
  font-size: 0.78rem;
  font-family: var(--font-mono, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace);
  letter-spacing: 0.12em;
  text-transform: lowercase;
}

.page-loader__iter-wrap {
  color: var(--loader-accent);
}

.page-loader--eye svg {
  width: 240px;
  height: 110px;
}

.page-loader--eye .frame-stroke {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: loaderEyeDrawFrame 2.4s ease-in-out infinite;
}

.page-loader--eye .glint {
  animation: loaderEyeGlintSweep 2.4s ease-in-out infinite;
  opacity: 0;
}

@keyframes loaderEyeDrawFrame {
  0% { stroke-dashoffset: 500; }
  30% { stroke-dashoffset: 0; }
  80% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -500; }
}

@keyframes loaderEyeGlintSweep {
  0%, 32% {
    opacity: 0;
    transform: translateX(-22px);
  }

  42% {
    opacity: 0.9;
  }

  62% {
    opacity: 0.9;
    transform: translateX(22px);
  }

  72%, 100% {
    opacity: 0;
    transform: translateX(22px);
  }
}

.page-loader--build svg {
  width: 320px;
  height: 240px;
}

.page-loader--build .bg-grid {
  opacity: 0;
  animation: loaderBuildGridFade 2.5s ease-out infinite;
}

.page-loader--build .building-stroke {
  stroke-dasharray: 720;
  stroke-dashoffset: 720;
  animation: loaderBuildDrawBuilding 2.5s ease-in-out infinite;
}

.page-loader--build .windows {
  opacity: 0;
  animation: loaderBuildWindowsFade 2.5s ease-out infinite;
}

.page-loader--build .orbit-stroke {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: loaderBuildDrawOrbit 2.5s ease-in-out infinite;
}

.page-loader--build .orbit-stroke.o2 {
  animation-delay: 0.08s;
}

.page-loader--build .orbit-stroke.o3 {
  animation-delay: 0.16s;
}

.page-loader--build .electron {
  opacity: 0;
  animation: loaderBuildElectronFade 2.5s ease-in-out infinite;
}

.page-loader--build .nucleus {
  opacity: 0;
  animation: loaderBuildNucleusFade 2.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.page-loader--build .nucleus-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: loaderBuildNucleusPulse 1.6s ease-out infinite;
  opacity: 0;
}

.page-loader--build .scanline {
  opacity: 0;
  animation: loaderBuildScanSweep 2.5s ease-in-out infinite;
}

.page-loader--build .readout {
  opacity: 0;
  animation: loaderBuildReadoutFade 2.5s ease-out infinite;
}

@keyframes loaderBuildGridFade {
  0% { opacity: 0; }
  10%, 88% { opacity: 0.22; }
  100% { opacity: 0; }
}

@keyframes loaderBuildDrawBuilding {
  0%, 5% { stroke-dashoffset: 720; }
  32% { stroke-dashoffset: 0; }
  88% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes loaderBuildWindowsFade {
  0%, 32% { opacity: 0; }
  42%, 88% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes loaderBuildDrawOrbit {
  0%, 35% { stroke-dashoffset: 800; }
  55% { stroke-dashoffset: 0; }
  88% {
    stroke-dashoffset: 0;
    opacity: 0.55;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes loaderBuildElectronFade {
  0%, 50% { opacity: 0; }
  58%, 88% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes loaderBuildNucleusFade {
  0%, 30% { opacity: 0; }
  40%, 88% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes loaderBuildNucleusPulse {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  20% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}

@keyframes loaderBuildScanSweep {
  0%, 65% {
    opacity: 0;
    transform: translateY(-60px);
  }

  70% {
    opacity: 0.85;
  }

  87% {
    opacity: 0.85;
    transform: translateY(180px);
  }

  92%, 100% {
    opacity: 0;
    transform: translateY(180px);
  }
}

@keyframes loaderBuildReadoutFade {
  0%, 40% { opacity: 0; }
  50%, 88% { opacity: 0.6; }
  100% { opacity: 0; }
}

.page-loader--mount svg {
  width: 280px;
  height: 180px;
}

.page-loader--mount .mount-stroke {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: loaderMountDraw 2.5s ease-in-out infinite;
}

.page-loader--mount .milestone {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.page-loader--mount .ms1 {
  animation: loaderMountMs1 2.5s ease-out infinite;
}

.page-loader--mount .ms2 {
  animation: loaderMountMs2 2.5s ease-out infinite;
}

.page-loader--mount .ms3 {
  animation: loaderMountMs3 2.5s ease-out infinite;
}

.page-loader--mount .summit {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: loaderMountSummit 2.5s ease-out infinite;
}

.page-loader--mount .summit-ring {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: loaderMountPulse 2.5s ease-out infinite;
}

.page-loader--mount .readout {
  opacity: 0;
  animation: loaderMountReadout 2.5s ease-out infinite;
}

@keyframes loaderMountDraw {
  0% { stroke-dashoffset: 520; }
  30% { stroke-dashoffset: 0; }
  88% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes loaderMountMs1 {
  0%, 38% {
    opacity: 0;
    transform: scale(0);
  }

  44%, 88% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes loaderMountMs2 {
  0%, 48% {
    opacity: 0;
    transform: scale(0);
  }

  54%, 88% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes loaderMountMs3 {
  0%, 58% {
    opacity: 0;
    transform: scale(0);
  }

  64%, 88% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes loaderMountSummit {
  0%, 65% {
    opacity: 0;
    transform: scale(0);
  }

  70%, 88% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes loaderMountPulse {
  0%, 65% {
    opacity: 0;
    transform: scale(0.4);
  }

  72% {
    opacity: 0.7;
    transform: scale(0.6);
  }

  85%, 100% {
    opacity: 0;
    transform: scale(2.6);
  }
}

@keyframes loaderMountReadout {
  0%, 30% { opacity: 0; }
  40%, 88% { opacity: 0.6; }
  100% { opacity: 0; }
}

.page-loader--opt svg {
  width: 180px;
  height: 180px;
}

.page-loader-opt-particle {
  fill: var(--loader-ink);
}

.page-loader-opt-center-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: loaderOptPulse 2s ease-in-out infinite;
}

@keyframes loaderOptPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }

  50% {
    opacity: 0;
    transform: scale(2.1);
  }
}

.download-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 30, 0.35);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.download-loader.is-visible {
  opacity: 1;
  visibility: visible;
}

.download-loader__modal {
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: 10px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.download-loader__modal svg {
  width: 110px;
  height: 140px;
  overflow: visible;
}

.download-loader__label {
  margin-top: 14px;
  color: var(--loader-ink);
  font-size: 0.82rem;
  font-family: var(--font-mono, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace);
  letter-spacing: 0.08em;
}

.download-loader__sublabel {
  margin-top: 4px;
  color: var(--loader-muted);
  font-size: 0.7rem;
  font-family: var(--font-mono, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace);
  letter-spacing: 0.05em;
}

.download-loader__dots {
  display: inline-flex;
  gap: 0.1rem;
}

.download-loader__dots span {
  opacity: 0.2;
  animation: loaderDocDot 1.2s infinite;
}

.download-loader__dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.download-loader__dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes loaderDocDot {
  0%, 80%, 100% { opacity: 0.2; }
  40% { opacity: 1; }
}

.download-loader .doc-outline {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: loaderDocDraw 1.8s ease-in-out infinite;
}

.download-loader .doc-line {
  opacity: 0;
  transform-origin: left center;
  transform-box: fill-box;
  animation: loaderDocLineCycle 1.8s ease-out infinite;
}

.download-loader .doc-line:nth-of-type(1) { animation-delay: 0s; }
.download-loader .doc-line:nth-of-type(2) { animation-delay: 0.05s; }
.download-loader .doc-line:nth-of-type(3) { animation-delay: 0.1s; }
.download-loader .doc-line:nth-of-type(4) { animation-delay: 0.15s; }
.download-loader .doc-line:nth-of-type(5) { animation-delay: 0.2s; }
.download-loader .doc-line:nth-of-type(6) { animation-delay: 0.25s; }
.download-loader .doc-line:nth-of-type(7) { animation-delay: 0.3s; }
.download-loader .doc-line:nth-of-type(8) { animation-delay: 0.35s; }
.download-loader .doc-line:nth-of-type(9) { animation-delay: 0.4s; }
.download-loader .doc-line:nth-of-type(10) { animation-delay: 0.45s; }

.download-loader .arrow-grp {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: loaderDocArrowReady 1.8s ease-out infinite;
}

@keyframes loaderDocDraw {
  0% { stroke-dashoffset: 320; }
  18% { stroke-dashoffset: 0; }
  92% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes loaderDocLineCycle {
  0%, 18% {
    opacity: 0;
    transform: scaleX(0);
  }

  50%, 92% {
    opacity: 1;
    transform: scaleX(1);
  }

  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

@keyframes loaderDocArrowReady {
  0%, 65% {
    opacity: 0;
    transform: scale(0.5);
  }

  72% {
    opacity: 1;
    transform: scale(1.15);
  }

  80% {
    opacity: 1;
    transform: scale(1);
  }

  88% {
    opacity: 1;
    transform: scale(1.1);
  }

  94% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader *,
  .download-loader * {
    animation: none !important;
    transition: none !important;
  }
}