/* =====================================================================
   pro-motion — 汎用フェードアップ・モーションCSS（React/静的HTML共通）
   使い方: HTML 側で対象に data-reveal、グループ親に data-reveal-group を付ける。
   <html> には初回描画前に class="pm-js" を付ける（head-snippet.html 参照）。
   ===================================================================== */
:root {
  --pm-distance: 64px;          /* 下からの移動量 */
  --pm-duration-move: 1.4s;     /* 移動のかかり */
  --pm-duration-fade: 1.1s;     /* 不透明度のかかり（移動より少し短く＝動きが先に見える） */
  --pm-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --pm-ease-fade: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --pm-stagger: 130ms;          /* グループ内の1つずつのずらし（JS側の既定と揃える） */
}

/* ---- 初回描画から隠す（JSが動いたら is-visible で表示） ---- */
.pm-js:not(.pm-reveal-all) [data-reveal]:not(.is-visible),
.pm-js:not(.pm-reveal-all) [data-reveal-group] > *:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, var(--pm-distance), 0);
}
/* 方向バリエーション: data-reveal="left|right|zoom" */
.pm-js:not(.pm-reveal-all) [data-reveal="left"]:not(.is-visible)  { transform: translate3d(-40px, 48px, 0); }
.pm-js:not(.pm-reveal-all) [data-reveal="right"]:not(.is-visible) { transform: translate3d(56px, 48px, 0) scale(0.97); }
.pm-js:not(.pm-reveal-all) [data-reveal="zoom"]:not(.is-visible)  { transform: translate3d(0, var(--pm-distance), 0) scale(0.96); }

/* ---- 登場トランジション（遷移先=表示状態に書く） ---- */
.pm-js [data-reveal],
.pm-js [data-reveal-group] > * {
  transition:
    opacity var(--pm-duration-fade) var(--pm-ease-fade) var(--reveal-delay, 0ms),
    transform var(--pm-duration-move) var(--pm-ease-out) var(--reveal-delay, 0ms);
}
.pm-js [data-reveal].is-visible,
.pm-js [data-reveal-group] > .is-visible {
  opacity: 1;
  transform: none;
}
/* 登場後は短いトランジションに切替（ホバーを軽快に） */
.pm-js .is-settled {
  transition: transform 0.35s var(--pm-ease-out), box-shadow 0.35s ease, opacity 0.3s ease;
}
.pm-js [data-reveal-group="hover"] > .is-settled:hover,
.pm-js [data-hover-lift].is-settled:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.35);
}

/* ---- 見出しラベル（英字キッカー）は字間が締まりながら出る ---- */
.pm-js [data-reveal] .pm-kicker { transition: letter-spacing var(--pm-duration-move) var(--pm-ease-out); }
.pm-js [data-reveal]:not(.is-visible) .pm-kicker { letter-spacing: 0.42em; }

/* ---- ヒーロー: 読み込み直後に順番に浮き上がる ---- */
@keyframes pm-hero-rise {
  0%   { opacity: 0; transform: translate3d(0, 56px, 0); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
[data-hero] > * { animation: pm-hero-rise 1.5s var(--pm-ease-out) both; }
[data-hero] > :nth-child(1) { animation-delay: 0.15s; }
[data-hero] > :nth-child(2) { animation-delay: 0.35s; }
[data-hero] > :nth-child(3) { animation-delay: 0.6s; }
[data-hero] > :nth-child(4) { animation-delay: 0.85s; }
[data-hero] > :nth-child(5) { animation-delay: 1.1s; }
[data-hero] > :nth-child(6) { animation-delay: 1.3s; }

/* ヒーロー背景写真: フェードイン後もゆっくりズーム（ケンバーンズ） */
@keyframes pm-photo-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1.012); } }
@keyframes pm-kenburns { from { transform: scale(1.012); } to { transform: scale(1.07) translate3d(-1%, -1%, 0); } }
[data-hero-photo] { animation: pm-photo-in 1.8s ease both, pm-kenburns 22s ease-in-out 1.8s infinite alternate; }

/* ---- ヘッダー: 表示時フェード、スクロールで影＋ぼかし ---- */
@keyframes pm-fade { from { opacity: 0; } to { opacity: 1; } }
[data-header] { animation: pm-fade 0.8s ease both; transition: box-shadow 0.4s ease, background-color 0.4s ease; }
[data-header].is-scrolled {
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.35);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
}

/* ---- ボタン: 浮き上がり＋矢印スライド ---- */
[data-button] { transition: transform 0.3s var(--pm-ease-out), box-shadow 0.3s ease, background 0.25s ease, color 0.25s ease; }
[data-button]:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.55); }
[data-button] .pm-arrow { display: inline-block; transition: transform 0.3s var(--pm-ease-out); }
[data-button]:hover .pm-arrow { transform: translateX(4px); }

/* ---- 注意 ----
   prefers-reduced-motion で全アニメを 0.01ms にする「一括殺し」は入れない。
   Windows の「アニメーション効果」オフや省電力モードで全モーションが消え、
   「アニメーションが付いていない」と見える（Your Song で実際に起きた）。
   配慮するなら transform だけ無効化して opacity フェードは残す:
   @media (prefers-reduced-motion: reduce) { .pm-js [data-reveal]:not(.is-visible) { transform: none; } }
*/