/* ==========================================
   PACE ACADEMY / Loading Screen
========================================== */

/* ローディング表示中はスクロールを無効化 */
html:has(body.is-loading),
body.is-loading {
  overflow: hidden;
}

/* ローディング画面 */
.loading {
  align-items: center;
  background: #4ed4e0;
  color: #16383b;
  display: flex;
  height: 100dvh;
  inset: 0;
  justify-content: center;
  overflow: hidden;
  position: fixed;
  transform: translateY(0);
  transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
  width: 100%;
  will-change: transform;
  z-index: 99999;
}

/* ローディング終了時 */
.loading.is-complete {
  pointer-events: none;
  transform: translateY(-100%);
}

/* ローディング内のレイアウト */
.loading-inner {
  display: flex;
  flex-direction: column;
  height: min(70vw, 440px);
  justify-content: space-between;
  position: relative;
  width: min(78vw, 680px);
}

/* 上部ラベル・下部パーセント */
.loading-label,
.loading-text {
  font-family: var(--mono, monospace);
  font-size: clamp(0.58rem, 1vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  opacity: 0;
  transform: translateY(12px);
}

.loading-label {
  align-self: flex-start;
}

.loading-text {
  align-self: flex-end;
}

.loading-text span {
  display: inline-block;
  min-width: 2.25em;
  text-align: right;
}

/* ロゴ中央エリア */
.loading-logo-wrap {
  align-items: center;
  display: flex;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(68vw, 540px);
}

.loading-logo-svg {
  display: block;
  height: auto;
  overflow: visible;
  width: 100%;
}

/* ラベルと数値を表示 */
.loading.is-loading .loading-label,
.loading.is-loading .loading-text {
  animation: loading-text-in 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.loading.is-loading .loading-text {
  animation-delay: 0.2s;
}

/* ==========================================
   SVG Logo / Initial State
========================================== */

/* 白い軌道線 */
.loading-logo-svg .orbit {
  fill: none;
  opacity: 0;
  stroke: url(#logo-silver);
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 青いスピードライン */
.loading-logo-svg .speed {
  fill: none;
  opacity: 0;
  stroke: url(#logo-blue);
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
  Aの輪郭用。
  塗りはしないので、最初は純粋なストロークとして描画される。
*/
.loading-logo-svg .a-stroke {
  fill: none;
  opacity: 0;
  stroke: #e1fdff;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 6;
}

/*
  Aの色レイヤー。
  これは輪郭アニメーションとは別レイヤー。
  最初は透明で、輪郭完成後に表示される。
*/
.loading-logo-svg .a-fill {
  fill: url(#logo-blue);
  opacity: 0;
}

/* Aのハイライト */
.loading-logo-svg .a-highlight {
  fill: none;
  opacity: 0;
  stroke: #aafcff;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  stroke-linecap: round;
  stroke-width: 5;
}

/* ==========================================
   SVG Logo / Trace Sequence
========================================== */

/* 1. 上側・下側の軌道を順番に描く */
.loading.is-loading .loading-logo-svg #orbit-top-outer {
  animation: logo-draw 0.55s 0.05s ease forwards;
}

.loading.is-loading .loading-logo-svg #orbit-top-inner {
  animation: logo-draw 0.48s 0.14s ease forwards;
}

.loading.is-loading .loading-logo-svg #orbit-middle {
  animation: logo-draw 0.45s 0.24s ease forwards;
}

.loading.is-loading .loading-logo-svg #orbit-bottom-outer {
  animation: logo-draw 0.48s 0.34s ease forwards;
}

.loading.is-loading .loading-logo-svg #orbit-bottom-middle {
  animation: logo-draw 0.5s 0.43s ease forwards;
}

.loading.is-loading .loading-logo-svg #orbit-bottom-inner {
  animation: logo-draw 0.52s 0.52s ease forwards;
}

.loading.is-loading .loading-logo-svg #orbit-bottom-fine {
  animation: logo-draw 0.4s 0.61s ease forwards;
}

/* 2. 左側のスピードラインを描く */
.loading.is-loading .loading-logo-svg #speed-01 {
  animation: logo-draw 0.28s 0.38s ease forwards;
}

.loading.is-loading .loading-logo-svg #speed-02 {
  animation: logo-draw 0.3s 0.45s ease forwards;
}

.loading.is-loading .loading-logo-svg #speed-03 {
  animation: logo-draw 0.32s 0.52s ease forwards;
}

.loading.is-loading .loading-logo-svg #speed-04 {
  animation: logo-draw 0.3s 0.59s ease forwards;
}

.loading.is-loading .loading-logo-svg #speed-05 {
  animation: logo-draw 0.28s 0.66s ease forwards;
}

.loading.is-loading .loading-logo-svg #speed-06 {
  animation: logo-draw 0.28s 0.73s ease forwards;
}

.loading.is-loading .loading-logo-svg #speed-07 {
  animation: logo-draw 0.28s 0.8s ease forwards;
}

.loading.is-loading .loading-logo-svg #speed-short-01 {
  animation: logo-draw 0.2s 0.5s ease forwards;
}

.loading.is-loading .loading-logo-svg #speed-short-02 {
  animation: logo-draw 0.2s 0.57s ease forwards;
}

.loading.is-loading .loading-logo-svg #speed-short-03 {
  animation: logo-draw 0.2s 0.64s ease forwards;
}

.loading.is-loading .loading-logo-svg #speed-short-04 {
  animation: logo-draw 0.2s 0.71s ease forwards;
}

.loading.is-loading .loading-logo-svg #speed-short-05 {
  animation: logo-draw 0.2s 0.78s ease forwards;
}

.loading.is-loading .loading-logo-svg #speed-low-01 {
  animation: logo-draw 0.24s 0.73s ease forwards;
}

.loading.is-loading .loading-logo-svg #speed-low-02 {
  animation: logo-draw 0.24s 0.8s ease forwards;
}

.loading.is-loading .loading-logo-svg #speed-low-03 {
  animation: logo-draw 0.24s 0.87s ease forwards;
}

/* 3. Aの輪郭をなぞる */
.loading.is-loading .loading-logo-svg #a-stroke {
  animation: logo-draw 0.78s 0.9s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* 4. Aのハイライトを描く */
.loading.is-loading .loading-logo-svg #a-highlight {
  animation: logo-draw 0.42s 1.35s ease forwards;
}

/* 5. 輪郭完成後、Aにグラデーションカラーを入れる */
.loading.is-loading .loading-logo-svg #a-fill {
  animation: logo-fill-in 0.35s 1.55s ease forwards;
}

/* A完成後の軽い発光 */
.loading.is-loading .loading-logo-svg {
  animation: logo-glow 1.5s 1.9s ease-in-out infinite alternate;
}

/* ローディング終了直前に中央ロゴを少し縮めて消す */
.loading.is-complete .loading-inner {
  animation: loading-content-out 0.3s ease forwards;
}

/* ==========================================
   Keyframes
========================================== */

@keyframes loading-text-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes logo-draw {
  from {
    opacity: 1;
    stroke-dashoffset: 1600;
  }

  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes logo-fill-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes logo-glow {
  from {
    filter: drop-shadow(0 0 0 rgba(20, 212, 223, 0));
  }

  to {
    filter: drop-shadow(0 0 18px rgba(20, 212, 223, 0.48));
  }
}

@keyframes loading-content-out {
  to {
    opacity: 0;
    transform: scale(0.96);
  }
}

/* スマホ表示 */
@media (max-width: 760px) {
  .loading-inner {
    height: min(110vw, 440px);
    width: min(86vw, 520px);
  }

  .loading-logo-wrap {
    width: min(90vw, 470px);
  }
}

/* 動きを減らすOS設定への対応 */
@media (prefers-reduced-motion: reduce) {
  .loading,
  .loading.is-complete,
  .loading.is-complete .loading-inner,
  .loading.is-loading .loading-label,
  .loading.is-loading .loading-text,
  .loading.is-loading .loading-logo-svg,
  .loading.is-loading .loading-logo-svg * {
    animation: none !important;
    transition: none !important;
  }

  .loading-label,
  .loading-text,
  .loading-logo-svg .orbit,
  .loading-logo-svg .speed,
  .loading-logo-svg .a-stroke,
  .loading-logo-svg .a-highlight,
  .loading-logo-svg .a-fill {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  .loading.is-complete {
    display: none;
  }
}