/* SBG BRUSH — ume-cat.css v1.0
   下幕間: 梅と黒猫（跳躍→方向転換→まったり）
   Scope: .um / um- prefix. Zero deps. Scroll-triggered (.um-play). ?static=1 対応 */

.um{
  position:relative;width:100%;height:100%;
  color:#221d18;
  background:
    radial-gradient(1000px 420px at 60% 30%, rgba(255,252,244,.85), transparent 65%),
    radial-gradient(700px 380px at 8% 90%, rgba(210,198,172,.5), transparent 60%),
    #f0ebdf;
}
.um::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix type='matrix' values='0 0 0 0 0.55 0 0 0 0 0.52 0 0 0 0 0.45 0 0 0 0.05 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}
.um svg{width:100%;height:100%;display:block}

/* branches */
.um-branch{
  fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.um-play .um-branch{
  animation:umDraw var(--dur,.6s) cubic-bezier(.4,.1,.4,1) var(--delay,0s) forwards;
}
@keyframes umDraw{to{stroke-dashoffset:0}}

/* blossoms */
.um-cluster{opacity:0}
.um-play .um-cluster{
  animation:umBloom .7s cubic-bezier(.2,1.35,.4,1) var(--bd,1.5s) forwards;
}
@keyframes umBloom{
  0%{opacity:0;transform:scale(.15)}
  62%{opacity:1;transform:scale(1.12)}
  100%{opacity:1;transform:scale(1)}
}

/* ---- cat ---- */
#um-cat{opacity:0}
.um-play #um-cat{
  animation:
    umShow .05s linear 2.6s forwards,
    umJump 1s cubic-bezier(.32,.55,.42,1) 2.6s forwards;
}
@keyframes umShow{to{opacity:1}}
/* 左下から放物線ジャンプして枝(470,205)に着地 */
@keyframes umJump{
  0%{transform:translate(90px,560px) rotate(-16deg)}
  40%{transform:translate(280px,290px) rotate(-9deg)}
  72%{transform:translate(420px,182px) rotate(1deg)}
  100%{transform:translate(470px,205px) rotate(0deg)}
}
#um-poses{transform-box:fill-box;transform-origin:50% 100%}
.um-play #um-poses{animation:umLand .32s ease-out 3.6s}
@keyframes umLand{
  0%{transform:scaleY(1)}
  40%{transform:scaleY(.86)}
  100%{transform:scaleY(1)}
}
/* 方向転換: 右向き→左向き（2Dフリップ） */
#um-cat-flip{transform-box:fill-box;transform-origin:50% 50%}
.um-play #um-cat-flip{animation:umTurn .6s cubic-bezier(.4,.1,.3,1) 4.5s forwards}
@keyframes umTurn{
  0%{transform:scaleX(1)}
  50%{transform:scaleX(.1)}
  100%{transform:scaleX(-1)}
}
/* 立ち→座りのクロスフェード */
#um-pose-sit{opacity:0}
.um-play #um-pose-stand{animation:umFadeOut .35s ease 5.3s forwards}
.um-play #um-pose-sit{animation:umFadeIn .35s ease 5.3s forwards}
@keyframes umFadeOut{to{opacity:0}}
@keyframes umFadeIn{to{opacity:1}}
/* まったりループ: 尻尾ゆらゆら + 呼吸（OS reduced-motion時停止） */
#um-tail{transform-box:fill-box;transform-origin:60% 4%}
.um-play #um-tail{animation:umTail 4.2s ease-in-out 6s infinite alternate}
@keyframes umTail{from{transform:rotate(-7deg)}to{transform:rotate(9deg)}}
#um-sitbody{transform-box:fill-box;transform-origin:50% 100%}
.um-play #um-sitbody{animation:umBreath 3.6s ease-in-out 6s infinite alternate}
@keyframes umBreath{from{transform:scaleY(1)}to{transform:scaleY(1.016)}}

/* 枝の微風（臨場感: 花と小枝がほんのわずかに揺れる。ループはOS reduced-motionで停止） */
#um-blossoms{transform-box:view-box;transform-origin:50% -10%}
.um-play #um-blossoms{animation:umSway 11s ease-in-out 4.5s infinite alternate}
@keyframes umSway{from{transform:rotate(-0.2deg)}to{transform:rotate(0.3deg)}}

/* 舞い落ちる梅びら（ループ） */
.um-fpetal{
  position:absolute;top:-16px;pointer-events:none;
  width:9px;height:8px;border-radius:55% 45% 60% 40%;
  background:radial-gradient(circle at 35% 30%, #e07a5f, #c23b2a);
  opacity:0;
  animation:umFall var(--fd,10s) linear var(--fdel,7s) infinite;
}
@keyframes umFall{
  0%{opacity:0;transform:translate(0,0) rotate(0deg)}
  8%{opacity:.8}
  100%{opacity:0;transform:translate(var(--sway,-90px),60vh) rotate(480deg)}
}

.um__label{
  position:absolute;left:24px;bottom:18px;z-index:2;
  font-size:10px;color:#7a7266;letter-spacing:.18em;
  opacity:0;transition:opacity 1.2s ease .4s;
}
.um-play .um__label{opacity:1}

/* ?static=1 — 完成静止（満開 + 左向きで座る猫） */
.um--static .um-branch{animation:none;stroke-dashoffset:0}
.um--static .um-cluster{animation:none;opacity:1;transform:none}
.um--static #um-cat{animation:none;opacity:1;transform:translate(470px,205px)}
.um--static #um-cat-flip{animation:none;transform:scaleX(-1)}
.um--static #um-pose-stand{animation:none;opacity:0}
.um--static #um-pose-sit{animation:none;opacity:1}
.um--static .um-fpetal{display:none}
.um--static #um-blossoms{animation:none}
.um--static .um__label{opacity:1}

/* OS reduced-motion: ワンショットは再生、ループのみ停止 */
@media (prefers-reduced-motion:reduce){
  .um-play #um-tail,.um-play #um-sitbody,.um-play #um-blossoms{animation:none}
  .um-fpetal{display:none}
}