/* オープニングローダー */

:root {
  --loader-angle: 18deg;
  --loader-gap: clamp(3rem, 10vw, 8rem);
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  background-color: var(--color-dark);
  color: var(--color-light);
  pointer-events: auto;
}

.loader.is-done {
  pointer-events: none;
}

.loader-split {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: flex;
  width: 280vmax;
  height: 280vmax;
  transform: translate(-50%, -50%) rotate(var(--loader-angle));
  pointer-events: none;
}

.loader-panel {
  width: 50%;
  height: 100%;
  background-color: var(--color-dark);
}

.loader-line {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 1px;
  height: calc(hypot(100vw, 100vh) * 1.25);
  background-color: var(--color-light);
  transform-origin: center center;
  pointer-events: none;
  will-change: transform;
}

.loader-center {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--loader-gap) minmax(0, 1fr);
  align-items: center;
  padding-inline: var(--space-outer);
  pointer-events: none;
}

.loader-gap {
  grid-column: 2;
  width: 100%;
  height: 1px;
}

.loader-word {
  overflow: hidden;
  line-height: 1;
}

.loader-word-left {
  grid-column: 1;
  justify-self: end;
  padding-right: clamp(0.75rem, 2vw, 2rem);
}

.loader-word-right {
  grid-column: 3;
  justify-self: start;
  padding-left: clamp(0.15rem, 0.6vw, 0.5rem);
}

.loader-word-inner {
  display: block;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(17px, 2.35vw, 32px);
  letter-spacing: 0.12em;
  line-height: 1;
  white-space: nowrap;
  will-change: transform;
}

.loader-word-left .loader-word-inner {
  padding-right: 0.08em;
}

.loader-word-right .loader-word-inner {
  padding-left: 0.08em;
}

.loader:not(.is-ready) .loader-center,
.loader:not(.is-ready) .loader-line {
  visibility: hidden;
}

html.is-loading,
html.is-loading body,
html.is-fv-scroll-lock,
html.is-fv-scroll-lock body {
  overflow: hidden;
}

html.is-loading {
  scrollbar-gutter: auto;
  background-color: var(--color-dark);
}

html.is-fv-hide-scrollbar {
  scrollbar-gutter: unset;
  scrollbar-width: none;
}

html.is-fv-hide-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}

html.is-loaded .loader {
  display: none;
}

@media (max-width: 767px) {
  :root {
    --loader-angle: 14deg;
    --loader-gap: clamp(2rem, 11vw, 3.25rem);
  }

  .loader-word-inner {
    font-size: clamp(12px, 3.4vw, 16px);
    letter-spacing: 0.06em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader-word-inner,
  .loader-line {
    will-change: auto;
  }
}