/* パタパタ（駅の発車標）の板の見た目と、字の入れ替わり。flapkit.js が並べた板に効く（案5の別版で使う） */
.fl{
  position:relative; border-radius:12rem; overflow:hidden; perspective:600rem;
  background:linear-gradient(180deg, #1b2840 0 50%, #141f34 50% 100%);
  box-shadow:inset 0 2rem 0 rgba(255,255,255,.06);
}
.fl::after{   /* 真ん中の割れ目 */
  content:""; position:absolute; left:0; right:0; top:calc(50% - 2rem); height:4rem; background:#050a14; z-index:3;
}
.fc{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:900; line-height:1; color:#fff; opacity:0;
}
.fc.oc{ color:var(--orange); }
.go .fc{ animation:fcShow var(--s) steps(1) var(--t); }
.go .fc.last{ animation:fcStay .01s steps(1) var(--t) forwards; }
@keyframes fcShow{ 0%,100%{ opacity:1; } }
@keyframes fcStay{ from, to{ opacity:1; } }   /* from も to も 1：to だけだと終わりの計算誤差（進み 0.99999…）で steps(1) が 0 のまま止まり、最後の画面が出ない（2026/10/28） */
/* めくれる上半分（字が替わるたびに1回倒れる） */
.fl i{
  position:absolute; left:0; right:0; top:0; height:50%; z-index:2; transform-origin:50% 100%;
  background:linear-gradient(180deg, rgba(40,58,90,.95), rgba(24,36,58,.9)); opacity:0;
}
.go .fl i{ animation:leaf var(--s) linear var(--t0) var(--n); }
@keyframes leaf{ 0%{ opacity:.95; transform:rotateX(0); } 100%{ opacity:0; transform:rotateX(-88deg); } }
/* 小さな板（Instagram の名前） */
.fl.sm{ border-radius:6rem; perspective:300rem; }
.fl.sm::after{ top:calc(50% - 1rem); height:2rem; }
.fl.sm .fc{ font-family:var(--num); font-weight:800; }