/* sample2 — M-108 クリップ形状モーフ / M-178 残り日数の板 / M-111 並べ替え / M-087 ページ遷移（個別実装）。
   形はすべて12頂点の polygon()。影・ぼかし・グラデーションは使わない。 */
.s2-shape{display:block;background:#000;transition:clip-path .55s cubic-bezier(.22,1,.36,1);will-change:clip-path}
.s2-shape.is-instant{transition:none}
.s2-shape--paper{background:#fff}
.s2-shape--iris{background:#7373ff}
.s2-shape[data-form="strip"]:not([data-cur]),
.s2-shape[data-cur="strip"]{clip-path:polygon(0% 47%,20% 47%,40% 47%,60% 47%,80% 47%,100% 47%,100% 53%,80% 53%,60% 53%,40% 53%,20% 53%,0% 53%)}
.s2-shape[data-form="rect"]:not([data-cur]),
.s2-shape[data-cur="rect"]{clip-path:polygon(0% 0%,20% 0%,40% 0%,60% 0%,80% 0%,100% 0%,100% 100%,80% 100%,60% 100%,40% 100%,20% 100%,0% 100%)}
.s2-shape[data-form="semi"]:not([data-cur]),
.s2-shape[data-cur="semi"]{clip-path:polygon(0% 100%,3.8% 61.7%,14.6% 29.3%,30.9% 7.6%,50% 0%,69.1% 7.6%,85.4% 29.3%,96.2% 61.7%,100% 100%,75% 100%,50% 100%,25% 100%)}
.s2-shape[data-form="quarter"]:not([data-cur]),
.s2-shape[data-cur="quarter"]{clip-path:polygon(0% 0%,19.5% 1.9%,38.3% 7.6%,55.6% 16.9%,70.7% 29.3%,83.1% 44.4%,92.4% 61.7%,98.1% 80.5%,100% 100%,66.7% 100%,33.3% 100%,0% 100%)}
.s2-shape[data-form="polyA"]:not([data-cur]),
.s2-shape[data-cur="polyA"]{clip-path:polygon(8% 4%,38% 0%,70% 6%,100% 0%,96% 34%,100% 66%,88% 100%,58% 92%,30% 100%,4% 94%,0% 52%,4% 22%)}
.s2-shape[data-form="polyB"]:not([data-cur]),
.s2-shape[data-cur="polyB"]{clip-path:polygon(0% 10%,30% 0%,62% 12%,100% 0%,100% 38%,92% 70%,100% 100%,62% 90%,34% 100%,10% 88%,4% 56%,8% 30%)}
.s2-shape[data-form="house"]:not([data-cur]),
.s2-shape[data-cur="house"]{clip-path:polygon(50% 0%,75% 18%,100% 36%,100% 68%,100% 100%,67% 100%,33% 100%,0% 100%,0% 68%,0% 36%,25% 18%,37.5% 9%)}
.s2-shape[data-form="window"]:not([data-cur]),
.s2-shape[data-cur="window"]{clip-path:polygon(0% 0%,25% 0%,50% 0%,50% 22%,75% 22%,100% 22%,100% 100%,66% 100%,33% 100%,0% 100%,0% 66%,0% 33%)}
.s2-shape[data-form="unravel"]:not([data-cur]),
.s2-shape[data-cur="unravel"]{clip-path:polygon(10% 0%,46% 6%,80% 0%,100% 18%,88% 44%,100% 70%,84% 100%,52% 88%,22% 100%,0% 78%,12% 48%,0% 22%)}
.s2-shape[data-form="tri"]:not([data-cur]),
.s2-shape[data-cur="tri"]{clip-path:polygon(40% 0%,50% 25%,60% 50%,70% 75%,80% 100%,60% 100%,40% 100%,20% 100%,0% 100%,10% 75%,20% 50%,30% 25%)}
.s2-shape[data-form="dshape"]:not([data-cur]),
.s2-shape[data-cur="dshape"]{clip-path:polygon(0% 0%,28% 0%,55% 0%,78% 12%,94% 32%,100% 50%,94% 68%,78% 88%,55% 100%,28% 100%,0% 100%,0% 50%)}
/* 読み込み前に最初の形（細い帯）にしておく。JS が動かない環境（s2-js なし）では最終形のまま */
.s2-js .s2-shape[data-from]:not([data-cur]){clip-path:polygon(0% 47%,20% 47%,40% 47%,60% 47%,80% 47%,100% 47%,100% 53%,80% 53%,60% 53%,40% 53%,20% 53%,0% 53%)}

/* ---------- M-178 残り日数の板 ---------- */
.s2-board{display:grid;gap:6px;justify-items:start}
.s2-board__row{display:inline-flex;gap:2px;background:#000;padding:.12em .3em;white-space:pre;font-family:"Inter","Noto Sans JP",sans-serif;font-weight:700;font-size:clamp(14px,2.4cqw,34px);line-height:1;color:#fff}
.s2-board.is-built .s2-board__row{background:transparent;padding:0}
.s2-flap{position:relative;display:inline-block;width:.82em;height:1.28em;perspective:360px}
.s2-flap>i{position:absolute;left:0;width:100%;height:50%;overflow:hidden;background:#000;font-style:normal;text-align:center;backface-visibility:hidden}
.s2-flap>i>b{position:absolute;left:0;width:100%;height:1.28em;line-height:1.28em;font-weight:inherit}
.s2-flap-t,.s2-flap-ft{top:0;border-radius:.12em .12em 0 0}
.s2-flap-b,.s2-flap-fb{bottom:0;border-radius:0 0 .12em .12em}
.s2-flap-b>b,.s2-flap-fb>b{top:-.64em}
.s2-flap-ft{transform-origin:50% 100%;z-index:2}
.s2-flap-fb{transform-origin:50% 0;transform:rotateX(90deg);z-index:3}
.s2-flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:#7373ff;z-index:4}
.s2-flap.is-flip .s2-flap-ft{animation:s2-flap-top .07s ease-in forwards}
.s2-flap.is-flip .s2-flap-fb{animation:s2-flap-bot .07s .07s ease-out forwards}
@keyframes s2-flap-top{to{transform:rotateX(-90deg)}}
@keyframes s2-flap-bot{to{transform:rotateX(0)}}
.s2-board__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- M-087 ページ遷移（sample2 のページ同士だけ） ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:s2-vt-out .22s ease both}
::view-transition-new(root){animation:s2-vt-in .3s ease both}
@keyframes s2-vt-out{to{opacity:0}}
@keyframes s2-vt-in{from{opacity:0}}
.s2-rail{view-transition-name:s2-rail}
.s2-topbar{view-transition-name:s2-topbar}

/* ---------- M-111 絞り込みの並べ替え ---------- */
html.s2-vt-local::view-transition-old(root),
html.s2-vt-local::view-transition-new(root){animation:none}
::view-transition-group(.s2-card){animation-duration:.45s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(.s2-card){animation:s2-vt-out .2s both}
::view-transition-new(.s2-card){animation:s2-vt-in .35s .1s both}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .s2-shape{transition-duration:.01ms}
  .s2-flap.is-flip .s2-flap-ft,.s2-flap.is-flip .s2-flap-fb{animation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .s2-panel{transition-duration:.01ms!important}
}