/* =========================================================
   animation.css … アニメーション指定（実装でそのまま流用できます）
   記号 A〜F・H〜J は指示書の「動きの種類」と対応しています。
   ========================================================= */

/* A 上下カクカク：「下」⇔「少し上」を0.8秒ごとにパッと切り替え */
.anim-hop { animation: hop 1.6s steps(1) infinite; }
@keyframes hop { 0% { transform: translateY(0); } 50% { transform: translateY(-15%); } }

/* B ときどきピョン：ふだんは静止、約5秒に1回、少し上へ跳ねて約0.45秒で戻る */
.anim-jump { transform-origin: 50% 100%; animation: jump 4.9s steps(1) infinite; }
.anim-jump--late { animation-delay: -2.4s; }   /* 同じ画面に複数あるときは時間をずらす */
@keyframes jump {
  0%    { transform: none; }
  90.8% { transform: translate(-2%, -4%) rotate(-2deg); }
  100%  { transform: translate(-2%, -4%) rotate(-2deg); }
}

/* C 星の傾き：左右15度ずつ傾くのを0.8秒ごとにパッと切り替え */
.anim-tilt { animation: tilt 1.6s steps(1) infinite; }
@keyframes tilt { 0% { transform: rotate(-15deg); } 50% { transform: rotate(15deg); } }

/* D 見出しを1文字ずつ表示（文字の分割と開始は animation.js） */
.js .anim-head .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--i) * .09s);   /* 1文字ごとに0.09秒ずつ遅らせる */
}
.js .anim-head.is-in .ch { opacity: 1; transform: none; }

/* E 横の無限ループ：中身を2組並べ、半分（1組分）動かして継ぎ目を消す */
.marquee { position: absolute; left: 0; width: 100%; overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: loop 50s linear infinite; }
.marquee__group { display: flex; flex-shrink: 0; }
.marquee--voices:hover .marquee__track { animation-play-state: paused; }   /* カードを押しやすいよう、マウスを乗せると停止 */
.marquee--photos .marquee__track { animation-duration: 65s; }   /* 写真10枚：動画カードとほぼ同じ速さになるよう1周65秒 */
@keyframes loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* F 下からシュポッ：画面に入ったら1回だけ、下から飛び出して少し弾んで止まる（開始は animation.js） */
.js .anim-pop { opacity: 0; transform: translateY(35%) scale(.92); transform-origin: 50% 100%; }
.js .anim-pop.is-in { animation: pop .7s cubic-bezier(.2,.9,.3,1.4) forwards; }
.js .anim-pop--2.is-in { animation-delay: .12s; }   /* 並んでいる人物は少しずつ遅らせる */
.js .anim-pop--3.is-in { animation-delay: .24s; }
@keyframes pop { 0% { opacity: 0; transform: translateY(35%) scale(.92); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }

/* H 記事スライド：4秒ごとに1記事分左へスライド。最後まで行ったら先頭に戻らず、そのまま続けて流れる（制御は animation.js） */
.slider__track { display: flex; will-change: transform; }
.slider__track.is-moving { transition: transform .8s cubic-bezier(.65,0,.35,1); }
.slider__dots { display: flex; justify-content: center; }
.slider__dot { background: #e3e3e3; transition: width .4s ease, background-color .4s ease; }
.slider__dot.is-active { background: #036242; }

/* I 線のゆらぎ：見出し左右の線が、根元を軸に「元の位置」⇔「少し開いて伸びた位置」を0.8秒ごとにパッと切り替え（カクカク） */
svg.anim-sway { overflow: visible; }
.anim-sway path { transform-box: fill-box; animation: sway 1.6s steps(1) infinite; }
.anim-sway--left  path { transform-origin: 100% 100%; --r: -8deg; }   /* 左の線は右下が軸 */
.anim-sway--right path { transform-origin: 0% 100%;   --r: 8deg; }    /* 右の線は左下が軸 */
@keyframes sway { 0% { transform: none; } 50% { transform: rotate(var(--r)) scale(1.08); } }

/* J 点線が上から伸びる：画面に入ったら1回だけ、上から下へ1.4秒かけて現れる（開始は animation.js） */
.js .anim-draw > * { clip-path: inset(0 0 100% 0); }   /* 枠ではなく中身を隠す（枠ごと隠すと画面に入ったことを検知できないため） */
.js .anim-draw.is-in > * { clip-path: inset(0 0 0 0); transition: clip-path 1.4s cubic-bezier(.4,0,.2,1) .2s; }

/* 動きを減らす設定の人には、すべて静止表示 */
@media (prefers-reduced-motion: reduce) {
  .anim-hop, .anim-jump, .anim-tilt, .marquee__track, .anim-sway path { animation: none; }
  .js .anim-head .ch, .js .anim-pop { opacity: 1; transform: none; transition: none; animation: none !important; }
  .js .anim-draw > * { clip-path: none; transition: none; }
}