/* 元LoftLoaderの白背景・緑の3点と終了タイミングを、専用クラスで再現する。 */
.garden-motion-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: auto;
}
.garden-motion-loader__background {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 1;
  will-change: opacity;
}
.garden-motion-loader__dots {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 60px;
  color: #598546;
  transform: translate(-50%, -50%);
}
.garden-motion-loader__dots::before,
.garden-motion-loader__dots::after,
.garden-motion-loader__dots > span {
  content: '';
  position: absolute;
  top: 50%;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  opacity: .2;
  transform: translateY(-50%);
  animation: garden-motion-light-up 1.5s linear infinite;
}
.garden-motion-loader__dots::before { left: 0; }
.garden-motion-loader__dots > span {
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: .5s;
}
.garden-motion-loader__dots::after { right: 0; animation-delay: 1s; }
.garden-motion-loader--finished { pointer-events: none; }
.garden-motion-loader--finished .garden-motion-loader__dots { opacity: 0; transition: opacity .3s ease-out; }
.garden-motion-loader--finished .garden-motion-loader__background {
  opacity: 0;
  transition: opacity .7s .3s cubic-bezier(.645, .045, .355, 1);
}
@keyframes garden-motion-light-up {
  0%, 60%, 100% { opacity: .2; }
  40% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .garden-motion-loader { display: none; pointer-events: none; }
  .garden-motion-pop .letter { opacity: 1 !important; transform: none !important; }
}