.loader {
  display: none;
}

.is-loading .loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  color: var(--ink);
  animation: loader-failsafe 0.4s ease 6s forwards;
}

.loader__bg {
  position: absolute;
  inset: 0;
  background: var(--page);
}

.loader__mark {
  position: relative;
  width: 72px;
  height: auto;
  aspect-ratio: 56.553 / 49;
  overflow: visible;
}

.loader__top,
.loader__bottom {
  animation: 1.4s infinite;
}

.loader__top {
  animation-name: loader-top;
}

.loader__bottom {
  animation-name: loader-bottom;
}

@keyframes loader-top {
  0% {
    transform: translate(-7px, -7px);
    opacity: 0.45;
    animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
  }

  40% {
    transform: translate(0.6px, 0.6px);
    opacity: 1;
    animation-timing-function: ease-out;
  }

  48%,
  72% {
    transform: none;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }

  100% {
    transform: translate(-7px, -7px);
    opacity: 0.45;
  }
}

@keyframes loader-bottom {
  0% {
    transform: translate(7px, 7px);
    opacity: 0.45;
    animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
  }

  40% {
    transform: translate(-0.6px, -0.6px);
    opacity: 1;
    animation-timing-function: ease-out;
  }

  48%,
  72% {
    transform: none;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }

  100% {
    transform: translate(7px, 7px);
    opacity: 0.45;
  }
}

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

@media (max-width: 767px) {
  .loader__mark {
    width: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader__top,
  .loader__bottom {
    animation: none;
  }
}