/* ============================================
   Lenis + GSAP Scroll Animations
   スムーススクロール & アニメーション用CSS
   ============================================ */

/* Lenisスムーススクロール用のベーススタイル */
html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* アニメーション初期状態（JavaScriptで上書きされます） */
[data-scroll] {
  will-change: transform, opacity;
}

/* スクロール進捗バー用のスタイル */
[data-scroll-progress] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #0066ff, #00ccff);
  transform-origin: left center;
  z-index: 9999;
}

/* パララックス要素用の最適化 */
[data-parallax] {
  will-change: transform;
}

/* カウントアップ要素用のスタイル */
[data-count] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ============================================
   オプション：追加のアニメーション用スタイル
   ============================================ */

/* フェードアニメーション用の基本スタイル */
.fade-in-ready {
  opacity: 0;
}

.fade-in-active {
  opacity: 1;
  transition: opacity 0.8s ease;
}

/* スライドアニメーション用の基本スタイル */
.slide-in-ready {
  opacity: 0;
  transform: translateY(50px);
}

.slide-in-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* ============================================
   パフォーマンス最適化
   ============================================ */

/* GPU アクセラレーション */
[data-scroll],
[data-parallax] {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* スクロール中のアニメーションを最適化 */
@media (prefers-reduced-motion: reduce) {
  [data-scroll],
  [data-parallax] {
    animation: none !important;
    transition: none !important;
  }
  
  html.lenis {
    scroll-behavior: auto;
  }
}

/* ============================================
   レスポンシブ対応
   ============================================ */

/* モバイルでは控えめなアニメーション */
@media screen and (max-width: 767px) {
  [data-scroll] {
    /* モバイルではアニメーション距離を短くする */
  }
  
  [data-parallax] {
    /* モバイルではパララックスを無効化することも可能 */
    /* transform: none !important; */
  }
}

/* タブレット */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* タブレット用の調整 */
}

/* デスクトップ */
@media screen and (min-width: 1025px) {
  /* デスクトップ用の調整 */
}

/* ============================================
   カスタムイージング用のCSS
   ============================================ */

/* イーズインアウト */
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* イーズアウトバック（バウンス効果） */
.ease-out-back {
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* イーズアウトクワッド */
.ease-out-quad {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* イーズアウトキュービック */
.ease-out-cubic {
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* ============================================
   デバッグ用スタイル（開発時のみ使用）
   ============================================ */

/* ScrollTriggerのマーカーを見やすくする */
.gsap-marker-scroller-start,
.gsap-marker-scroller-end,
.gsap-marker-start,
.gsap-marker-end {
  z-index: 10000 !important;
}

/* ============================================
   追加のユーティリティクラス
   ============================================ */

/* スクロール時に固定ヘッダーを考慮したオフセット */
.scroll-offset {
  scroll-margin-top: 80px; /* ヘッダーの高さに合わせて調整 */
}

/* スクロールスナップポイント */
.scroll-snap-section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* スクロールコンテナ */
.scroll-snap-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}

/* Lenisスクロールを一時的に無効化 */
.no-scroll {
  overflow: hidden;
  height: 100vh;
}