/* ============================================================
   Auguri! ─ TOP 受け継ぐセクション「年がめぐる」（本番・2026-09-19 高野様ご確定＝デモ 32 番の 2）
   ------------------------------------------------------------
   高野様「2. 年がめぐるで反映してください」「2 のモーションの時に年号を少しだけ小さくしてください」

   セクション（Live with what moves you.／受け継ぐのは、暮らしへのまなざし。）に入ると、
   帯の奥に薄い年号が 1905 から今年までめぐり（3.4 秒）、その年に着いた写真が古い順に浮かび上がる。
   写真の古い順（右から）：4 帳簿 1905 → 6 新聞広告 → 5 1974 → 7 1975 → 3 かつての店 → 2 いまの店。
   見出し・一言・「受け継ぐのは」・本文は、写真に合わせて順に現れる（この 2 つの見出しは本番のにじみの代わりにこちらで出す）。

   ・合図は帯（.b-concept）に .ihm-armed → .ihm-in → .ihm-done。写真の「着いた」は .is-up（JS）
   ・動き終わった絵は ai と画素で一致（再発防止 21）。終わったら手を離す（.ihm-done）
   ・年号は装飾（aria-hidden）。大きさ 240（デモの 300 から「少しだけ小さく」）
   ・JS が無い・「動きを減らす」設定・ai 突き合わせ（.compare）・デモ 32 番（body[data-ih]）では何もしない
   ============================================================ */
:root { --ihm-ease: cubic-bezier(.22, .61, .36, 1); }

.ihm-year {
  position: absolute; left: calc(1080 * var(--s)); top: calc(500 * var(--s)); transform: translate(-50%, -50%);
  font-family: var(--ff-en-display); font-weight: 300; font-size: calc(240 * var(--s)); line-height: 1; letter-spacing: .04em;
  color: #000; opacity: 0; pointer-events: none; user-select: none; white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* 構え：出るものは隠しておく */
body:not([data-ih]) .b-concept.ihm-armed:not(.ihm-in) .ihm-ph,
body:not([data-ih]) .b-concept.ihm-armed:not(.ihm-in) .ihm-tx { opacity: 0; }

/* 動く */
@keyframes ihm-surface { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes ihm-rise    { from { opacity: 0; transform: translateY(calc(8 * var(--s))); } to { opacity: 1; transform: none; } }
body:not([data-ih]) .b-concept.ihm-in .ihm-year { opacity: .06; transition: opacity .6s var(--ihm-ease); }
body:not([data-ih]) .b-concept.ihm-in .ihm-year.is-out { opacity: 0; }
body:not([data-ih]) .b-concept.ihm-in .ihm-ph { opacity: 0; transform-origin: 50% 50%; }
body:not([data-ih]) .b-concept.ihm-in .ihm-ph.is-up { opacity: 1; animation: ihm-surface 1.2s var(--ihm-ease) backwards; }
body:not([data-ih]) .b-concept.ihm-in .cc__live      { animation: ihm-rise 1.1s var(--ihm-ease) backwards; }
body:not([data-ih]) .b-concept.ihm-in .cc__lead      { animation: ihm-rise 1s var(--ihm-ease) .35s backwards; }
body:not([data-ih]) .b-concept.ihm-in .cc__inherit-h { animation: ihm-rise 1s var(--ihm-ease) 3.6s backwards; }
body:not([data-ih]) .b-concept.ihm-in .cc__inherit-p { animation: ihm-rise 1s var(--ihm-ease) 3.9s backwards; }

/* 動き終わり：手を離す（動きの指定より後ろに置く） */
body:not([data-ih]) .b-concept.ihm-done .ihm-ph,
body:not([data-ih]) .b-concept.ihm-done .ihm-tx { animation: none; transform: none; }
body:not([data-ih]) .b-concept.ihm-done .ihm-year { opacity: 0; transition: none; }

.compare .b-concept .ihm-ph, .compare .b-concept .ihm-tx { animation: none !important; transform: none !important; opacity: 1 !important; }
.compare .ihm-year { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .b-concept .ihm-ph, .b-concept .ihm-tx { animation: none !important; transform: none !important; opacity: 1 !important; }
  .ihm-year { display: none !important; }
}