/* 3Dを読み込んでいる間、肉球がとことこ歩く（ZUTTOKO LP と同じ動き。全ページ共通）
   色は --paw-color、文字色は --paw-text で上書きできる。
   使い方: /paw-loader.js を読み込むと model-viewer に自動で付く。
   自前のローディング枠がある画面は .paw-loader と下のマークアップを直接置く:
   <div class="paw-loader"><div class="paw-loader__track"><i></i><i></i><i></i><i></i><i></i><i></i></div><p>…</p></div> */
.paw-loader {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  transition: opacity .4s, visibility .4s; pointer-events: none; container-type: inline-size;
}
.paw-loader.is-done { opacity: 0; visibility: hidden; }
.paw-loader p { margin: 0; font-size: 12.5px; letter-spacing: .06em; color: var(--paw-text, #8A7A66); }
.paw-loader__track { position: relative; width: 230px; height: 56px; }
.paw-loader__track i {
  position: absolute; width: 26px; height: 26px; opacity: 0;
  background: var(--paw-color, #D9744A);
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cellipse cx='20' cy='27' rx='9' ry='8'/%3E%3Ccircle cx='8' cy='16' r='4'/%3E%3Ccircle cx='15' cy='9' r='4'/%3E%3Ccircle cx='25' cy='9' r='4'/%3E%3Ccircle cx='32' cy='16' r='4'/%3E%3C/svg%3E");
          mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cellipse cx='20' cy='27' rx='9' ry='8'/%3E%3Ccircle cx='8' cy='16' r='4'/%3E%3Ccircle cx='15' cy='9' r='4'/%3E%3Ccircle cx='25' cy='9' r='4'/%3E%3Ccircle cx='32' cy='16' r='4'/%3E%3C/svg%3E");
  transform: rotate(90deg);
  animation: pawStep 2.4s infinite;
  /* 円形スピナー用の古い指定（.loader i）が残っていても打ち消す */
  border: 0; border-radius: 0;
}
/* 左右の足を交互に、少しずつ右へ */
.paw-loader__track i:nth-child(1) { left: 0;     top: 4px;  animation-delay: 0s; }
.paw-loader__track i:nth-child(2) { left: 38px;  top: 26px; animation-delay: .3s; }
.paw-loader__track i:nth-child(3) { left: 76px;  top: 4px;  animation-delay: .6s; }
.paw-loader__track i:nth-child(4) { left: 114px; top: 26px; animation-delay: .9s; }
.paw-loader__track i:nth-child(5) { left: 152px; top: 4px;  animation-delay: 1.2s; }
.paw-loader__track i:nth-child(6) { left: 190px; top: 26px; animation-delay: 1.5s; }
@keyframes pawStep {
  0%   { opacity: 0; transform: rotate(90deg) scale(.6); }
  8%   { opacity: 1; transform: rotate(90deg) scale(1.08); }
  14%  { transform: rotate(90deg) scale(1); }
  55%  { opacity: .9; }
  75%, 100% { opacity: 0; }
}
/* 狭い枠（管理画面の小さなプレビュー等）では足跡を縮める */
@container (max-width: 260px) {
  .paw-loader__track { transform: scale(.7); }
}
/* model-viewer の中に自動で入れたもの。背景は model-viewer と同じにして、前の3Dを隠す */
model-viewer > .paw-loader { background: inherit; border-radius: inherit; }
@media (prefers-reduced-motion: reduce) {
  .paw-loader__track i { animation: none; opacity: .8; }
}