/* @version 1.0.0 @date 2026-10-17
 * 概要: 既存の配置を保ったまま、見出し・写真・カードへ動きを追加。
 * Input: anim.jsが付けるdata属性。 Output: 一度だけ再生する登場と操作反応。
 * 更新履歴: 2026-10-17 初版。図鑑1-4/2-4/2-6の芯を非破壊仕様へ適応。
 */
[data-anim-root] {
  --anim-ease-signature: cubic-bezier(.22, 1, .36, 1);
  --anim-ease-ui: ease;
  --anim-dur-enter: 760ms;
  --anim-dur-photo: 1000ms;
  --anim-dur-ui: 240ms;
  --anim-distance: 24px;
  --anim-stagger: 100ms;
}

/* CSS単独では隠さない。初期化が成功した対象だけを待機させる。 */
[data-anim-root] [data-anim][data-anim-state="pending"],
[data-anim-root] [data-anim][data-anim-state="queued"] { opacity: 0; }
[data-anim-root] [data-anim] { transition: none; }
/* 既存の開幕と重ねず、追加側のスケジュールで一度だけ再生する。 */
[data-anim-root] [data-anim="heading"] > span,
[data-anim-root] .hero-photo img[data-anim] { animation-name: none; }

[data-anim-root] [data-anim="heading"][data-anim-state="active"] {
  animation: anim-heading var(--anim-dur-enter) var(--anim-ease-signature) both;
}
[data-anim-root] [data-anim="rise"][data-anim-state="active"] {
  animation: anim-rise var(--anim-dur-enter) var(--anim-ease-signature) both;
}
[data-anim-root] [data-anim="photo"][data-anim-state="active"] {
  animation: anim-photo var(--anim-dur-photo) var(--anim-ease-signature) both;
}

@keyframes anim-heading {
  from { opacity: .1; transform: translateY(18px); clip-path: inset(0 0 85% 0); }
  to { opacity: 1; transform: none; clip-path: inset(0); }
}
@keyframes anim-rise {
  from { opacity: 0; transform: translateY(var(--anim-distance)); }
  to { opacity: 1; transform: none; }
}
@keyframes anim-photo {
  from { opacity: .45; filter: blur(3px); clip-path: inset(0 7% 0 0); }
  to { opacity: 1; filter: blur(0); clip-path: inset(0); }
}

[data-anim-root] [data-anim-ui] {
  transition-duration: var(--anim-dur-ui);
  transition-timing-function: var(--anim-ease-ui);
}
[data-anim-root] [data-anim-ui="card"] {
  transition-property: transform, border-color, box-shadow;
}
[data-anim-root] [data-anim-ui="cta"] > svg:last-child {
  transition: transform var(--anim-dur-ui) var(--anim-ease-ui);
}
@media (hover: hover) and (pointer: fine) {
  [data-anim-root] [data-anim-ui="card"]:hover { transform: translateY(-4px); }
  [data-anim-root] [data-anim-ui="cta"]:hover > svg:last-child { transform: translateX(6px); }
}
[data-anim-root] [data-anim-ui="cta"]:focus-visible > svg:last-child { transform: translateX(6px); }

@media (max-width: 600px) {
  [data-anim-root] { --anim-distance: 16px; --anim-dur-enter: 620ms; --anim-dur-photo: 800ms; }
}
@media (prefers-reduced-motion: reduce) {
  [data-anim-root] [data-anim],
  [data-anim-root] [data-anim][data-anim-state],
  [data-anim-root] [data-anim-ui] {
    opacity: 1; transform: none; filter: none; clip-path: none;
    animation: none !important; transition: none !important;
  }
  [data-anim-root] [data-anim-ui] > svg:last-child { transform: none; transition: none; }
}