/* ==========================================================================
   モーション（v4）
   スクロールで、文字やコンテンツが柔らかく浮かび上がる。
   派手に動かさない。すべて prefers-reduced-motion で停止する。
   ========================================================================== */

/* --- ページ読み込み時の軽いフェード ------------------------------------- */
@keyframes phn-page-in { from { opacity: 0; } to { opacity: 1; } }
.phn-body { animation: phn-page-in 480ms var(--phn-ease) both; }

/* --- スクロールで現れる（Fade Up）----------------------------------------
   opacity 0→1 / translateY(20px)→0 / 0.9 秒 / 減速しながら止まる。
   JavaScript が使えない環境では最初から表示される。 */
.js .phn-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--phn-reveal-duration) var(--phn-ease),
    transform var(--phn-reveal-duration) var(--phn-ease),
    filter var(--phn-reveal-duration) var(--phn-ease);
  transition-delay: var(--phn-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js .phn-reveal.is-visible { opacity: 1; transform: none; filter: none; }

/* 要素の種類でわずかに動きを変える（派手にはしない）
   見出し：16px + blur ／ 本文：12px ／ カード：24px + 時間差 ／ イラスト：scale 0.96 → 1 */
.js .phn-reveal--blur { transform: translateY(16px); filter: blur(5px); }
.js .phn-reveal--text { transform: translateY(12px); }
.js .phn-reveal--card { transform: translateY(24px); }
.js .phn-reveal--ill  { transform: scale(0.96); transform-origin: 50% 60%; }
.js .phn-reveal.is-visible { transform: none; }

/* --- ファーストビューの時間差表示 ----------------------------------------
   面 → 英字ラベル → タイトル（blur） → 本文 → ボタン → イラスト */
@keyframes phn-hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes phn-hero-blur { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes phn-hero-fade { from { opacity: 0; } to { opacity: 1; } }

.phn-hero--enter .phn-hero__stage-1 { animation: phn-hero-fade 1000ms var(--phn-ease) 0ms both; }
.phn-hero--enter .phn-hero__stage-2 { animation: phn-hero-in 900ms var(--phn-ease) 200ms both; }
.phn-hero--enter .phn-hero__stage-3 { animation: phn-hero-blur 1000ms var(--phn-ease) 320ms both; }
.phn-hero--enter .phn-hero__stage-4 { animation: phn-hero-in 900ms var(--phn-ease) 520ms both; }
.phn-hero--enter .phn-hero__stage-5 { animation: phn-hero-in 900ms var(--phn-ease) 680ms both; }
.phn-hero--enter .phn-hero__stage-6 { animation: phn-hero-in 1000ms var(--phn-ease) 600ms both; }

/* --- イラストのごくゆっくりした浮遊（1画面に 1〜2 個まで）---------------- */
@keyframes phn-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.phn-float { animation: phn-float 7s ease-in-out infinite; }
.phn-float--slow { animation-duration: 10s; }
.phn-hero--enter .phn-hero__stage-6.phn-float { animation: phn-hero-in 1000ms var(--phn-ease) 600ms both, phn-float 8s ease-in-out 1.8s infinite; }

/* --- Hover（PC のみ・控えめに）------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .phn-mem, .phn-linklist a, .phn-news__link {
    transition: transform var(--phn-duration) var(--phn-ease), background-color var(--phn-duration) var(--phn-ease), box-shadow var(--phn-duration) var(--phn-ease);
  }
  .phn-mem:hover { transform: translateY(-3px); }
}

/* --- 視差効果を減らす設定への対応 ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .phn-body,
  .phn-hero--enter [class*="phn-hero__stage-"],
  .phn-float, .phn-float--slow { animation: none !important; }

  .js .phn-reveal, .js .phn-reveal.is-visible, .js .phn-reveal--blur {
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
  }

  .phn-btn:hover, .phn-card--link:hover, .phn-card--link:focus-within, .phn-mem:hover,
  .phn-linklist a:hover, .phn-textlink:hover .phn-textlink__circle,
  .phn-btn:hover .phn-btn__arrow { transform: none !important; }
}