/* SBG BRUSH — brush-twist.css v1.0
   中幕間: ネジリブラシ生成アニメ（螺旋芯線が横に伸び、毛が生えて完成）
   Scope: .tw / tw- prefix. Zero deps. Scroll-triggered (.tw-play). */

.tw{
  position:relative;width:100%;height:100%;
  background:
    radial-gradient(900px 300px at 50% 55%, rgba(201,164,78,.05), transparent 70%),
    linear-gradient(160deg,#202228 0%,#17181B 100%);
}
.tw svg{width:100%;height:100%;display:block}

/* core wires: draw right -> left */
.tw-wire{
  fill:none;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.tw-play .tw-wire{
  animation:twDraw var(--dur,1.8s) cubic-bezier(.35,.1,.3,1) var(--delay,0s) forwards;
}
@keyframes twDraw{to{stroke-dashoffset:0}}

/* bristles: slice bundles pop in R->L (もさっと生える) */
.tw-slice{opacity:0;transform:scaleY(.15);transform-box:fill-box;transform-origin:50% 50%}
.tw-play .tw-slice{
  animation:twSlice .22s cubic-bezier(.2,1.3,.4,1) var(--sd,1s) forwards;
}
@keyframes twSlice{
  60%{opacity:1;transform:scaleY(1.08)}
  100%{opacity:1;transform:scaleY(1)}
}

/* brass pipe: slides in AFTER 毛刈り, then crimps (抜け止め) */
.tw-pipe{opacity:0}
.tw-play .tw-pipe{animation:twPipeIn .7s cubic-bezier(.2,.85,.3,1) 4.4s forwards}
@keyframes twPipeIn{
  from{opacity:0;transform:translateX(240px)}
  to{opacity:1;transform:translateX(0)}
}
.tw-pipebody{transform-box:fill-box;transform-origin:50% 50%}
.tw-play .tw-pipebody{animation:twSqueeze .38s ease 5.3s}
@keyframes twSqueeze{
  0%{transform:scaleY(1)}
  45%{transform:scaleY(.92)}
  100%{transform:scaleY(1)}
}
.tw-crimp{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:50% 50%}
.tw-play .tw-crimp{animation:twCrimp .3s cubic-bezier(.2,1.5,.4,1) 5.3s forwards}
@keyframes twCrimp{to{opacity:1;transform:scale(1)}}

/* 毛刈りの切屑 */
.tw-bit{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.tw-play .tw-bit{animation:twBit .9s ease-in var(--btd,2.6s) forwards}
@keyframes twBit{
  0%{opacity:0;transform:translateY(0) rotate(0deg)}
  15%{opacity:.9}
  100%{opacity:0;transform:translateY(90px) rotate(140deg)}
}

/* polish glint sweep (loop — respects OS reduced-motion) */
.tw-glint{opacity:0;mix-blend-mode:screen}
.tw-play .tw-glint{animation:twGlint 6s linear 6.7s infinite}
@keyframes twGlint{
  0%{opacity:0;transform:translateX(0)}
  10%{opacity:.13}
  55%{opacity:.13}
  65%{opacity:0;transform:translateX(620px)}
  100%{opacity:0;transform:translateX(620px)}
}

.tw__label{
  position:absolute;left:24px;bottom:18px;z-index:2;
  font-size:10px;color:var(--fog);letter-spacing:.18em;
  opacity:0;transition:opacity 1.2s ease .4s;
}
.tw-play .tw__label{opacity:1}

/* ?static=1 — 完全静止（完成状態） */
.tw--static .tw-wire{animation:none;stroke-dashoffset:0}
.tw--static .tw-slice{animation:none;opacity:1;transform:none}
.tw--static .tw-pipe{animation:none;opacity:1;transform:none}
.tw--static .tw-crimp{animation:none;opacity:1;transform:none}
.tw--static .tw-bit{display:none}
.tw--static .tw-blade{opacity:0!important}
.tw--static .tw-glint{animation:none;opacity:0}
.tw--static .tw__label{opacity:1}

/* OS reduced-motion: ワンショットは再生、ループ（グリント）のみ停止 */
@media (prefers-reduced-motion:reduce){
  .tw-play .tw-glint{animation:none}
}