/* ---- 動き（fx） ---- */
.fx,.fx-group>*{position:absolute}
.fx img{display:block;width:100%;height:100%}
/* カルーセル */
.fx-car{background:var(--bg);overflow:hidden;touch-action:pan-y}
.car-stage{position:absolute;left:0;right:0;top:0;bottom:11%}
.car-card{position:absolute;left:50%;top:50%;height:92%;margin:0;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s,filter .7s;z-index:1;border-radius:6px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.car-card img{height:100%;width:auto;max-width:none}
.car-card.is-on{transform:translate(-50%,-50%) scale(1);opacity:1;z-index:3}
.car-card.is-prev{transform:translate(calc(-50% - var(--off,40%)),-50%) scale(.66);opacity:.55;z-index:2;filter:saturate(.7)}
.car-card.is-next{transform:translate(calc(-50% + var(--off,40%)),-50%) scale(.66);opacity:.55;z-index:2;filter:saturate(.7)}
.car-dots{position:absolute;left:0;right:0;bottom:2%;display:flex;justify-content:center;gap:10px}
.car-dot{width:28px;height:28px;border:0;background:none;padding:0;cursor:pointer;position:relative}
.car-dot::after{content:"";position:absolute;inset:10px;border-radius:50%;background:rgba(0,0,0,.25);transition:background .3s,transform .3s}
.car-dot.is-on::after{background:rgba(0,0,0,.7);transform:scale(1.3)}
.car-nav{position:absolute;top:44%;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.85);box-shadow:0 2px 8px rgba(0,0,0,.2);font-size:26px;line-height:44px;cursor:pointer;z-index:5;color:#333}
.car-prev{left:2%}.car-next{right:2%}
/* 下から順に出てくる */
.fx-stagger{background:var(--bg)}
.fx-slice{opacity:0;transform:translateY(60px)}
.is-play .fx-slice{animation:fx-up .7s cubic-bezier(.2,.9,.25,1.15) forwards;animation-delay:calc(var(--k) * .28s)}
@keyframes fx-up{to{opacity:1;transform:none}}
/* 順番に拡大 */
.fx-pop{transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s,filter .6s;z-index:1}
.fx-pop.is-on{transform:scale(1.07);z-index:4;box-shadow:0 14px 34px rgba(0,0,0,.35);filter:brightness(1.06)}
/* 年表を進む印 */
.tr-bead{width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--c);box-shadow:0 0 0 0 var(--c);transition:left 1s cubic-bezier(.6,0,.3,1);animation:fx-ping 1.6s infinite;z-index:3}
.tr-fill{height:3px;margin-top:-1.5px;background:var(--c);transition:width 1s cubic-bezier(.6,0,.3,1);width:0;z-index:2}
.tr-col{border-radius:8px;background:color-mix(in srgb,var(--c) 10%,transparent);opacity:0;transition:opacity .6s}
.tr-col.is-on{opacity:1}
@keyframes fx-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 55%,transparent)}100%{box-shadow:0 0 0 18px transparent}}
/* 時計 */
.ck-face{height:auto;overflow:visible}
.ck-face line{transform-origin:0 0;transition:transform 1.2s cubic-bezier(.5,0,.3,1)}
.ck-mark{width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:3px solid #f7e01d;opacity:0;transform:scale(.4);transition:opacity .4s,transform .4s}
.ck-mark.is-on{opacity:1;transform:scale(1);animation:fx-ck 1.2s infinite}
.ck-label{border-radius:10px;box-shadow:inset 0 0 0 2px rgba(247,224,29,0);transition:box-shadow .4s,background .4s}
.ck-label.is-on{box-shadow:inset 0 0 0 2px rgba(247,224,29,.85);background:rgba(247,224,29,.07)}
@keyframes fx-ck{50%{transform:scale(1.35)}}
/* スポットライト */
.sp-veil{--x:50%;--y:50%;--r:120px;background:radial-gradient(circle var(--r) at var(--x) var(--y),rgba(255,236,190,.12) 0,rgba(255,236,190,.05) 55%,rgba(4,8,20,.5) 100%);transition:background .2s;pointer-events:none;z-index:2;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.sp-box{border-radius:4px;box-shadow:0 0 0 1px rgba(214,183,120,0);background:rgba(255,226,160,0);transition:box-shadow .6s,background .6s;z-index:3;pointer-events:none}
.sp-box.is-on{box-shadow:0 0 0 1px rgba(214,183,120,.9),0 0 28px rgba(255,214,140,.45);background:rgba(255,226,160,.08)}
.sp-lamp{width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,140,.55),rgba(255,214,140,0) 70%);mix-blend-mode:screen;animation:fx-lamp 3s ease-in-out infinite;z-index:3;pointer-events:none}
@keyframes fx-lamp{50%{opacity:.55;transform:scale(1.15)}}
/* 地図の灯り */
.pa-ring{width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:2px solid #ffd479;opacity:0;transform:scale(.5);transition:opacity .4s,transform .4s;z-index:3;pointer-events:none}
.pa-ring.is-on{opacity:1;transform:scale(1);animation:fx-ck 1.2s infinite}
.pa-light{width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:radial-gradient(circle,#fff6d6 0,#ffcc66 35%,rgba(255,170,60,0) 72%);mix-blend-mode:screen;transition:left 1.4s cubic-bezier(.5,0,.3,1),top 1.4s cubic-bezier(.5,0,.3,1);z-index:4;pointer-events:none;filter:drop-shadow(0 0 10px #ffb84d)}
/* ランプのきらめき */
.fx-twinkle{position:absolute;inset:0;pointer-events:none;z-index:2}
.tw{width:calc(var(--s) * 7px);height:calc(var(--s) * 7px);margin:calc(var(--s) * -3.5px) 0 0 calc(var(--s) * -3.5px);border-radius:50%;background:radial-gradient(circle,rgba(255,250,225,.95) 0,rgba(255,206,110,.55) 35%,rgba(255,180,80,0) 70%);mix-blend-mode:screen;animation:fx-tw var(--d) ease-in-out var(--dl) infinite}
@keyframes fx-tw{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}
/* ロボット */
.rb-bot{z-index:4;transform-origin:50% 100%;animation:fx-bot 3.2s ease-in-out infinite;pointer-events:none}
@keyframes fx-bot{0%,100%{transform:none}18%{transform:translateY(-8%) rotate(-4deg)}34%{transform:translate(-22%,6%) rotate(-14deg)}40%{transform:translate(-22%,10%) rotate(-14deg)}52%{transform:translate(-8%,0) rotate(-4deg)}70%{transform:translateY(-4%) rotate(3deg)}}
.rb-ripple{width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;border:3px solid rgba(255,255,255,.9);opacity:0;animation:fx-rip 3.2s ease-out infinite;z-index:3;pointer-events:none}
@keyframes fx-rip{0%,36%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(.4)}60%{opacity:0;transform:scale(1.5)}100%{opacity:0}}
.rb-say{z-index:5;background:#fff;color:#e2702a;font-weight:700;font-size:clamp(11px,2.4vw,15px);padding:4px 10px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.12);white-space:nowrap;animation:fx-say 3.2s ease-in-out infinite;pointer-events:none}
@keyframes fx-say{0%,20%{opacity:0;transform:translateY(6px)}30%,62%{opacity:1;transform:none}75%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .rb-bot,.rb-ripple,.rb-say,.tw,.sp-lamp,.tr-bead,.ck-mark.is-on,.pa-ring.is-on{animation:none}
  .fx-slice{opacity:1;transform:none}.is-play .fx-slice{animation:none}
  .car-card,.ck-face line,.tr-bead,.tr-fill,.pa-light{transition:none}
}
.pa-item{border-radius:10px;overflow:hidden}
.pa-item.is-on{transform:scale(1.05);box-shadow:0 0 0 1px rgba(255,212,121,.7),0 0 26px rgba(255,190,90,.35)}