/* GSAP Fade-in Animation Styles */

/* 
 * fade-in-target クラスの初期状態
 * JavaScriptが無効の場合でもコンテンツが表示されるように、
 * デフォルトでは表示状態にしておく
 */
.fade-in-target {
  /* JavaScriptで制御されるため、ここでは特別なスタイルは不要 */
  /* アニメーション前の状態はJavaScriptで設定される */
  opacity: 0;
}

/* 
 * オプション: アニメーション中のちらつき防止
 * より滑らかなアニメーションのためのハードウェアアクセラレーション
 */
.fade-in-target {
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 
 * JavaScriptが無効な環境での代替表示
 * .no-js クラスがある場合は通常表示
 */
.no-js .fade-in-target {
  opacity: 1 !important;
  transform: none !important;
}