.lmm-preloader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: #312083;
  background: linear-gradient(135deg, #0f0523 90%, #000000 95%, #333333 100%);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  visibility: visible;
  transition: opacity .14s ease, visibility .14s ease;
}

.lmm-preloader.is-finished {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.lmm-preloader-dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lmm-preloader-scene {
  z-index: 1;
}

.lmm-preloader-scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(340px, 560px) minmax(420px, 590px);
  grid-template-areas: "brand visual";
  align-items: center;
  justify-content: center;
  gap: clamp(58px, 8vw, 140px);
  width: min(1240px, calc(100% - 72px));
  min-height: min(660px, 88vh);
}

.lmm-preloader-visual {
  position: relative;
  grid-area: visual;
  height: clamp(390px, 41vw, 560px);
}

.lmm-preloader-brain {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: clamp(-8px, 2vw, 24px);
  width: clamp(245px, 25vw, 365px);
  transform: translate3d(-50%, -90px, 0) scale(.92);
  transform-origin: 50% 84%;
  animation: lmmBrainSmoothBounce 1.68s cubic-bezier(.2, .82, .24, 1) .08s forwards;
  filter:
    drop-shadow(0 0 16px rgba(128, 228, 255, .68))
    drop-shadow(0 0 34px rgba(86, 171, 255, .46))
    drop-shadow(0 18px 36px rgba(0, 10, 50, .3));
  will-change: transform, opacity;
}

.lmm-preloader-brain img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.lmm-preloader-hand {
  position: absolute;
  z-index: 1;
  left: 51%;
  bottom: clamp(-34px, -2vw, -14px);
  width: clamp(340px, 34vw, 510px);
  transform: translate3d(-50%, 0, 0);
  filter:
    drop-shadow(0 0 14px rgba(122, 225, 255, .52))
    drop-shadow(0 20px 38px rgba(4, 8, 44, .28));
  user-select: none;
  pointer-events: none;
  will-change: transform, opacity;
}

.lmm-preloader-brand {
  grid-area: brand;
  align-self: center;
  justify-self: start;
  color: #dfeaff;
  text-align: left;
  text-transform: uppercase;
  line-height: .98;
  letter-spacing: 0;
  transform: translate3d(0, 0, 0);
  animation: lmmBrandIn .58s ease .2s both;
  text-shadow: 0 0 26px rgba(112, 209, 255, .26), 0 18px 38px rgba(6, 12, 55, .28);
  will-change: transform, opacity;
}

.lmm-preloader-brand span,
.lmm-preloader-brand strong {
  display: block;
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 800;
}

.lmm-preloader-brand span {
  font-size: clamp(44px, 4.8vw, 76px);
  letter-spacing: 0.1em;
}

.lmm-preloader-brand strong {
  margin-top: 10px;
  color: #6fd3ff;
  font-size: clamp(23px, 2.6vw, 41px);
  letter-spacing: 0.17em;
}

.lmm-preloader.is-exiting .lmm-preloader-brain {
  animation: lmmBrainExitTop .62s cubic-bezier(.64, 0, .28, 1) forwards;
}

.lmm-preloader.is-exiting .lmm-preloader-hand {
  animation: lmmHandExitRight .62s cubic-bezier(.64, 0, .28, 1) forwards;
}

.lmm-preloader.is-exiting .lmm-preloader-brand {
  animation: lmmBrandExitLeft .62s cubic-bezier(.64, 0, .28, 1) forwards;
}

@keyframes lmmBrandIn {
  from {
    opacity: 0;
    transform: translate3d(28px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lmmBrainSmoothBounce {
  0% {
    transform: translate3d(-50%, -132px, 0) scale(.82);
  }
  34% {
    transform: translate3d(-50%, 74px, 0) scale(1.035, .91);
  }
  48% {
    transform: translate3d(-50%, 18px, 0) scale(.98, 1.035);
  }
  62% {
    transform: translate3d(-50%, 60px, 0) scale(1.02, .955);
  }
  76% {
    transform: translate3d(-50%, 34px, 0) scale(.992, 1.012);
  }
  88% {
    transform: translate3d(-50%, 44px, 0) scale(1.006, .99);
  }
  100% {
    transform: translate3d(-50%, 40px, 0) scale(1);
  }
}

@keyframes lmmBrainExitTop {
  from {
    opacity: 1;
    transform: translate3d(-50%, 40px, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(-50%, -56vh, 0) scale(.9);
  }
}

@keyframes lmmHandExitRight {
  from {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(72vw, 0, 0);
  }
}

@keyframes lmmBrandExitLeft {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-58vw, 0, 0);
  }
}

@media (max-width: 980px) {
  .lmm-preloader-scene {
    grid-template-columns: minmax(260px, 380px) minmax(300px, 430px);
    grid-template-areas: "brand visual";
    gap: clamp(24px, 5vw, 50px);
    width: min(860px, calc(100% - 36px));
  }

  .lmm-preloader-visual {
    height: clamp(320px, 52vw, 430px);
  }

  .lmm-preloader-brand span {
    font-size: clamp(36px, 6vw, 56px);
  }

  .lmm-preloader-brand strong {
    font-size: clamp(23px, 3.8vw, 35px);
  }

  .lmm-preloader-brain {
    width: clamp(200px, 34vw, 285px);
  }

  .lmm-preloader-hand {
    width: clamp(280px, 44vw, 390px);
  }
}

@media (max-width: 680px) {
  .lmm-preloader-scene {
    grid-template-columns: 1fr;
    grid-template-areas:
      "visual"
      "brand";
    gap: 12px;
    width: min(420px, calc(100% - 28px));
    min-height: 88vh;
  }

  .lmm-preloader-visual {
    height: clamp(300px, 86vw, 385px);
    order: 1;
  }

  .lmm-preloader-brand {
    justify-self: center;
    text-align: center;
  }

  .lmm-preloader-brand span {
    font-size: clamp(32px, 10vw, 46px);
  }

  .lmm-preloader-brand strong {
    font-size: clamp(20px, 6.3vw, 29px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lmm-preloader-brain,
  .lmm-preloader-brand,
  .lmm-preloader.is-exiting .lmm-preloader-brain,
  .lmm-preloader.is-exiting .lmm-preloader-hand,
  .lmm-preloader.is-exiting .lmm-preloader-brand {
    animation: none;
  }

  .lmm-preloader-brain {
    transform: translate3d(-50%, 40px, 0) scale(1);
  }
}
