/**
 * iCraft Motion — スクロールリビール・マーキー・ヘッダー挙動
 *
 * 初期非表示状態は html.ic-motion-ready 配下でのみ適用する（JS未ロード時も内容が見える）。
 * prefers-reduced-motion では全アニメーションを無効化し最終状態を静的適用。
 */

/* ==========================================================================
   1. リビールプリミティブ
   ========================================================================== */

.ic-motion-ready [data-anim] {
  opacity: 0;
  will-change: opacity, transform;
}

.ic-motion-ready [data-anim].is-inview {
  opacity: 1;
}

/* フェードアップ */
.ic-motion-ready [data-anim="up"] {
  transform: translateY(28px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
  transition-delay: var(--anim-delay, 0s);
}

.ic-motion-ready [data-anim="up"].is-inview {
  transform: translateY(0);
}

/* クリップリビール（左→右）。内包画像はスケール1.12→1を重ねて奥行きを出す */
.ic-motion-ready [data-anim="clip"] {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s var(--ease-out-expo);
  transition-delay: var(--anim-delay, 0s);
}

.ic-motion-ready [data-anim="clip"].is-inview {
  clip-path: inset(0 0 0 0);
}

.ic-motion-ready [data-anim="clip"] img {
  transform: scale(1.12);
  transition: transform 1.3s var(--ease-out-expo);
  transition-delay: var(--anim-delay, 0s);
}

.ic-motion-ready [data-anim="clip"].is-inview img {
  transform: scale(1);
}

/* キッカー拡張（トラッキングが開く） */
.ic-motion-ready [data-anim="kicker"] {
  letter-spacing: 0.14em;
  transition:
    opacity 0.8s var(--ease-out),
    letter-spacing 0.8s var(--ease-out);
}

.ic-motion-ready [data-anim="kicker"].is-inview {
  letter-spacing: 0.22em;
}

/* 罫線ドロー */
.ic-motion-ready [data-anim="rule"] {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
  transition-delay: var(--anim-delay, 0s);
}

.ic-motion-ready [data-anim="rule"].is-inview {
  transform: scaleX(1);
}

/* セクションタイトルは子要素を段差スタガー（コンテナ自体は動かさない） */
.ic-motion-ready .icraft-section-title[data-anim="up"] {
  opacity: 1;
  transform: none;
}

.ic-motion-ready .icraft-section-title[data-anim="up"] > * {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.75s var(--ease-out),
    transform 0.75s var(--ease-out-expo);
}

.ic-motion-ready .icraft-section-title[data-anim="up"] .icraft-section-title__ja {
  transition-delay: 0.1s;
}

.ic-motion-ready .icraft-section-title[data-anim="up"] .icraft-section-title__desc {
  transition-delay: 0.2s;
}

.ic-motion-ready .icraft-section-title[data-anim="up"].is-inview > * {
  opacity: 1;
  transform: translateY(0);
}

/* 統計数字のブラーイン */
.ic-motion-ready .ic-stat[data-anim] .ic-stat__num {
  filter: blur(8px);
  transition: filter 1s var(--ease-out);
}

.ic-motion-ready .ic-stat[data-anim].is-inview .ic-stat__num {
  filter: blur(0);
}

/* 行リビール（ヒーロー見出し・行単位） */
.line-reveal .line {
  display: block;
  overflow: hidden;
}

.line-reveal .line > span {
  display: block;
}

.ic-motion-ready .line-reveal .line > span {
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-out-expo);
}

.ic-motion-ready .line-reveal.is-inview .line:nth-child(1) > span { transition-delay: 0.15s; }
.ic-motion-ready .line-reveal.is-inview .line:nth-child(2) > span { transition-delay: 0.24s; }
.ic-motion-ready .line-reveal.is-inview .line:nth-child(3) > span { transition-delay: 0.33s; }

.ic-motion-ready .line-reveal.is-inview .line > span {
  transform: translateY(0);
}

/* ==========================================================================
   2. マーキー（CSSのみ）
   ========================================================================== */

.ic-marquee {
  overflow: hidden;
  white-space: nowrap;
}

.ic-marquee__track {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  animation: ic-marquee 48s linear infinite;
  will-change: transform;
}

.ic-marquee:hover .ic-marquee__track {
  animation-play-state: paused;
}

@keyframes ic-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   3. ケンバーンズ（ヒーロー背景）
   ========================================================================== */

.ic-kenburns {
  animation: ic-kenburns 28s var(--ease-inout) infinite alternate;
  will-change: transform;
}

@keyframes ic-kenburns {
  from {
    transform: scale(1.04);
  }
  to {
    transform: scale(1.1);
  }
}

/* ==========================================================================
   4. スクロールインジケータ
   ========================================================================== */

.ic-scroll-hint {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--paper-500);
  font-family: var(--font-en);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.ic-scroll-hint::after {
  content: "";
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, var(--paper-500), transparent);
  animation: ic-scroll-line 2.2s var(--ease-inout) infinite;
  transform-origin: top;
}

@keyframes ic-scroll-line {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ==========================================================================
   5. 質感の微動・ページ遷移
   ========================================================================== */

/* グレイン（骨材ノイズ）をフィルムグレイン風に微動させる */
.icraft-page--dark::before {
  animation: ic-grain 1.4s steps(7) infinite;
}

@keyframes ic-grain {
  0% { background-position: 0 0; }
  15% { background-position: -36px 24px; }
  30% { background-position: 42px -18px; }
  45% { background-position: -24px -40px; }
  60% { background-position: 30px 36px; }
  75% { background-position: -44px 10px; }
  90% { background-position: 18px -30px; }
  100% { background-position: 0 0; }
}

/* ページ間クロスフェード（対応ブラウザのみの漸進強化） */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: ic-vt-out 0.22s var(--ease-out) both;
}

::view-transition-new(root) {
  animation: ic-vt-in 0.34s var(--ease-out) both;
}

@keyframes ic-vt-out {
  to { opacity: 0; }
}

@keyframes ic-vt-in {
  from { opacity: 0; }
}

/* ==========================================================================
   6. reduced-motion — 全アニメーション無効・最終状態を静的適用
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ic-motion-ready [data-anim],
  .ic-motion-ready [data-anim="up"],
  .ic-motion-ready [data-anim="clip"],
  .ic-motion-ready [data-anim="kicker"],
  .ic-motion-ready [data-anim="rule"],
  .ic-motion-ready .icraft-section-title[data-anim="up"] > *,
  .ic-motion-ready [data-anim="clip"] img {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }

  .ic-motion-ready .ic-stat[data-anim] .ic-stat__num {
    filter: none;
    transition: none;
  }

  .ic-process__item::after {
    transition: none;
    transform: scaleX(1);
  }

  .icraft-page--dark::before {
    animation: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }

  .ic-motion-ready .line-reveal .line > span {
    transform: none;
    transition: none;
  }

  .ic-marquee__track {
    animation: none;
    flex-wrap: wrap;
    white-space: normal;
  }

  .ic-kenburns {
    animation: none;
  }

  .ic-scroll-hint::after {
    animation: none;
  }
}