.-end-intro .eraseStart #async-container {
  animation: hideContents 0.8s cubic-bezier(0.17, 0.84, 0.44, 1) 0s;
}

.-end-intro .onloadcomplete #async-container {
  animation: showContents 0.8s cubic-bezier(0.17, 0.84, 0.44, 1) 0s forwards;
  cursor: auto;
}

@keyframes hideContents {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes showContents {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.progress-indicator {
  --size: 50px;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 101;
  pointer-events: none;
  transition: opacity 0.25s ease;
  transform: rotate(-90deg);
}

.progress-indicator svg {
  padding: 10px;
}

.progress-indicator circle {
  fill: transparent;
  stroke: #867c7c;
  stroke-width: var(--stroke-width, 1);
  stroke-dasharray: calc((var(--progress-loaded) / 100) * var(--perimeter)) var(--perimeter);
  transition: stroke-dasharray 0.15s steps(12), stroke-dashoffset 0.15s linear;
}

.progress-complete .progress-indicator {
  opacity: 0;
}

.progress-complete .progress-indicator circle {
  stroke-dashoffset: calc(var(--perimeter-px) * -1);
}

.def-svg {
  position: absolute;
  inset: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.page-transition-cover {
  position: fixed;
  left: 0;
  top: 0;
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100vh;
  background-color: #1e1d1d;
  background-image: url("../img/shared/pattern_noise.png");
  background-size: 100px;
  z-index: 101;
  pointer-events: none;
  opacity: 0;
  animation: ramdomTexture 2s steps(5) infinite;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 80%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 80%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-position: 200% 0;
  mask-position: 200% 0;
}

.page-transition-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

.-end-intro .eraseStart ~ .page-transition-cover {
  animation: hidePage 0.95s cubic-bezier(0.77, 0, 0.18, 1) 1 forwards,
             ramdomTexture 2s steps(5) infinite;
}

.-end-intro .eraseStart ~ .page-transition-cover::before {
  animation: fadeDark 0.45s ease forwards;
}

.-end-intro .eraseStart ~ .page-transition-cover .indicator {
  opacity: 1;
}

.-end-intro .onloadcomplete ~ .page-transition-cover {
  -webkit-mask-image: linear-gradient(-90deg, #000 0, #000 80%, transparent 100%);
  mask-image: linear-gradient(-90deg, #000 0, #000 80%, transparent 100%);
  animation: showPage 0.85s linear 1 forwards,
             ramdomTexture 2s steps(5) infinite;
  cursor: auto;
  pointer-events: none;
}

.-end-intro .onloadcomplete ~ .page-transition-cover::before {
  opacity: 0;
  animation: none;
}

.-end-intro .onloadcomplete ~ .page-transition-cover .indicator {
  opacity: 0;
}

@keyframes fadeDark {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.35;
  }
}

@keyframes hidePage {
  0% {
    opacity: 0;
    -webkit-mask-position: 200% 0;
    mask-position: 200% 0;
  }
  30% {
    opacity: 0.35;
    -webkit-mask-position: 200% 0;
    mask-position: 200% 0;
  }
  65% {
    opacity: 0.8;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  100% {
    opacity: 1;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

@keyframes showPage {
  0% {
    opacity: 1;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  100% {
    opacity: 0;
    -webkit-mask-position: -400% 0;
    mask-position: -400% 0;
  }
}

.first-transition-cover {
  position: fixed;
  left: 0;
  top: 0;
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: #1e1d1d;
  background-image: url("../img/shared/pattern_noise.png");
  background-size: 150px;
  z-index: 101;
  animation: ramdomTexture 2s steps(5) infinite;
}

.first-transition-cover img {
  width: 100px;
}

.-end-intro .first-transition-cover {
  transition: opacity 0.35s cubic-bezier(0.17, 0.84, 0.44, 1);
  pointer-events: none;
  opacity: 0;
}

@media (min-width: 1280px) {
  .first-transition-cover img {
    width: 120px;
  }
}

@keyframes ramdomTexture {
  0% {
    background-position: 50% 100%;
  }
  20% {
    background-position: 30% 50%;
  }
  40% {
    background-position: 60% 90%;
  }
  60% {
    background-position: 20% 40%;
  }
  80% {
    background-position: 70% 80%;
  }
  100% {
    background-position: 10% 30%;
  }
}