/* 石垣商店 モーションレイヤー igm-motion v1 (2026-09-28)
   既存テーマ ishigaki-social-v23 の上に重ねる「動きだけ」の層。色・書体・配置は変えない。
   方向性: 白地のまま、精密・Apple風(本人選択)。
   隠すのは JS が .igm-m を付けた後だけ。JSなし・動き停止では何も隠さない。 */
:root{
  --igm-dur-quick:160ms; --igm-dur-base:280ms; --igm-dur-scene:480ms; --igm-dur-reveal:900ms;
  --igm-ease-out:cubic-bezier(.2,.7,.2,1); --igm-ease-inout:cubic-bezier(.65,0,.35,1);
  --igm-ease-emph:cubic-bezier(.16,1,.3,1);
}

/* 読み込み直後の一瞬のちらつき防止(1.2秒で必ず解除) */
html.igm-pre:not(.igm-m) .a22-hero h1,html.igm-pre:not(.igm-m) .r16-hero-copy h1{opacity:0}

/* ---------- 1. 見出しの「行ごとにせり上がる」 ---------- */
.igm-m .igm-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.igm-m .igm-line>.igm-in{display:inline-block;transform:translateY(105%);opacity:0;
  transition:transform var(--igm-dur-reveal) var(--igm-ease-emph),opacity var(--igm-dur-reveal) var(--igm-ease-out)}
.igm-m .igm-shown .igm-line>.igm-in{transform:none;opacity:1}

/* ---------- 2. ブロックの「ふわっと現れる」 ---------- */
.igm-m .igm-rise{opacity:0;transform:translateY(20px);
  transition:opacity var(--igm-dur-reveal) var(--igm-ease-out),transform var(--igm-dur-reveal) var(--igm-ease-emph)}
.igm-m .igm-rise.igm-shown{opacity:1;transform:none}

/* ---------- 3. 写真の「少し大きい所から定位置へ」 ---------- */
.igm-m .igm-photo{opacity:0;transform:scale(1.035);transform-origin:50% 60%;
  transition:opacity 1100ms var(--igm-ease-out),transform 1600ms var(--igm-ease-emph)}
.igm-m .igm-photo.igm-shown{opacity:1;transform:none}

/* ---------- 4. 文章が読む速さで灯る(スクロール連動) ---------- */
.igm-m .igm-glow-text .igm-ch{opacity:.18;transition:opacity 240ms linear}
.igm-m .igm-glow-text .igm-ch.on{opacity:1}

/* ---------- 5. ヘッダー: スクロールで半透明のすりガラスに ---------- */
.igm-m header.v4-header{transition:background-color var(--igm-dur-base) var(--igm-ease-out),box-shadow var(--igm-dur-base) var(--igm-ease-out),backdrop-filter var(--igm-dur-base) var(--igm-ease-out)}
.igm-m.igm-scrolled header.v4-header{background-color:rgba(255,255,255,.86)!important;
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 1px 0 rgba(11,69,92,.08),0 8px 24px -16px rgba(11,69,92,.25)}

/* ---------- 6. 押した瞬間に応える(ボタン・カード・行) ---------- */
.igm-m .igm-press{transition:transform var(--igm-dur-quick) var(--igm-ease-out),box-shadow var(--igm-dur-base) var(--igm-ease-out),background-color var(--igm-dur-base) var(--igm-ease-out),color var(--igm-dur-base) var(--igm-ease-out)}
.igm-m .igm-press:active{transform:scale(.97);transition-duration:90ms}
.igm-m .igm-arrow{display:inline-block;transition:transform var(--igm-dur-base) var(--igm-ease-emph)}
@media (hover:hover){
  .igm-m .igm-press:hover .igm-arrow{transform:translateX(4px)}
  .igm-m .igm-press:hover .igm-arrow.igm-diag{transform:translate(3px,-3px)}
  .igm-m a.news-link{transition:padding-left var(--igm-dur-base) var(--igm-ease-emph),background-color var(--igm-dur-base) var(--igm-ease-out)}
  .igm-m a.news-link:hover{background-color:#f4f7f8}
}

/* ---------- 7. ページ移動: 短いクロスフェード(対応ブラウザのみ) ---------- */

header.v4-header{view-transition-name:igm-header}
::view-transition-old(root){animation:igm-vt-out 200ms var(--igm-ease-out) both}
::view-transition-new(root){animation:igm-vt-in 360ms var(--igm-ease-emph) both}
@keyframes igm-vt-out{to{opacity:0}}
@keyframes igm-vt-in{from{opacity:0;transform:translateY(10px)}}

/* ---------- 動きを止める ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .igm-m .igm-in,.igm-m .igm-rise,.igm-m .igm-photo,.igm-m .igm-ch{transition:none!important;transform:none!important;opacity:1!important}
}

html.igm-stopped::view-transition-old(root),html.igm-stopped::view-transition-new(root),html.igm-stopped::view-transition-group(*),html.igm-stopped::view-transition-old(*),html.igm-stopped::view-transition-new(*){animation:none!important}
html.igm-stopped .igm-line,html.igm-stopped .igm-in{opacity:1;transform:none}

/* Approved keyboard accessibility correction. */
.igm-m .igm-rise:focus-within,.igm-m .igm-rise:focus-within .igm-in{opacity:1!important;transform:none!important;transition:none!important}