/* ===== 共通の動き ===== */
.js .h1 .ln{display:block;overflow:hidden}
.js .h1 .ln>span{display:block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.js .h1.on .ln>span{transform:none}
.js .rv{opacity:0;transform:translateY(32px);transition:opacity .7s ease-out,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .rv.on{opacity:1;transform:none}
.trouble{transition:background .25s ease-out,transform .25s ease-out}
.trouble:has(input:checked){background:var(--accent);transform:translateX(6px)}
.trouble:has(input:checked) .data b{color:var(--ink)}

/* 流れる帯 */
.marquee{overflow:hidden;background:var(--main);color:#fff;border-bottom:2px solid var(--ink);padding:12px 0}
.mq-in{display:flex;gap:20px;width:max-content;animation:mq 28s linear infinite;font-weight:700;font-size:18px;white-space:nowrap}
.mq-in i{font-style:normal;color:var(--accent)}
@keyframes mq{to{transform:translateX(-50%)}}

/* 比較：順番に点灯 */
.js .compare .cmp li{transition:opacity .3s ease-out,background .3s ease-out,color .3s ease-out}
.js .compare:not(.on) .cmp-on li.on{opacity:.35;background:transparent;color:inherit}
.js .compare.on .cmp-on li.on{transition-delay:calc(var(--i) * .18s)}

/* 挿し絵：ゆっくり寄る */
.ill{overflow:hidden}
.ill img{transition:transform 8s ease-out;transform:scale(1.12)}
.ill.on img{transform:scale(1)}

/* ===== 案K：石膏像のモーショングラフィックス ===== */
.stage{position:relative;aspect-ratio:1/1;margin:0;perspective:900px;overflow:visible}
.stage>*{position:absolute;will-change:transform}
.stage .shp-circle{left:-4%;top:2%;width:52%;fill:var(--accent)}
.stage .shp-black{right:-2%;top:6%;width:70%;height:34%;background:#111;clip-path:polygon(100% 0,100% 100%,0 100%)}
.stage .shp-bar{left:30%;top:58%;width:75%;height:22%;background:var(--accent);clip-path:polygon(0 100%,100% 0,100% 55%,10% 100%)}
.stage img{border:0!important}
.stage .st{height:auto;filter:drop-shadow(0 18px 18px rgba(0,0,0,.18))}
.stage .st2{left:4%;top:0;width:47%}
.stage .st3{left:50%;top:3%;width:46%}
.stage .st2,.stage .st3{-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.stage .st1{left:-3%;top:47%;width:52%}
.stage .st4{left:47%;top:48%;width:52%}
.stage .chart{left:75.5%;top:65%;width:20%;transform:rotate(-6deg)}
.chart .board{fill:#F7F2E7;stroke:#111;stroke-width:1.5}
.chart .bar{fill:var(--accent);transform-box:fill-box;transform-origin:bottom;transform:scaleY(0)}
.chart .arrow,.chart .arrowhead{fill:none;stroke:#111;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:140;stroke-dashoffset:140}
.stage .tag{font-size:12px;font-weight:700;background:var(--card);border:2px solid var(--ink);padding:2px 8px;white-space:nowrap;opacity:0}
.stage .tag1{left:-2%;top:92%}.stage .tag2{left:2%;top:40%}.stage .tag3{left:64%;top:41%}.stage .tag4{left:76%;top:93%}

/* 登場の振り付け（.play で開始） */
.stage .shp-circle{transform:scale(0);transition:transform 1s cubic-bezier(.2,1.4,.3,1)}
.stage .shp-black{clip-path:polygon(100% 0,100% 0,100% 0);transition:clip-path .8s cubic-bezier(.7,0,.2,1) .25s}
.stage .shp-bar{clip-path:polygon(0 100%,0 100%,0 100%,0 100%);transition:clip-path .8s cubic-bezier(.7,0,.2,1) .45s}
.stage .st{opacity:0;transition:opacity .9s ease-out,translate 1.1s cubic-bezier(.2,.8,.2,1),rotate 1.1s cubic-bezier(.2,.8,.2,1)}
.stage .st2{translate:-30% 0;rotate:-8deg;transition-delay:.5s}
.stage .st3{translate:30% -10%;rotate:8deg;transition-delay:.65s}
.stage .st1{translate:-20% 30%;rotate:6deg;transition-delay:.8s}
.stage .st4{translate:20% 30%;rotate:-6deg;transition-delay:.95s}
.stage.play .shp-circle{transform:scale(1)}
.stage.play .shp-black{clip-path:polygon(100% 0,100% 100%,0 100%)}
.stage.play .shp-bar{clip-path:polygon(0 100%,100% 0,100% 55%,10% 100%)}
.stage.play .st{opacity:1;translate:0 0;rotate:0deg}
.stage.play .chart .bar{animation:grow .7s cubic-bezier(.2,1.3,.4,1) forwards}
.stage.play .chart .b1{animation-delay:1.8s}.stage.play .chart .b2{animation-delay:1.95s}.stage.play .chart .b3{animation-delay:2.1s}.stage.play .chart .b4{animation-delay:2.25s}
.stage.play .chart .arrow{animation:draw 1s ease-out 2.5s forwards}
.stage.play .chart .arrowhead{animation:draw .3s ease-out 3.3s forwards}
.stage.play .tag{animation:pop .4s cubic-bezier(.2,1.5,.4,1) forwards}
.stage.play .tag2{animation-delay:2.9s}.stage.play .tag3{animation-delay:3.05s}.stage.play .tag1{animation-delay:3.2s}.stage.play .tag4{animation-delay:3.35s}
@keyframes grow{to{transform:scaleY(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
/* 待機中：像がゆっくり呼吸する */
.stage.idle .st2{animation:bob 6s ease-in-out infinite}
.stage.idle .st3{animation:bob 7s ease-in-out -2s infinite}
.stage.idle .st1{animation:bob 6.5s ease-in-out -1s infinite}
.stage.idle .st4{animation:bob 7.5s ease-in-out -3s infinite}
@keyframes bob{50%{translate:0 -10px}}

/* 案K：ほかの章の像も奥から出てくる */
.t-k .role-img{overflow:hidden;background:var(--accent);display:flex;align-items:flex-end;justify-content:center}
.t-k .role-img img{object-fit:contain;height:auto;width:100%}
.t-k .role-img img{transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.js .t-k .role:not(.on) .role-img img{transform:translateY(30%) scale(1.1)}
.t-k .role:hover .role-img img{transform:scale(1.05)}

/* ===== 案E：1人ずつ跳ねて登場・待機中はゆらゆら ===== */
.lineup img{border:0!important}
.lineup{display:flex;justify-content:center;align-items:flex-end;gap:2%;overflow:hidden;height:min(62vh,560px);padding-top:24px;border-bottom:2px solid var(--ink);background:radial-gradient(circle at 50% 120%,var(--sub) 0 38%,transparent 38.2%)}
.l-stack .lineup .fig{max-height:none;object-fit:contain;border:0;width:auto;height:94%;transform-origin:50% 100%;opacity:0;translate:0 40%}
.lineup.play .fig{animation:jump .9s cubic-bezier(.2,1.4,.4,1) forwards}
.lineup.play .fig2{animation-delay:.15s}.lineup.play .fig3{animation-delay:.3s}.lineup.play .fig4{animation-delay:.45s}
.lineup.idle .fig{opacity:1;translate:0 0;animation:sway 3.2s ease-in-out infinite}
.lineup.idle .fig2{animation-delay:-.8s}.lineup.idle .fig3{animation-delay:-1.6s}.lineup.idle .fig4{animation-delay:-2.4s}
@keyframes jump{to{opacity:1;translate:0 0}}
@keyframes sway{0%,100%{rotate:-1.5deg}50%{rotate:1.5deg}}
.t-e .role-img img{transition:transform .4s cubic-bezier(.2,1.4,.4,1);transform-origin:50% 100%}
.t-e .role:hover .role-img img{transform:rotate(-3deg) scale(1.04)}

/* ===== 案B：ふわっと浮く ===== */
.float-in img{animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.t-b .role-img img{transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
.t-b .role:hover .role-img img{transform:translateY(-6px) scale(1.06)}

@media (max-width:767px){.stage .tag{font-size:11px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.js .h1 .ln>span{opacity:1;transform:none}
  .stage .st,.stage .tag,.lineup .fig{opacity:1;translate:0 0;rotate:0deg}
  .stage .shp-circle,.chart .bar{transform:none}
  .chart .arrow,.chart .arrowhead{stroke-dashoffset:0}
}

.t-e .role-img{background:var(--sub);display:flex;align-items:flex-end;justify-content:center;padding-top:16px}
.t-e .role-img img{object-fit:contain;height:100%;width:auto}
@media (max-width:767px){.lineup{height:48vh}}
.t-e .role-img{overflow:hidden;aspect-ratio:3/5}
.t-e .role-img img{height:92%;max-width:100%}
@media (max-width:899px){.l-split .hero-img.stage{order:-1;width:92%;margin:0 auto 8px}}