.loader {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.35rem;
  background: var(--page, var(--mist, #fbfbfd));
  font-family: Inter, "Helvetica Neue", sans-serif;
  animation: loader-out 0.4s ease 2.2s forwards;
}

.loader-mark {
  width: min(46vw, 12.5rem);
  height: auto;
  overflow: visible;
}

.loader-mark .node {
  transform-box: view-box;
}

.loader-mark .bar {
  transform-box: fill-box;
  transform-origin: center;
}

.node-n {
  transform-origin: 49.05% 14.12%;
  animation: node-n 0.85s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

.node-e {
  transform-origin: 86.56% 50.12%;
  animation: node-e 0.85s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) 0.08s both;
}

.node-s {
  transform-origin: 49.05% 86%;
  animation: node-s 0.85s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) 0.14s both;
}

.node-w {
  transform-origin: 13.33% 50.12%;
  animation: node-w 0.85s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) 0.05s both;
}

.arm { opacity: 0; }
.arm-nw { animation: arm-nw 0.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) 0.62s forwards; }
.arm-ne { animation: arm-ne 0.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) 0.7s forwards; }
.arm-sw { animation: arm-sw 0.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) 0.76s forwards; }
.arm-se { animation: arm-se 0.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) 0.84s forwards; }

.bar-a { animation: bar-a 0.42s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) 1.05s both; }
.bar-b { animation: bar-b 0.42s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) 1.14s both; }

.loader-slogan {
  margin: 0;
  opacity: 0;
  color: var(--primary, var(--blue, #0071e3));
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  animation: slogan-in 0.45s ease 1.55s forwards;
}

@keyframes node-n {
  from { opacity: 0; transform: translateY(-92px) rotate(-200deg) scale(0.28); }
  to { opacity: 1; transform: none; }
}

@keyframes node-e {
  from { opacity: 0; transform: translateX(92px) rotate(200deg) scale(0.28); }
  to { opacity: 1; transform: none; }
}

@keyframes node-s {
  from { opacity: 0; transform: translateY(92px) rotate(-200deg) scale(0.28); }
  to { opacity: 1; transform: none; }
}

@keyframes node-w {
  from { opacity: 0; transform: translateX(-92px) rotate(200deg) scale(0.28); }
  to { opacity: 1; transform: none; }
}

@keyframes arm-nw {
  from { opacity: 0; transform: translate(-18px, -16px); }
  to { opacity: 1; transform: none; }
}

@keyframes arm-ne {
  from { opacity: 0; transform: translate(18px, -16px); }
  to { opacity: 1; transform: none; }
}

@keyframes arm-sw {
  from { opacity: 0; transform: translate(-18px, 16px); }
  to { opacity: 1; transform: none; }
}

@keyframes arm-se {
  from { opacity: 0; transform: translate(18px, 16px); }
  to { opacity: 1; transform: none; }
}

@keyframes bar-a {
  from { opacity: 0; transform: translate(-34px, -26px); }
  to { opacity: 1; transform: none; }
}

@keyframes bar-b {
  from { opacity: 0; transform: translate(34px, 26px); }
  to { opacity: 1; transform: none; }
}

@keyframes slogan-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes loader-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader {
    animation: none;
    opacity: 0;
    visibility: hidden;
  }
}