/* なんじぃ演出「ときどき現れる」（方式B・レーン20・2026-07-13着工）。
   登場＝四季（SEASONS）節・下端からひょっこり顔を出して手を振り引っ込む（約2.8秒・セッション内1回）。
   撤去＝index.phpの差し込み1行＋本ファイル＋nanji-appear.js＋assets/nanji-chara/ の削除で現行に完全復元。 */

.nanji-appear{position:absolute;right:clamp(12px,4vw,48px);bottom:0;
  width:clamp(64px,10vw,120px);              /* モバイル控えめ（64px）〜デスクトップ120px */
  overflow:hidden;                            /* 節の下端で刈り込み＝「顔を出す」の枠 */
  pointer-events:none;                        /* 本文・リンク操作に一切干渉しない */
  z-index:5}
.nanji-appear img{display:block;width:100%;height:auto;transform:translateY(105%)}

/* fixed方式：ビューポート下端からひょっこり。--nanji-x＝端からのランダム横位置（JSが毎回設定）。
   右側＝右レールの左隣が基準。左側＝--leftバリアント。基本規則の後＝後勝ちで上書き。 */
.nanji-appear--fixed{position:fixed;left:auto;
  right:calc(var(--rail-w,76px) + var(--nanji-x,14px));bottom:0;z-index:15}
.nanji-appear--fixed.nanji-appear--left{right:auto;left:var(--nanji-x,14px)}
/* 900px以下＝レールが下バー（高さ60px・vn.cssと同じ分岐）になるため、バーの上端から出す
   （bottom:0のままだとバー(z20)の裏に隠れて頭だけ覗く）。 */
@media(max-width:900px){
  .nanji-appear--fixed{right:var(--nanji-x,12px);bottom:60px}
  .nanji-appear--fixed.nanji-appear--left{right:auto;left:var(--nanji-x,12px)}
}

/* 顔を出す→手を振る（軽い首振り）→引っ込む。transform/opacityのみ（GPU合成） */
.nanji-appear.is-on img{animation:nanji-peek 2.8s ease-in-out forwards;transform-origin:50% 90%}
@keyframes nanji-peek{
  0%  {transform:translateY(105%)}
  20% {transform:translateY(14%) rotate(0deg)}
  32% {transform:translateY(14%) rotate(-4deg)}
  44% {transform:translateY(14%) rotate(4deg)}
  56% {transform:translateY(14%) rotate(-3deg)}
  66% {transform:translateY(14%) rotate(0deg)}
  80% {transform:translateY(14%)}
  100%{transform:translateY(105%)}
}

/* reduced-motion＝完全非表示（演出は動きが本体のため静止も出さない） */
@media (prefers-reduced-motion:reduce){.nanji-appear{display:none}}