/* Mahina Menu v6.23: hydration-safe stacked-logo loading screen. */

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 2147483647;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.34s ease;
}

body::before {
  inset: 0;
  background-color: #e9e7e1;
  background-image: url("/mahina-logo-stacked.png");
  background-repeat: no-repeat;
  background-position: center calc(50% - 10px);
  background-size: min(42vw, 156px) auto;
  animation:
    mahina-loader-reveal 0.01s linear 0.18s forwards,
    mahina-loader-failsafe-hide 0.34s ease 8s forwards;
}

body::after {
  top: calc(50% + 62px);
  left: 50%;
  width: 48px;
  height: 1px;
  overflow: hidden;
  border-radius: 999px;
  background-color: rgba(20, 20, 20, 0.13);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    #171717 34%,
    #171717 66%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-position: -60px 0;
  background-size: 48px 1px;
  transform: translateX(-50%);
  animation:
    mahina-loader-reveal 0.01s linear 0.18s forwards,
    mahina-loader-sweep 1.35s cubic-bezier(0.65, 0, 0.35, 1) 0.18s
      infinite,
    mahina-loader-failsafe-hide 0.34s ease 8s forwards;
}

body[data-mahina-page-loaded="true"]::before,
body[data-mahina-page-loaded="true"]::after {
  opacity: 0;
  animation: none;
}

@keyframes mahina-loader-reveal {
  to {
    opacity: 1;
  }
}

@keyframes mahina-loader-sweep {
  0% {
    background-position: -60px 0;
  }
  55% {
    background-position: 0 0;
  }
  100% {
    background-position: 60px 0;
  }
}

@keyframes mahina-loader-failsafe-hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@media (max-width: 640px) {
  body::before {
    background-size: min(44vw, 142px) auto;
  }

  body::after {
    top: calc(50% + 57px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    transition: none;
  }

  body::after {
    animation:
      mahina-loader-reveal 0.01s linear 0.18s forwards,
      mahina-loader-failsafe-hide 0.01s linear 8s forwards;
    background-position: 0 0;
  }
}