/* ============================================================
   Bocco 共通アセット — TOPの看板犬を業態サイトの住人にする
   出自: top/poc/index.html の #dog 実装 (ポーズ/呼吸/歩行/首振り) を
   .bocco 名前空間に移植。装置 = A ローダー / B フッター住人 /
   C 散歩 (W77 %拍脚本の簡易状態機械) / F CAFEヒーロー (雫を見上げる)
   ============================================================ */

/* ---------- 本体 (ポーズ・アニメはTOPと同一値) ---------- */
.bocco { position: absolute; aspect-ratio: 130 / 110; cursor: pointer; touch-action: manipulation; }
.bocco svg { width: 100%; height: 100%; overflow: visible; display: block; }
.bocco .flip { transition: transform 0.25s ease; transform-origin: center; }
.bocco.face-left .flip { transform: scaleX(-1); }
.bocco svg g.pose { display: none; }
.bocco svg g.pose-walk { display: block; }
.bocco.p-sit svg g.pose-walk, .bocco.p-lie svg g.pose-walk { display: none; }
.bocco.p-sit svg g.pose-sit { display: block; }
.bocco.p-lie svg g.pose-lie { display: block; }
.bocco.settling svg { animation: bocco-settle 0.28s ease; }
@keyframes bocco-settle { 0% { transform: translateY(2.5px) scaleY(0.93); } 100% { transform: translateY(0) scaleY(1); } }
.bocco .leg { transform-origin: 50% 4%; transform-box: fill-box; }
.bocco.walking .legA { animation: bocco-leg 0.42s ease-in-out infinite; }
.bocco.walking .legB { animation: bocco-leg 0.42s ease-in-out infinite; animation-delay: -0.21s; }
@keyframes bocco-leg { 0%, 100% { transform: rotate(11deg); } 50% { transform: rotate(-11deg); } }
.bocco.walking .torso { animation: bocco-bob 0.42s ease-in-out infinite; }
@keyframes bocco-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
.bocco .tail { transform-origin: 50% 85%; transform-box: fill-box; animation: bocco-wag 1.6s ease-in-out infinite; }
@keyframes bocco-wag { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(10deg); } }
.bocco.happy .tail { animation: bocco-wag 0.25s ease-in-out infinite; }
.bocco.happy .torso { animation: bocco-hop 0.5s ease-in-out 2; }
@keyframes bocco-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-9px); } }
.bocco.p-sit .breath, .bocco.p-lie .breath {
  transform-origin: 50% 100%; transform-box: fill-box;
  animation: bocco-breath 2.8s ease-in-out infinite;
}
@keyframes bocco-breath { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.02); } }
.bocco.p-sit .sit-head { transform-origin: 50% 78%; transform-box: fill-box; animation: bocco-headlook 11s ease-in-out infinite; }
@keyframes bocco-headlook {
  0%, 26% { transform: rotate(0deg); }
  32%, 48% { transform: rotate(-9deg); }
  54%, 62% { transform: rotate(0deg); }
  68%, 86% { transform: rotate(7deg); }
  92%, 100% { transform: rotate(0deg); }
}
/* F: 雫を見上げる (首振りを止めて、鼻先を持ち上げる) */
.bocco.lookup .sit-head { animation: none; transform: rotate(-13deg); transition: transform .55s ease; }
.bocco .sleep-eyes { display: none; }
.bocco.sleeping .breath { animation-duration: 5.2s; }
.bocco.sleeping .sleep-eyes { display: block; }
.bocco-zzz {
  position: absolute; pointer-events: none; z-index: 30;
  font-family: "Comfortaa", sans-serif; font-weight: 700;
  font-size: 13px; color: #8a8370;
  animation: bocco-zzz 1.9s ease-out forwards;
}
@keyframes bocco-zzz {
  0% { transform: translate(0, 0) scale(0.55); opacity: 0; }
  20% { opacity: 0.85; }
  100% { transform: translate(14px, -38px) scale(1.2); opacity: 0; }
}

/* ---------- A: ローディング (TOPと同じ「歩くBocco + PooL」) ---------- */
#boccoLoader {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: var(--paper-in, #fdfbf7);
  transition: opacity 0.55s ease;
}
#boccoLoader.done { opacity: 0; pointer-events: none; }
#boccoLoader .box { text-align: center; width: 100%; }
#boccoLoader .dogwrap { position: relative; width: 132px; height: 112px; margin: 0 auto; }
#boccoLoader .bocco { position: relative; width: 100%; cursor: default; }
/* ロゴはヘッダー左上と「同じ素材」= サイト側CSSの .brand / .logo / .bizname をそのまま流用する。
   書体・字間・ロゴと業態名の間隔 (gap 1.1em) はサイトCSS側の定義で決まり、ここでは
   「PooL のグリフ中心 = Bocco・ドットの中心線」の配置だけを面倒みる。
   左右対称の flex スペーサー (.pad ⇄ .bizname が同じ flex:1。gap も .pad-.logo / .logo-.bizname で
   両側対称) により、業態名の長さに関わらず PooL が構造的にド中央になる (Mare FB 2026-08-18) */
#boccoLoader .brand { margin-top: 16px; justify-content: center; }
#boccoLoader .brand .pad, #boccoLoader .brand .bizname { flex: 1 1 0; min-width: 0; }
#boccoLoader .brand .bizname { white-space: nowrap; overflow: hidden; text-align: left; }
#boccoLoader .brand .logo { flex: 0 0 auto; }
#boccoLoader .dots { margin-top: 10px; height: 10px; }
#boccoLoader .dots i {
  display: inline-block; width: 5px; height: 5px; margin: 0 4px;
  border-radius: 50%; background: var(--bc, #b8892c);
  animation: bocco-dot 1.1s ease-in-out infinite;
}
#boccoLoader .dots i:nth-child(2) { animation-delay: 0.18s; }
#boccoLoader .dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes bocco-dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 45% { opacity: 1; transform: translateY(-3px); } }

/* ---------- B: フッターの住人 (罫線の上でおすわり) ---------- */
footer { position: relative; }
.bocco-resident {
  position: absolute; top: 0; right: clamp(24px, 7vw, 96px);
  width: 74px; aspect-ratio: 130 / 110;
  transform: translateY(-79%);   /* 足もとがフッター上端の罫線に載る */
  display: block; z-index: 5;
}
.bocco-resident .bocco { position: relative; width: 100%; }
@media (max-width: 900px) { .bocco-resident { width: 64px; right: 20px; } }

/* ---------- C: 散歩ステージ (フッター直前の帯・W77簡易状態機械) ---------- */
.bocco-stage {
  position: relative; height: 92px; overflow: visible;
  max-width: 1160px; margin: 0 auto; padding: 0 clamp(20px, 3.4vw, 44px);
  pointer-events: none;
}
.bocco-stage .bocco { pointer-events: auto; bottom: -1px; width: 90px; will-change: transform; }
@media (max-width: 900px) { .bocco-stage { height: 76px; } .bocco-stage .bocco { width: 74px; } }

/* ---------- F: CAFEヒーローの住人 (PCのみ・雫の下でおすわり) ---------- */
.bocco-hero {
  position: absolute; left: 5.5%; bottom: 5%;
  width: 88px; aspect-ratio: 130 / 110; z-index: 4;
}
.bocco-hero .bocco { position: relative; width: 100%; }
@media (max-width: 900px) { .bocco-hero { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .bocco .legA, .bocco .legB, .bocco .torso, .bocco .tail,
  .bocco .breath, .bocco .sit-head, #boccoLoader .dots i { animation: none !important; }
}