html.is-returning .loading-gate,
html.is-internal-nav .loading-gate {
  display: none;
}
html.is-returning body,
html.is-internal-nav body {
  opacity: 0;
  will-change: opacity;
}

.loading-gate {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background-color: var(--color-accent);
  overflow: hidden;
}

.loading-gate-progress {
  position: absolute;
  left: var(--layout-margin);
  right: var(--layout-margin);
  bottom: clamp(60px, 9.375vw, 120px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.34vw, 24px);

  opacity: 0;
  will-change: opacity;
}

.loading-gate-progress-label {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(12px, 2.34vw, 24px);
  color: var(--color-primary);
  white-space: nowrap;
}

.loading-gate-line-wrap {
  position: relative;
  flex: 1 1 auto;
  height: 1px;

  margin-right: calc(clamp(12px, 2.34vw, 24px) * 3.4674);
}

.loading-gate-line {
  position: absolute;
  inset: 0;
  height: 1px;
  background-color: var(--color-primary);
  opacity: 0.7;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.loading-gate-percent {
  position: absolute;
  left: 0%;
  top: 50%;

  margin-left: clamp(12px, 2.34vw, 24px);
  transform: translateY(-50%);
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(12px, 2.34vw, 24px);
  color: var(--color-primary);
  white-space: nowrap;
  will-change: left;
}