/* about_video/ja_chara.css：aboutページのキャラを動かす（ja_chara.js と対）
   - 飛ぶキャラ（わたり・ホウ博士）は画面の外から飛んできて着地し、しばらくしたら外へ飛んでいく
   - 地上のキャラはゆらゆら・身ぶりを替える・ときどき喜ぶ
   - 右下に、ちゅらが「トップへ」の札を掲げるボタン
   動きを減らす設定（prefers-reduced-motion）の人には、動きを付けない */

/* 飛ぶ・喜ぶときのコマ送り用の箱（JSが section の中に置く） */
.ac-actor { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 30; will-change: transform; }
.ac-actor > i { display: block; width: 100%; height: 100%; background-repeat: no-repeat; transform-origin: 50% 100%; }
.ac-trail { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 29; overflow: visible; }
.ac-trail path { fill: none; stroke-linecap: round; transition: opacity .9s ease; }

/* 地上のキャラ：その場でゆらゆら（周期と遅れはJSで1体ずつ変える） */
.ac-idle { transform-origin: 50% 100%; animation: ac-bob var(--ac-dur, 3.2s) ease-in-out var(--ac-delay, 0s) infinite; }
@keyframes ac-bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-4px) rotate(-2deg); }
    65% { transform: translateY(-1px) rotate(1.6deg); }
}
/* 身ぶりを替えた瞬間のポンッ */
.ac-pop { animation: ac-pop .45s cubic-bezier(.3, 1.6, .5, 1) !important; transform-origin: 50% 100%; }
@keyframes ac-pop { 0% { transform: scale(.86, 1.1); } 60% { transform: scale(1.06, .95); } 100% { transform: scale(1); } }
/* 着地：ぐっとつぶれて戻る */
.ac-land { animation: ac-land .55s cubic-bezier(.3, 1.5, .5, 1) !important; transform-origin: 50% 100%; }
@keyframes ac-land { 0% { transform: scale(1.12, .78); } 55% { transform: scale(.95, 1.06); } 100% { transform: scale(1); } }
/* 飛び立つ前に、しゃがむ */
.ac-crouch { transform: scale(1.1, .84) !important; transform-origin: 50% 100%; transition: transform .14s ease-in; animation: none !important; }
/* 飛んでいる間・喜んでいる間は、元の絵を隠す（場所はそのまま） */
.ac-away { opacity: 0 !important; transition: none !important; }

/* 着地の砂けむり・きらきら（SVG） */
.ac-fx { position: absolute; pointer-events: none; z-index: 31; overflow: visible; }
.ac-fx .puff { transform-box: fill-box; transform-origin: center; animation: ac-puff .7s ease-out forwards; }
.ac-fx .spark { transform-box: fill-box; transform-origin: center; animation: ac-spark .8s ease-out forwards; }
@keyframes ac-puff { 0% { transform: translate(0, 0) scale(.4); opacity: .9; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.3); opacity: 0; } }
@keyframes ac-spark { 0% { transform: scale(0) rotate(0deg); opacity: 1; } 60% { opacity: 1; } 100% { transform: scale(1.2) rotate(90deg); opacity: 0; } }

/* ふきだし */
.ac-bub { position: absolute; z-index: 32; pointer-events: none; background: #fff; color: #102b3f; font-weight: 900; font-size: .82rem; line-height: 1.3; white-space: nowrap; padding: 5px 11px; border-radius: 14px; box-shadow: 0 6px 16px rgba(8, 40, 70, .2); transform: translate(-50%, -100%) scale(.6); opacity: 0; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; }
.ac-bub::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #fff; }
.ac-bub.on { transform: translate(-50%, -100%) scale(1); opacity: 1; }

/* ===== 右下：ちゅらの「トップへ」ボタン ===== */
.ac-top { position: fixed; right: 14px; bottom: 10px; z-index: 900; width: 112px; height: 150px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transform: translateX(150%); transition: transform .9s cubic-bezier(.25, 1.2, .4, 1); }
.ac-top.show { transform: translateX(0); }
.ac-top:focus-visible { outline: 3px solid #18aeca; outline-offset: 2px; border-radius: 16px; }
.ac-top-in { position: absolute; inset: 0; animation: ac-float 3.4s ease-in-out infinite; }
@keyframes ac-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
.ac-top-c { position: absolute; left: 50%; bottom: 14px; width: 100px; height: auto; margin-left: -50px; filter: drop-shadow(0 6px 10px rgba(8, 40, 70, .3)); }
.ac-top-sign { position: absolute; left: 50%; top: 0; width: 84px; height: 54px; margin-left: -42px; overflow: visible; transform-origin: 50% 100%; animation: ac-wobble 3.4s ease-in-out infinite; }
@keyframes ac-wobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.ac-top-wave { position: absolute; left: -6px; right: -6px; bottom: 0; height: 22px; overflow: visible; }
.ac-top-wave path { animation: ac-wave 2.4s linear infinite; }
.ac-top-wave path + path { animation-duration: 3.4s; animation-direction: reverse; }
@keyframes ac-wave { from { transform: translateX(0); } to { transform: translateX(-40px); } }
.ac-top-swim { position: absolute; left: 50%; bottom: 10px; width: 120px; height: 120px; margin-left: -60px; background-repeat: no-repeat; opacity: 0; transform-origin: 50% 50%; }
.ac-top:hover .ac-top-sign { animation: ac-wave-sign .5s ease-in-out infinite alternate; }
@keyframes ac-wave-sign { from { transform: rotate(-9deg) translateY(-2px); } to { transform: rotate(9deg) translateY(-4px); } }
/* 押したら：札を手放して、上へ泳いでいく */
.ac-top.go { transition: none; }
.ac-top.go .ac-top-in { animation: none; }
.ac-top.go .ac-top-c, .ac-top.go .ac-top-sign, .ac-top.go .ac-top-wave { opacity: 0; transition: opacity .15s; }
.ac-top.go .ac-top-swim { opacity: 1; }
@media (max-width: 640px) {
    .ac-top { right: 6px; bottom: 6px; width: 84px; height: 114px; }
    .ac-top-c { width: 76px; margin-left: -38px; bottom: 11px; }
    .ac-top-sign { width: 66px; height: 42px; margin-left: -33px; }
    .ac-top-swim { width: 92px; height: 92px; margin-left: -46px; }
}
@media (prefers-reduced-motion: reduce) {
    .ac-top { transition: none; }
    .ac-top-in, .ac-top-sign, .ac-top-wave path { animation: none !important; }
}