html,
body {
  overflow-x: clip;
}

html {
  min-height: 100%;
  background: var(--color-page);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  position: relative;
  isolation: isolate;
  min-width: 320px;
  min-height: 100vh;

  background: transparent;
  color: var(--color-text);
  font-family: var(--font-sans);

  -webkit-font-smoothing: antialiased;
}

body::before,
body::after {
  position: fixed;
  z-index: -1;
  right: auto;
  left: 0;
  width: 200vw;
  content: "";
  pointer-events: none;
  will-change: transform;
}

body::before {
  bottom: 0;
  height: clamp(760px, 95vh, 1120px);
  background: #e1e7ec;
  clip-path: polygon(
    0 100%, 0 62%, 6% 52%, 10% 60%, 17% 43%, 23.5% 62%,
    29.5% 53%, 36% 62%, 42.5% 47%, 50% 62%, 50% 100%,
    50% 62%, 56% 52%, 60% 60%, 67% 43%, 73.5% 62%,
    79.5% 53%, 86% 62%, 92.5% 47%, 100% 62%, 100% 100%
  );
  animation: mountain-loop-back 72s linear infinite;
  animation-delay: var(--mountain-back-delay, 0s);
  animation-play-state: paused;
}

body::after {
  bottom: 0;
  height: clamp(180px, 28vh, 320px);
  background: #d4dde5;
  clip-path: polygon(
    0 100%, 0 72%, 8.5% 35%, 14.5% 77%, 21.5% 21%, 28.5% 73%,
    35.5% 32%, 42% 70%, 47% 43%, 50% 72%, 50% 100%,
    50% 72%, 58.5% 35%, 64.5% 77%, 71.5% 21%, 78.5% 73%,
    85.5% 32%, 92% 70%, 97% 43%, 100% 72%, 100% 100%
  );
  animation: mountain-loop-front 36s linear infinite;
  animation-delay: var(--mountain-front-delay, 0s);
  animation-play-state: paused;
}

body.is-background-synced::before,
body.is-background-synced::after {
  animation-play-state: running;
}

@keyframes mountain-loop-back {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes mountain-loop-front {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

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