/* 首页吉祥物「柴犬店长」 and its hill at the left of the gallery banner (mascot.js; README「首页吉祥物」).
   The scene is a 360 × 128 stage scaled per breakpoint (--ms-scale) inside a box of --ms-w that crops it
   (--ms-shift keeps the mascot in view on narrow screens). The banner rules here win over gallery.css and
   brand.css by specificity (.gallery-banner.has-mascot), whatever the load order. */
.gallery-banner.has-mascot{--ms-w:240px;--ms-tail:110px;--ms-scale:1;--ms-shift:0px;min-height:128px;padding-left:calc(var(--ms-w) + 4px)}
/* .gallery-banner>div (gallery.css) would make the scene a positioned flex box: this selector outranks it. */
/* The hills run on under the title (--ms-tail) and fade out there, so the scene has no edge. */
.gallery-banner.has-mascot>.ms-scene{position:absolute;left:0;top:0;bottom:0;width:calc(var(--ms-w) + var(--ms-tail));overflow:hidden;pointer-events:none;z-index:0;
  mask-image:linear-gradient(90deg,var(--mask-solid) calc(100% - var(--ms-tail)),transparent)}
.ms-stage{position:absolute;left:var(--ms-shift);bottom:0;width:360px;height:128px;transform:scale(var(--ms-scale));transform-origin:0 100%}
.ms-layer,.ms-layer svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.ms-front{z-index:2}.ms-fx{position:absolute;inset:0;z-index:3}

/* Colours: every part is a scene role from style.css, so both skins dress the hill. */
.ms-cloud ellipse{fill:var(--scene-cloud)}
.ms-hill-back{fill:var(--scene-hill-back)}.ms-hill{fill:var(--scene-hill)}
.ms-trunk{fill:var(--scene-trunk)}.ms-leaf{fill:var(--scene-leaf)}.ms-leaf-deep{fill:var(--scene-leaf-deep)}.ms-leaf-light{fill:var(--scene-leaf-light)}
.ms-tuft,.ms-stem{fill:none;stroke:var(--scene-leaf-deep);stroke-width:1.5;stroke-linecap:round}
.ms-petal{fill:var(--scene-petal)}.ms-flower-alt .ms-petal{fill:var(--scene-petal-alt)}.ms-pistil{fill:var(--scene-pistil)}
.ms-heart{fill:var(--scene-heart)}.ms-star{fill:var(--scene-spark)}

/* Trees lean about their trunk's foot (mascot.js writes --sway in degrees); flowers hang from their stems. */
.ms-tree,.ms-flower{transform-box:fill-box;transform-origin:50% 100%}
.ms-tree{transform:rotate(calc(var(--sway,0) * 1deg * var(--k,1)))}
.ms-tree-b{--k:.75}.ms-tree-c{--k:1.3}
.ms-front .ms-hill,.ms-front .ms-tuft,.ms-front .ms-flower{pointer-events:visiblePainted;cursor:pointer}

/* The mascot: a real button between the two hills, one sprite cell at a time. */
.ms-mascot{position:absolute;left:62px;top:16px;width:112px;height:112px;padding:0;border:0;background:none;z-index:1;
  pointer-events:auto;cursor:pointer;border-radius:50% 50% 18px 18px;-webkit-tap-highlight-color:transparent}
.ms-mascot:focus-visible{outline:3px solid var(--accent);outline-offset:-2px}
.ms-bob,.ms-body{position:absolute;inset:0;display:block}
.ms-body{transform-origin:50% 92%}
.ms-sprite{position:absolute;inset:0;background-size:300% 300%;background-repeat:no-repeat;background-position:var(--mx,50%) var(--my,50%)}
.ms-look{background-image:url(/static/mascot/shiba-directions.webp)}
.ms-react{background-image:url(/static/mascot/shiba-reactions.webp);opacity:0}
.ms-mascot.is-reacting .ms-react{opacity:1}.ms-mascot.is-reacting .ms-look{opacity:0}
.ms-spark,.ms-pop{position:absolute;display:block;width:13px;height:13px;pointer-events:none}
.ms-spark svg,.ms-pop svg{display:block;width:100%;height:100%}
.ms-pop{width:15px;height:15px}

/* Only transitions here: everything that plays (squash, breathing, a flower's nod, sparks) is an Element.animate in
   mascot.js, counted in the page's animation budget. The clouds stay still. */
@media(prefers-reduced-motion:no-preference){
  .ms-bob{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
  .ms-mascot:not(.is-asleep):hover .ms-bob{transform:translateY(-2px)}
}

/* Narrower layouts crop the stage around the mascot and keep the title on one line: the 不知道选哪张？ lead
   gives way first, then the gaps narrow. */
.gallery-banner.has-mascot h1{white-space:nowrap}
@media(max-width:1280px){.gallery-banner.has-mascot{--ms-w:196px;--ms-tail:90px;--ms-scale:.86;--ms-shift:-10px;min-height:112px}
  .gallery-banner.has-mascot .banner-draw-lead{display:none}}
@media(max-width:900px){.gallery-banner.has-mascot{--ms-w:138px;--ms-tail:64px;--ms-scale:.72;--ms-shift:-18px;min-height:96px}
  .ms-tree-c,.ms-cloud-small{display:none}}
/* Phones: the copy may shrink (the price line wraps) but never below the title (brand.css lets it reach 0); on the narrowest ones (about 350 px and under) the draw button wraps to a line
   of its own under it instead of covering it. */
@media(max-width:600px){.gallery-banner.has-mascot{--ms-w:66px;--ms-tail:24px;--ms-scale:.52;--ms-shift:-30px;min-height:68px;column-gap:10px;row-gap:6px;padding-left:calc(var(--ms-w) + 2px)}
  .gallery-banner.has-mascot .banner-copy{min-width:min-content}
  .gallery-banner.has-mascot h1{font-size:16px}
  .ms-tree-b,.ms-cloud{display:none}}
@media(max-width:350px){.gallery-banner.has-mascot{flex-wrap:wrap}}
@media(max-width:380px){.gallery-banner.has-mascot{--ms-w:52px;--ms-scale:.44;--ms-shift:-26px;column-gap:8px}.gallery-banner.has-mascot h1{font-size:14px;letter-spacing:0}}
/* 我的收藏: a 150 × 96 island between the heading's text and 继续逛画廊 (desktop), beside that button under the text
   (phones). Negative margins keep the heading as tall as before on desktop. */
.page-heading.has-mascot-fav>.ms-scene{position:relative;flex:none;width:calc(150px * var(--ms-scale));height:calc(96px * var(--ms-scale));
  margin:-12px 4px -14px auto;--ms-scale:1;--ms-shift:0px;pointer-events:none}
.ms-scene-fav .ms-stage{width:150px;height:96px}
.ms-scene-fav .ms-mascot{left:33px;top:12px;width:84px;height:84px;border-radius:50% 50% 14px 14px}
.ms-blossom{fill:var(--scene-petal)}.ms-blossom-light{fill:var(--scene-cloud)}
/* Phones: the heading text has a line of its own; the island and 继续逛画廊 share the next one, at the right. */
@media(max-width:600px){
  .page-heading.has-mascot-fav{flex-wrap:wrap}
  .page-heading.has-mascot-fav>:first-child{flex-basis:100%}
  .page-heading.has-mascot-fav>.ms-scene{--ms-scale:.66;margin:-8px 0 -10px auto}
  .page-heading.has-mascot-fav>.secondary{align-self:flex-end}
}
@media print{.ms-scene{display:none}.gallery-banner.has-mascot{padding-left:0}}