/* 表示演出。html の kth-motion は、head内のスクリプトが「視差効果を減らす」設定でない場合だけ付ける。
   位置・大きさ・透明度だけを動かし、レイアウトはずらさない。演出が終わると各要素は元のスタイルに戻る。 */
@media (prefers-reduced-motion:no-preference) {
  /* ページ上部のバナー：写真はわずかにズームアウトし、英字ラベル→見出しの順に下から現れる */
  .kth-motion .page-banner > img { animation:kth-banner-zoom 1.8s cubic-bezier(.2,.7,.2,1) backwards; }
  .kth-motion .page-banner > div > * { animation:kth-rise .8s cubic-bezier(.2,.7,.2,1) .15s backwards; }
  .kth-motion .page-banner > div > h1 { animation-delay:.3s; }

  /* スクロールで現れる要素。テンプレートで data-kth-reveal を付け、画面に入ると script.js が is-shown を付ける。
     一覧のカード（item）は、同時に画面に入ったものを script.js が --kth-delay で少しずつ遅らせる。 */
  .kth-motion :is([data-kth-reveal="fade"],[data-kth-reveal="item"]):not(.is-shown) { opacity:0; }
  .kth-motion :is([data-kth-reveal="fade"],[data-kth-reveal="item"]).is-shown { animation:kth-rise .8s cubic-bezier(.2,.7,.2,1) var(--kth-delay,0ms) backwards; }

  /* トップのキャッチコピー：弧に沿った文字を一文字ずつ表示する */
  .kth-motion .kth-arc-reveal tspan { animation:kth-char .6s ease-out backwards; animation-delay:calc(.35s + var(--i) * var(--kth-arc-step,70ms)); }

  /* おすすめ印：カードが現れた少しあとに、スタンプを押すように止まる */
  .kth-motion [data-kth-reveal="item"].is-shown .recommend-badge { animation:kth-stamp .55s cubic-bezier(.3,1.5,.55,1) calc(var(--kth-delay,0ms) + .45s) backwards; }

  /* サービス：日本とジョージアを結ぶ点線が描かれ、両方の点が2回だけ波紋のように脈打つ */
  .kth-motion [data-kth-reveal="route"]:not(.is-shown) .business-route-draw { stroke-dashoffset:1.05; }
  .kth-motion [data-kth-reveal="route"].is-shown .business-route-draw { animation:kth-draw 1.4s cubic-bezier(.45,.05,.35,1) .2s backwards; }
  .kth-motion [data-kth-reveal="route"].is-shown .business-route-pulse { animation:kth-pulse 1.8s ease-out 1.3s 2 backwards; }
  .kth-motion [data-kth-reveal="route"].is-shown .business-route-pulse + .business-route-pulse { animation-delay:1.6s; }

  /* サービス：VISION・PURPOSE・VALUESの輪を上から描き、各行を輪の進みに合わせて表示する */
  .kth-motion [data-kth-reveal="values"]:not(.is-shown)::before,
  .kth-motion [data-kth-reveal="values"]:not(.is-shown) > div { opacity:0; }
  .kth-motion [data-kth-reveal="values"].is-shown::before { background-image:url("assets/service-values-rings-draw.svg"); }
  .kth-motion [data-kth-reveal="values"].is-shown > div { animation:kth-rise .7s cubic-bezier(.2,.7,.2,1) .15s backwards; }
  .kth-motion [data-kth-reveal="values"].is-shown > div:nth-child(2) { animation-delay:.6s; }
  .kth-motion [data-kth-reveal="values"].is-shown > div:nth-child(3) { animation-delay:1.05s; }
}
@keyframes kth-rise { from { opacity:0; translate:0 18px; } }
@keyframes kth-banner-zoom { from { scale:1.07; } }
@keyframes kth-char { from { fill-opacity:0; } }
@keyframes kth-stamp { from { opacity:0; scale:1.9; rotate:-18deg; } 60% { opacity:1; } }
@keyframes kth-draw { from { stroke-dashoffset:1.05; } to { stroke-dashoffset:0; } }
@keyframes kth-pulse { 0% { opacity:0; transform:scale(1); } 12% { opacity:.9; } 100% { opacity:0; transform:scale(3.2); } }

/* 記事ページ：読み進めた割合を示すヘッダー下の線（script.js が --kth-progress を更新する） */
.kth-progress { position:absolute; left:0; bottom:0; width:100%; height:3px; background:var(--red); transform-origin:0 50%; transform:scaleX(var(--kth-progress,0)); pointer-events:none; }

@media print {
  .kth-motion [data-kth-reveal], .kth-motion [data-kth-reveal] > div, .kth-motion [data-kth-reveal]::before { opacity:1!important; animation:none!important; }
  .kth-motion .business-route-draw { stroke-dashoffset:0!important; }
  .kth-progress { display:none; }
}