/* ============================================================
   hihaho — motion.css（モーション専用レイヤー）
   styles.css / photos.css の後に読み込む。
   原則：
   - 動き・非表示は html.motion-on（app.js が付与）がある時のみ有効
     → JS無効時はこのファイルはほぼ何もしない＝内容は常に表示される
   - transform / opacity 中心のGPUフレンドリーな動きのみ
   - prefers-reduced-motion: reduce では装飾モーションを全停止
   - 企業サイトとして「ゆっくり・静かに・目的のある動き」に徹する
   ============================================================ */

/* ---------- 0) keyframes ---------- */
@keyframes m-rise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
@keyframes m-pop{
  from{opacity:0;transform:translateY(8px) scale(.92)}
  to{opacity:1;transform:none}
}
@keyframes m-card{
  from{opacity:0;transform:translateY(26px) scale(.975)}
  to{opacity:1;transform:none}
}
/* transform ではなく translate/scale プロパティを使い、
   :hover の transform（styles.css）と合成できるようにする */
@keyframes m-float{
  0%,100%{translate:0 0}
  50%{translate:0 -8px}
}
@keyframes m-drift{
  from{translate:0 0;scale:1;opacity:.75}
  to{translate:70px 46px;scale:1.18;opacity:1}
}
@keyframes m-bar{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@keyframes m-arrow{
  0%,100%{opacity:1;transform:translateY(0)}
  50%{opacity:.45;transform:translateY(3px)}
}
@keyframes m-logoscroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ---------- 1) スクロールリビール：方向バリエーション ----------
   .js-reveal / .in は app.js が付与（styles.css に基本形あり）。
   ここでは種類ごとの「入り方」を上書きする。 */
html.motion-on .js-reveal.rv-left{transform:translateX(-28px)}
html.motion-on .js-reveal.rv-right{transform:translateX(28px)}
html.motion-on .js-reveal.rv-scale{transform:translateY(14px) scale(.96)}
/* 表示状態は必ず最後に勝たせる */
html.motion-on .js-reveal.in{opacity:1;transform:none}

/* 見出し下のグラデーションバー：リビール時に左右から描画 */
html.motion-on .center h2.js-reveal.rv-bar::after{
  transform:translateX(-50%) scaleX(0);
  transition:transform .8s cubic-bezier(.22,.61,.36,1) .3s;
}
html.motion-on .center h2.js-reveal.rv-bar.in::after{
  transform:translateX(-50%) scaleX(1);
}

/* ---------- 2) ヒーローの生命感（読み込み時・上品に） ---------- */
html.motion-on .hero .eyebrow{animation:m-rise .6s cubic-bezier(.22,.61,.36,1) .02s backwards}
html.motion-on .hero h1{animation:m-rise .7s cubic-bezier(.22,.61,.36,1) .1s backwards}
html.motion-on .hero h1 + p{animation:m-rise .7s cubic-bezier(.22,.61,.36,1) .2s backwards}
html.motion-on .hero .cta{animation:m-rise .7s cubic-bezier(.22,.61,.36,1) .3s backwards}

/* チップ：やわらかく順に出現（ヒーロー内のみ） */
html.motion-on .hero .chips .chip{animation:m-pop .5s cubic-bezier(.22,.61,.36,1) backwards}
html.motion-on .hero .chips .chip:nth-child(1){animation-delay:.45s}
html.motion-on .hero .chips .chip:nth-child(2){animation-delay:.53s}
html.motion-on .hero .chips .chip:nth-child(3){animation-delay:.61s}
html.motion-on .hero .chips .chip:nth-child(4){animation-delay:.69s}
html.motion-on .hero .chips .chip:nth-child(5){animation-delay:.77s}

/* プレイカード：登場後、ごくゆっくり浮遊（hoverリフトとは合成される） */
html.motion-on .hero .playcard{
  animation:m-card .9s cubic-bezier(.22,.61,.36,1) .18s backwards,
            m-float 9s ease-in-out 2.2s infinite;
}

/* ヒーロー内をゆっくり漂う淡い光（.hero は overflow:hidden 済み） */
html.motion-on .hero .wrap::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:520px;height:520px;left:50%;top:-22%;border-radius:50%;
  background:radial-gradient(circle,rgba(96,180,240,.18),rgba(18,179,166,.10) 45%,transparent 70%);
  filter:blur(12px);
  animation:m-drift 19s ease-in-out infinite alternate;
}

/* ページヘッド（下層ページ）：軽い入場のみ */
html.motion-on .pagehead .crumb{animation:m-rise .5s ease-out .02s backwards}
html.motion-on .pagehead h1{animation:m-rise .6s cubic-bezier(.22,.61,.36,1) .08s backwards}
html.motion-on .pagehead p:not(.crumb){animation:m-rise .6s cubic-bezier(.22,.61,.36,1) .18s backwards}
html.motion-on .pagehead h1::after{
  transform-origin:0 50%;
  animation:m-bar .7s cubic-bezier(.22,.61,.36,1) .5s backwards;
}

/* ---------- 3) ロゴマーキー（.marquee / .logos-track は app.js が生成） ---------- */
.logos.marquee{
  flex-wrap:nowrap;justify-content:flex-start;overflow:hidden;
  max-width:100%;padding:10px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.logos-track{
  display:flex;width:max-content;will-change:transform;
  animation:m-logoscroll var(--marquee-dur,36s) linear infinite;
}
.logos-group{display:flex;align-items:center;gap:14px;padding-right:14px;flex:none}
.logos.marquee:hover .logos-track{animation-play-state:paused}

/* ---------- 4) 写真バンド：リビール時にゆっくり寄りが引ける（Ken Burns調） ---------- */
html.motion-on img.bandimg.js-reveal.rv-zoom{
  opacity:0;transform:scale(1.035);
  transition:opacity .9s ease,transform 5.5s cubic-bezier(.16,.6,.3,1);
}
html.motion-on img.bandimg.js-reveal.rv-zoom.in{opacity:1;transform:scale(1)}

/* ---------- 5) 分岐フロー図：上から順に点灯（.flow-anim / 遅延は app.js が付与） ---------- */
html.motion-on .flow.flow-anim .node,
html.motion-on .flow.flow-anim .arrow{
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .55s cubic-bezier(.22,.61,.36,1);
}
html.motion-on .flow.flow-anim.in .node,
html.motion-on .flow.flow-anim.in .arrow{opacity:1;transform:none}
/* 出現後、矢印がゆっくり明滅して「流れ」を示す */
html.motion-on .flow.flow-anim.in .arrow{animation:m-arrow 2.4s ease-in-out 1.8s infinite}

/* ---------- 6) マイクロインタラクション ---------- */
/* ボタン：hover時に一度だけ光が走る（離すと瞬時に初期位置へ＝逆走しない） */
html.motion-on .btn{position:relative;overflow:hidden}
html.motion-on .btn::after{
  content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:36%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-160%) skewX(-18deg);pointer-events:none;
}
html.motion-on .btn:hover::after{
  transform:translateX(420%) skewX(-18deg);
  transition:transform .7s ease;
}

/* カードhover時にアイコンがわずかに持ち上がる（既存のカードリフトを補強） */
html.motion-on .ic{transition:transform .3s cubic-bezier(.22,.61,.36,1)}
html.motion-on .card:hover .ic{transform:translateY(-3px) scale(1.06)}

/* FAQ：+ が45度回転して × に（styles.css の「–」切替を滑らかな回転に置換） */
html.motion-on .faq summary::after{
  content:"+";display:inline-block;float:right;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
html.motion-on .faq details[open] summary::after{
  content:"+";transform:rotate(45deg);
}

/* ナビリンク：下線がスッと伸びる（ボタンは除外） */
html.motion-on .nav .menu > a:not(.btn){position:relative}
html.motion-on .nav .menu > a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-4px;width:100%;height:2px;border-radius:2px;
  background:var(--brand);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
html.motion-on .nav .menu > a:not(.btn):hover::after{transform:scaleX(1)}

/* ---------- 7) スクロール進捗バー（app.js が生成） ---------- */
html.motion-on .m-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:200;
  background:var(--grad-brand);
  transform:scaleX(0);transform-origin:0 50%;
  pointer-events:none;
}

/* ---------- 8) prefers-reduced-motion：装飾モーションを全停止 ----------
   （styles.css の全体無効化に加え、本ファイル分を確実に殺す保険） */
@media (prefers-reduced-motion: reduce){
  html.motion-on *,
  html.motion-on *::before,
  html.motion-on *::after{
    animation:none!important;
    transition:none!important;
  }
  html.motion-on .js-reveal{opacity:1!important;transform:none!important}
  html.motion-on .flow.flow-anim .node,
  html.motion-on .flow.flow-anim .arrow{opacity:1!important;transform:none!important}
  html.motion-on img.bandimg.js-reveal.rv-zoom{opacity:1!important;transform:none!important}
  html.motion-on .hero .wrap::before{content:none}
  .logos-track{animation:none!important}
}