/* css/animation-common.css */
/* 全ページ共通アニメーション定義 */

/* ====================================
   フェードインアニメーション（全ページ対象）
   ==================================== */

/* 対象要素の初期状態
   plan 1788670732315: 20px→12px→16px再調整（視認性確保）・opacity 0.7s / transform 0.8s 分離・ease-out→cubic-bezier(0.22,1,0.36,1)。
   --reveal-delay はJSが同一グリッド直下の可視子順(0/80/160ms)で付与。既定0ms。 */
.entry-content h2,
.entry-content .wp-block-columns,
.entry-content .concept-box,
.entry-content .wp-block-quote,
.entry-content .wp-block-separator,
.entry-content .wp-block-group,
.entry-content .wp-block-image,
.entry-content .creation-section-heading,
.entry-content .creation-general-block,
.entry-content .creation-concept,
.entry-content .creation-three-column,
.entry-content .creation-game-description,
.entry-content .creation-katsudo-grid {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* スクロール時に表示 */
.entry-content h2.is-visible,
.entry-content .wp-block-columns.is-visible,
.entry-content .concept-box.is-visible,
.entry-content .wp-block-quote.is-visible,
.entry-content .wp-block-separator.is-visible,
.entry-content .wp-block-group.is-visible,
.entry-content .wp-block-image.is-visible,
.entry-content .creation-section-heading.is-visible,
.entry-content .creation-general-block.is-visible,
.entry-content .creation-concept.is-visible,
.entry-content .creation-three-column.is-visible,
.entry-content .creation-game-description.is-visible,
.entry-content .creation-katsudo-grid.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ====================================
   トップページ用アニメーション
   ==================================== */

/* トップページ用対象要素の初期状態
   （!important廃止: body.top-page × main.top-page の二重スコープで
    単一 .top-page スコープの他ルールより1段詳細度を確保 / plan 1787737135944 M-5） */
.top-page .top-page .top-content > div,
.top-page .top-page .top-creation-full,
.top-page .top-page .top-blog-full,
.top-page .top-page .top-meta,
.top-page .top-page .top-section-index,
.top-page .top-page h2.top-soniria-worldview-section-title,
.top-page .top-page h2.top-meta-section-title {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* トップページ用 スクロール時に表示 */
.top-page .top-page .top-content > div.is-visible,
.top-page .top-page .top-creation-full.is-visible,
.top-page .top-page .top-blog-full.is-visible,
.top-page .top-page .top-meta.is-visible,
.top-page .top-page .top-section-index.is-visible,
.top-page .top-page h2.top-soniria-worldview-section-title.is-visible,
.top-page .top-page h2.top-meta-section-title.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ====================================
   創作紹介（ID:9）: IDセレクタの transition 上書き対策
   plan 1788670732315: 本体と同値化（分離時間＋easing）。border-color はhover用に維持。
   transition-delay はリビール変数のみ参照し、hover漏れはJSの出現後クリアで回避。
   ==================================== */
.page-id-9 .entry-content .creation-general-block {
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease !important;
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms !important;
}

/* ====================================
   初期表示の即表示（plan 1788670732315 §4）
   DOMContentLoaded＋rAF 時点でビューポート内(0.9倍)の要素に
   JSが is-visible＋is-initial を同時付与。transitionなしで一瞬の消えを防ぐ。
   ==================================== */
.entry-content h2.is-initial,
.entry-content .wp-block-columns.is-initial,
.entry-content .concept-box.is-initial,
.entry-content .wp-block-quote.is-initial,
.entry-content .wp-block-separator.is-initial,
.entry-content .wp-block-group.is-initial,
.entry-content .wp-block-image.is-initial,
.entry-content .creation-section-heading.is-initial,
.entry-content .creation-general-block.is-initial,
.entry-content .creation-concept.is-initial,
.entry-content .creation-three-column.is-initial,
.entry-content .creation-game-description.is-initial,
.entry-content .creation-katsudo-grid.is-initial,
.top-page .top-page .top-content > div.is-initial,
.top-page .top-page .top-creation-full.is-initial,
.top-page .top-page .top-blog-full.is-initial,
.top-page .top-page .top-meta.is-initial,
.top-page .top-page .top-section-index.is-initial,
.top-page .top-page h2.top-soniria-worldview-section-title.is-initial,
.top-page .top-page h2.top-meta-section-title.is-initial {
  transition: none !important;
  transition-delay: 0ms !important;
}

/* ====================================
   非JSフォールバック（plan 1788670732315 §5）
   html.no-js はPHP(language_attributes)で付与＋head先頭scriptで除去。
   JS無効時は opacity:0 のまま残らないよう即表示。
   ==================================== */
html.no-js .entry-content h2,
html.no-js .entry-content .wp-block-columns,
html.no-js .entry-content .concept-box,
html.no-js .entry-content .wp-block-quote,
html.no-js .entry-content .wp-block-separator,
html.no-js .entry-content .wp-block-group,
html.no-js .entry-content .wp-block-image,
html.no-js .entry-content .creation-section-heading,
html.no-js .entry-content .creation-general-block,
html.no-js .entry-content .creation-concept,
html.no-js .entry-content .creation-three-column,
html.no-js .entry-content .creation-game-description,
html.no-js .entry-content .creation-katsudo-grid,
html.no-js .top-page .top-page .top-content > div,
html.no-js .top-page .top-page .top-creation-full,
html.no-js .top-page .top-page .top-blog-full,
html.no-js .top-page .top-page .top-meta,
html.no-js .top-page .top-page .top-section-index,
html.no-js .top-page .top-page h2.top-soniria-worldview-section-title,
html.no-js .top-page .top-page h2.top-meta-section-title {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ====================================
   prefers-reduced-motion対応
   ==================================== */
@media (prefers-reduced-motion: reduce) {
  .entry-content h2,
  .entry-content .wp-block-columns,
  .entry-content .concept-box,
  .entry-content .wp-block-quote,
  .entry-content .wp-block-separator,
  .entry-content .wp-block-group,
  .entry-content .wp-block-image,
  .entry-content .creation-section-heading,
  .entry-content .creation-general-block,
  .entry-content .creation-concept,
  .entry-content .creation-three-column,
  .entry-content .creation-game-description,
  .entry-content .creation-katsudo-grid,
  .top-page .top-content > div,
  .top-page .top-creation-full,
  .top-page .top-blog-full,
  .top-page .top-meta,
  .top-page .top-section-index,
  .top-page h2.top-soniria-worldview-section-title,
  .top-page h2.top-meta-section-title {
    opacity: 1 !important;
    transform: none;
    transition: none;
  }
}

/* migrated from ID41 animation - already covered, kept for reference */

/* ====================================
   トップページ カード affordance 統一 (plan 1788165101395)
   ==================================== */
.top-card-aff{
  display:inline-flex; align-items:center; gap:0.32em;
  font-size:0.80em; font-weight:700;
  color:var(--color-fuji-deep, #5F568E); line-height:1;
  white-space:nowrap; opacity:0.9;
  transition:gap .18s ease, color .18s ease, opacity .18s ease;
}
.top-card-aff [aria-hidden]{
  display:inline-flex; transition:transform .18s ease;
}
a:hover .top-card-aff, a:focus-visible .top-card-aff{
  color:var(--color-accent, #2B6B58); gap:0.42em; opacity:1;
}
a:hover .top-card-aff [aria-hidden]{
  transform:translateX(0.18em);
}
.top-card-aff--iconOnly{
  font-size:1.1em; margin-left:auto; flex-shrink:0; opacity:1;
  transition:transform .18s ease, color .18s ease, gap .18s ease;
}
a:hover .top-card-aff--iconOnly, a:focus-visible .top-card-aff--iconOnly{
  transform:translateX(0.18em);
}
.top-quicklinks-aff{
  font-size:1.0em; opacity:0.65; margin-left:0.25em; line-height:1;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* quicklinks のみ静止 — 詳細度を上げて iconOnly に漏れないように (plan 1788166673044) */
.top-quicklinks-item .top-card-aff,
.top-quicklinks-item .top-quicklinks-aff,
.top-quicklinks-item .top-card-aff [aria-hidden],
.top-quicklinks-item .top-card-aff--iconOnly{
  transition:none !important; transform:none !important;
}
.top-quicklinks-item:hover .top-card-aff,
.top-quicklinks-item:hover .top-quicklinks-aff,
.top-quicklinks-item:hover .top-card-aff--iconOnly{ gap:inherit; color:inherit; transform:none !important; }

@media(prefers-reduced-motion:reduce){
  .top-card-aff, .top-card-aff [aria-hidden], .top-card-aff--iconOnly{
    transition:none; transform:none !important;
  }
}