/*
 * The Divergent loader: the logo assembling itself. The hexagon core pulses,
 * the five traces draw outward from it, and the nodes land at their ends.
 *
 * One stylesheet, two users: the preloader inside #root in index.html (shown
 * before the JavaScript arrives, replaced the moment React mounts), and the
 * <Loader /> component (src/components/Loader.tsx) that React shows while a
 * page's code loads. It is a plain file in public/ and linked from index.html
 * because the CSP allows no inline styles.
 */

.dn-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  animation: dn-loader-in 0.3s ease both;
}

.dn-loader--screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #ffffff;
}

.dn-loader--inline {
  min-height: 60vh;
}

.dn-loader__mark {
  width: 88px;
  height: 80px;
  overflow: visible;
}

.dn-loader__core {
  fill: #0b1d3d;
  transform-box: fill-box;
  transform-origin: center;
  animation: dn-loader-core 2s ease-in-out infinite;
}

.dn-loader__t {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Every trace grows out of the hexagon core, which sits at (27, 50). */
  transform-box: view-box;
  transform-origin: 27px 50px;
  transform: scale(0);
  animation: dn-loader-grow 2s cubic-bezier(0.6, 0, 0.2, 1) infinite both;
}

.dn-loader__n {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: dn-loader-node 2s cubic-bezier(0.3, 1.5, 0.6, 1) infinite both;
}

.dn-loader__navy {
  stroke: #0b1d3d;
  fill: #0b1d3d;
}

.dn-loader__blue {
  stroke: #0a84ff;
  fill: #0a84ff;
}

.dn-loader__n.dn-loader__navy,
.dn-loader__n.dn-loader__blue {
  stroke: none;
}

/* The centre trace leads, the inner pair follows, the outer pair last. */
.dn-loader__d1 {
  animation-delay: 0s;
}

.dn-loader__d2 {
  animation-delay: 0.1s;
}

.dn-loader__d3 {
  animation-delay: 0.2s;
}

.dn-loader__name {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #5d6b82;
  animation: dn-loader-name 2s ease-in-out infinite;
}

@keyframes dn-loader-in {
  from {
    opacity: 0;
  }
}

@keyframes dn-loader-core {
  0%,
  100% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.18);
  }
  40% {
    transform: scale(1);
  }
}

@keyframes dn-loader-grow {
  0%,
  10% {
    transform: scale(0);
    opacity: 1;
  }
  45%,
  78% {
    transform: scale(1);
    opacity: 1;
  }
  95%,
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes dn-loader-node {
  0%,
  38% {
    transform: scale(0);
    opacity: 1;
  }
  50%,
  78% {
    transform: scale(1);
    opacity: 1;
  }
  95%,
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes dn-loader-name {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

/* No drawing for visitors who asked for less motion: the whole mark, breathing. */
@media (prefers-reduced-motion: reduce) {
  .dn-loader__t,
  .dn-loader__n,
  .dn-loader__core {
    animation: none;
    transform: none;
  }

  .dn-loader__mark {
    animation: dn-loader-name 2s ease-in-out infinite;
  }
}