/* =========================
  Design System
  ========================= */
   :root{
    /* 色 */
    --loading-bg: #000000;
    --loading-fg: #636363;

    /* ライン（等速） */
    --loading-stroke: 0.8;      /* 太さ(px) */
    --loading-seg: 0.5;         /* 走る線の長さ（0〜1） */
    --loading-lap: 1.3s;        /* 1周の時間（3本共通） */

    /* オーバーレイのフェード（ローディング領域） */
    --loading-fade-dur: 1300ms;
    --loading-fade-ease: cubic-bezier(.4,0,.2,1);

    /* ロゴ表示サイズ（clamp） */
    --loading-logo-min: 140px;
    --loading-logo-pref: 14vw;
    --loading-logo-max: 560px;

    /* コンテンツ表示遅延(ms)：0で即切替 */
    --loading-reveal-ms: 1350;
  }

/* ==========================================================================
   Loading Stage
   ========================================================================== */
   .loading-stage{
    position: fixed; inset: 0;           /* 100vw × 100vh */
    display: grid; place-items: center;
    background: var(--loading-bg);
    z-index: 10001;
    transition: opacity var(--loading-fade-dur) var(--loading-fade-ease);
  }
  .loading-stage.is-fading{
    opacity: 0; pointer-events: none;
  }

  .loading-visual{
    position: relative;
    width: clamp(var(--loading-logo-min), var(--loading-logo-pref), var(--loading-logo-max));
    aspect-ratio: 125.49 / 144.9;
  }
  .loading-visual > svg{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
  }
  
  /* ランナー（等速・2周連続・3本同時） */
  .loading-runner{
    fill:none; stroke:var(--loading-fg); stroke-width:var(--loading-stroke);
    stroke-linecap:butt; stroke-linejoin:miter; vector-effect:non-scaling-stroke;
    stroke-dasharray: var(--loading-seg) calc(1 - var(--loading-seg));
    stroke-dashoffset: 1;
    animation: loading-runBoth calc(2*var(--loading-lap)) linear forwards;
  }
  @keyframes loading-runBoth{ to{ stroke-dashoffset: 0; } }
  
  /* ランナー完了タイミングで完全体ロゴをフェードイン（差し替え） */
  #loading-logo-final{
    opacity: 0;
    transition: opacity 600ms cubic-bezier(.4,0,.2,1);
    color: var(--loading-fg);
  }
  .loading-final-fill{ fill: #ffffff; }
  
  /* トリガー：ランナー完了で完全体を表示、同時に線は消す */
  .loading-is-filled #loading-logo-final{ opacity: 1; }
  .loading-is-filled .loading-runner{ stroke: none; }
  
  /* ==========================================================================
     ピル型ローディングバー
     ========================================================================== */
  .loading-stack{
    width: clamp(var(--loading-logo-min), var(--loading-logo-pref), var(--loading-logo-max));
    display: grid;
    gap: var(--loading-bar-gap, 20px);
  }
  .loading-bar{ width: 100%; }
  
  .loading-bar__track{
    position: relative;
    width: 100%;
    height: var(--loading-bar-h, 10px);
    background: color-mix(in srgb, var(--loading-fg) 18%, transparent);
    border-radius: 9999px;
    overflow: hidden;
  }
  .loading-bar__fill{
    width: 0%;
    height: 100%;
    background: var(--loading-fg);
    border-radius: inherit;
    animation: loading-barFill calc(2*var(--loading-lap)) linear forwards;
    animation-play-state: paused; /* JSでランナーと同時開始 */
  }
  @keyframes loading-barFill { to { width: 100%; } }

  html.skip-loader #loading-stage { display: none !important; }
  html.skip-loader #app { display: block; }