/* =========================================================
   loader.css
   - Fullscreen loading overlay
   - SVG "draw + fill" animation (stroke & fill: #FFD943)
   - Background: white
========================================================= */

/* ===== Overlay ===== */
.loading{
  position: fixed;
  inset: 0;
  background: #fff;
  display: grid;
  place-items: center;
  z-index: 9999;

  /* フェードアウト用 */
  opacity: 1;
}

.loading__inner{
  display: grid;
  place-items: center;
  gap: 12px;
}

.loading__logo{
  display: grid;
  place-items: center;
}

.loading__logo svg{
  width: min(260px, 70vw);
  height: auto;
  display: block;

  /* 線幅を縮小で変化させない（対応ブラウザなら効く） */
  vector-effect: non-scaling-stroke;
}

/* ===== Optional text ===== */
.loading__text{
  margin: 0;
  font-size: 12px;
  letter-spacing: .08em;
  color: #666;
}

/* ===== Hide state ===== */
.loading.is-hide{
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

/* =========================================================
   SVG Draw Animation
   - Draw stroke first, then fade-in fill
========================================================= */

/* 重要：SVGをインライン化した後に path に適用される */
.logo-draw path{
  /* 線も塗りも同じ色 */
  stroke: #FFD943;
  fill: #FFD943;

  /* 潰れ防止の基本 */
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* 描写中は塗りを見せない（線だけにする） */
  fill-opacity: 0;

  /* 描写の精度 */
  shape-rendering: geometricPrecision;

  /* dasharray/dashoffset はJSでセット */

  /* 線→塗り の順にアニメ */
  animation:
    loader-draw 1.2s ease forwards,
    loader-fill .35s ease forwards;

  /* 1本ずつ遅延（--delay はJSで付与） */
  animation-delay:
    var(--delay, 0s),
    calc(var(--delay, 0s) + 1.05s);
}

/* 線が描かれる */
@keyframes loader-draw{
  to { stroke-dashoffset: 0; }
}

/* 塗りがふわっと入る */
@keyframes loader-fill{
  to { fill-opacity: 1; }
}

/* =========================================================
   Reduce motion (optional)
========================================================= */
@media (prefers-reduced-motion: reduce){
  .logo-draw path{
    animation: none;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    fill-opacity: 1;
  }
  .loading.is-hide{
    transition: none;
  }
}