/**
 * ヒーロー演出用の共通スタイル
 * omsスタイルのフェードイン演出を実装
 */

/* 初期状態で要素を非表示 */
.fade-onload {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.fade-onload.show {
  opacity: 1;
  transform: translateY(0);
}

/* 遅延クラス */
.fade-onload.delay-1 { transition-delay: 0.12s; }
.fade-onload.delay-2 { transition-delay: 0.24s; }
.fade-onload.delay-3 { transition-delay: 0.36s; }

/* スクロール連動フェードイン */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* 動きを苦手とする人への配慮 */
@media (prefers-reduced-motion: reduce) {
  .fade-onload,
  .reveal {
    transition: none;
    transform: none;
    opacity: 1;
  }
  
  /* ページ固有の要素もアニメーション無効化 */
  [class*="item"],
  .group img,
  .contact-form {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}