/* Sunday Roamin' — motion layer only.
   既存のレイアウト・タイポグラフィ・色・文言には一切触れない。
   採用した9つの動きだけを含む（リビール／見出し分割／パララックスは採用見送り）。 */

:root {
  --sr-ease: cubic-bezier(.16, .8, .24, 1);
  --sr-marquee-dur: 46s;
}

/* 1. 見出しの一字ずつ立ち上げ（トップのヒーロー＋各ページの h1） ---- */
/* JS が1文字ずつ <span class="sr-char"> に分割する。
   親の font-size:0 が要点（下のコメント参照）。フォントサイズは
   JS が split 時に各 span の style.fontSize へ直接書き込む（見出しの中に
   本文と実寸の違う色地の <span class="badge"> が混在するページがあるため、
   共通の CSS 変数1個ではなく、テキストノードごとの実寸を都度渡している）。
   36px はその書き込みが何らかの理由で効かなかった場合の保険。 */
.sr-title-split { font-size: 0; }
.sr-char {
  display: inline-block;
  white-space: pre;
  font-size: 36px;
  animation: srRise 1.1s var(--sr-ease) both;
  animation-delay: calc(.25s + var(--sr-ci, 0) * .042s);
}
@keyframes srRise {
  from { opacity: 0; transform: translateY(.7em) rotate(2deg); }
  to   { opacity: 1; transform: none; }
}

/* 2. 写真の横流しマーキー ----------------------------------------- */
.sr-marquee-viewport { overflow: hidden; }
.sr-marquee {
  display: flex;
  width: max-content;
  gap: 14px;
  animation: srMarquee var(--sr-marquee-dur) linear infinite;
}
.sr-marquee:hover,
.sr-marquee:focus-within { animation-play-state: paused; }
@keyframes srMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* JS が中身を2周分に複製する前提 */
}

/* 3. 見出し／バーの固定（トップ:Special、Magazine一覧:カテゴリバー） --- */
/* JS 不要。ただし祖先に overflow-x:hidden があると効かない（README参照）。 */
.sr-sticky-head { position: sticky; top: 120px; }

/* Magazine のカテゴリ絞り込みバー：ヘッダー（高さ78px）の直下に貼り付く。
   透けるとカードが裏に見えるので、必ず地色で塗る。 */
.sr-sticky-bar {
  position: sticky;
  top: 78px; /* ヘッダーの実高（.sr-header-in の height）に合わせる */
  z-index: 40; /* ヘッダー(50)より下、本文より上 */
  background: #FDFCFA;
}

/* 4. ホバーで画像ズーム ------------------------------------------- */
/* .sr-ph は sr_photo_box() が出す背景画像 div、.sr-spot-photo は Map の
   場所カード内の同種の要素（クラス名だけが違う）。どちらもカード側の
   .sr-zoom が overflow:hidden で切る。 */
.sr-zoom { overflow: hidden; }
.sr-zoom .sr-ph,
.sr-zoom .sr-spot-photo {
  transition: transform .9s var(--sr-ease);
}
/* will-change はホバー中だけ付ける。Album のようにグリッドに写真が
   数十枚並ぶページで常時 will-change を宣言すると、モバイルSafariが
   合成レイヤーを溜めすぎて描画が壊れる（画面全体が暗く沈んだまま止まり、
   スクロールで強制的に再描画されるまで直らない）ことがあったための対応。 */
.sr-zoom:hover .sr-ph,
.sr-zoom:hover .sr-spot-photo,
.sr-zoom:focus-within .sr-ph,
.sr-zoom:focus-within .sr-spot-photo {
  transform: scale(1.05);
  will-change: transform;
}

/* 5. 数字カウントアップ ------------------------------------------- */
/* CSS なし。JS が textContent を書き換える。
   等幅で桁が揺れないようにしたい場合のみ以下を使う。 */
.sr-count { font-variant-numeric: tabular-nums; }

/* 6. 入場ローディング --------------------------------------------- */
.sr-load {
  position: fixed; inset: 0; z-index: 990;
  background: #FDFCFA;
  display: flex; align-items: center; justify-content: center;
  animation: srLoadOut 1.5s var(--sr-ease) both;
}
.sr-load img { height: 88px; width: auto; display: block; animation: srLoadLogo 1.5s var(--sr-ease) both; }
@keyframes srLoadOut {
  0%, 62% { opacity: 1; }
  100%    { opacity: 0; visibility: hidden; }
}
@keyframes srLoadLogo {
  0%        { opacity: 0; transform: translateY(10px); }
  34%, 62%  { opacity: 1; transform: none; }
  100%      { opacity: 0; transform: translateY(-8px); }
}

/* 7. マウス追従カーソル ------------------------------------------- */
.sr-cursor {
  position: fixed; top: 0; left: 0;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid #8DCCFD; border-radius: 50%;
  pointer-events: none; z-index: 950;
  opacity: 0; transition: opacity .4s linear;
  mix-blend-mode: multiply;
}

/* 8. ページ遷移フェード ------------------------------------------- */
.sr-page-in { animation: srPageIn 1s var(--sr-ease) both; }
@keyframes srPageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
body.sr-leaving { opacity: 0; transition: opacity .28s linear; }

/* 9. スクロール進捗バー ------------------------------------------- */
/* 幅は JS が DOM に直接書く（state 経由で再描画させない）。 */
.sr-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px;
  z-index: 900; pointer-events: none;
}
.sr-progress__bar {
  height: 100%; width: 0;
  background: #8DCCFD;
  transition: width .12s linear;
}

/* 10. アクセシビリティ -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sr-load, .sr-cursor { display: none !important; }
  .sr-char, .sr-page-in, .sr-marquee { animation: none !important; opacity: 1 !important; transform: none !important; }
  .sr-zoom:hover .sr-ph,
  .sr-zoom:hover .sr-spot-photo,
  .sr-zoom:focus-within .sr-ph,
  .sr-zoom:focus-within .sr-spot-photo { transform: none !important; }
  body.sr-leaving { opacity: 1 !important; transition: none !important; }
}