/*
=== Modern Section Animation System v3.0 ===
制作会社レベルのセクション固定アニメーションシステム

使用方法:
<section data-section-animation="sticky-fade" data-sticky-duration="200vh">
  <div class="section-content">コンテンツ</div>
</section>

エフェクト: sticky-fade, sticky-scale, sticky-slide, sticky-rotate, 
          sticky-cards, sticky-timeline, sticky-parallax
*/

/* ========== 基本設定 ========== */
:root {
  --section-spacing: 0;
  --sticky-offset: 0px;
  --animation-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --fast-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --bounce-ease: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* セクションベース */
[data-section-animation] {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* モバイル対応 */
}

/* スティッキーコンテナ */
.section-sticky-container {
  position: sticky;
  top: var(--sticky-offset);
  height: 100vh;
  height: 100svh; /* モバイル対応 */
  overflow: auto; /* コンテンツが溢れる場合のスクロール */
  will-change: transform;
}

/* セクションコンテンツ */
.section-content {
  position: relative;
  z-index: 2;
  width: 100%;
  transition: all 0.6s var(--animation-ease);
}

/* ========== セクション固定エフェクト ========== */

/* 1. スティッキー フェード */
[data-section-animation="sticky-fade"] .section-content {
  opacity: 1;
  transform: translateY(0);
}

[data-section-animation="sticky-fade"][data-scroll-progress] .section-content {
  opacity: calc(1 - var(--scroll-progress, 0) * 0.8);
  transform: translateY(calc(var(--scroll-progress, 0) * -50px));
}

/* 2. スティッキー スケール */
[data-section-animation="sticky-scale"] .section-content {
  transform: scale(1) rotate(0deg);
  transition: transform 0.3s var(--fast-ease);
}

[data-section-animation="sticky-scale"][data-scroll-progress] .section-content {
  transform: scale(calc(1 + var(--scroll-progress, 0) * 0.1)) 
             rotate(calc(var(--scroll-progress, 0) * 5deg));
}

/* 3. スティッキー スライド */
[data-section-animation="sticky-slide"] .section-content {
  transform: translateX(0);
}

[data-section-animation="sticky-slide"][data-scroll-progress] .section-content {
  transform: translateX(calc(var(--scroll-progress, 0) * 100px));
}

/* 4. スティッキー 回転 */
[data-section-animation="sticky-rotate"] {
  perspective: 1000px;
}

[data-section-animation="sticky-rotate"] .section-content {
  transform-style: preserve-3d;
  transform: rotateY(0deg) rotateX(0deg);
}

[data-section-animation="sticky-rotate"][data-scroll-progress] .section-content {
  transform: rotateY(calc(var(--scroll-progress, 0) * 20deg)) 
             rotateX(calc(var(--scroll-progress, 0) * 5deg));
}

/* ========== 特殊エフェクト ========== */

/* 5. カードスタック */

[data-section-animation="sticky-cards"] .section-content {
  display: block;
}

[data-section-animation="sticky-cards"] .card {
  transform: translateY(0) scale(1);
  transition: all 0.4s var(--animation-ease);
}

[data-section-animation="sticky-cards"][data-scroll-progress] .card:nth-child(1) {
  transform: translateY(calc(var(--scroll-progress, 0) * -20px)) 
             scale(calc(1 - var(--scroll-progress, 0) * 0.1));
  opacity: calc(1 - var(--scroll-progress, 0) * 0.3);
}

[data-section-animation="sticky-cards"][data-scroll-progress] .card:nth-child(2) {
  transform: translateY(calc(var(--scroll-progress, 0) * 20px)) 
             scale(calc(1 + var(--scroll-progress, 0) * 0.05));
}

[data-section-animation="sticky-cards"][data-scroll-progress] .card:nth-child(3) {
  transform: translateY(calc(var(--scroll-progress, 0) * -30px)) 
             rotate(calc(var(--scroll-progress, 0) * 3deg));
}

/* 6. タイムライン */

[data-section-animation="sticky-timeline"] .timeline-container {
  position: relative;
  padding: 4rem 0;
}

[data-section-animation="sticky-timeline"] .timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, transparent 0%, #667eea 50%, transparent 100%);
  transform: translateX(-50%);
}

[data-section-animation="sticky-timeline"] .timeline-item {
  position: relative;
  margin: 3rem 0;
  opacity: 0.3;
  transform: translateY(50px);
  transition: all 0.6s var(--animation-ease);
}

[data-section-animation="sticky-timeline"][data-scroll-progress] .timeline-item.active {
  opacity: 1;
  transform: translateY(0);
}

/* 7. パララックス レイヤー */

[data-section-animation="sticky-parallax"] .parallax-layer {
  position: absolute;
  width: 100%;
  height: 120%;
  background-repeat: no-repeat;
  background-size: cover;
  will-change: transform;
}

[data-section-animation="sticky-parallax"] .parallax-layer-1 {
  z-index: 1;
  opacity: 0.3;
}

[data-section-animation="sticky-parallax"] .parallax-layer-2 {
  z-index: 2;
  opacity: 0.5;
}

[data-section-animation="sticky-parallax"][data-scroll-progress] .parallax-layer-1 {
  transform: translateY(calc(var(--scroll-progress, 0) * -30px));
}

[data-section-animation="sticky-parallax"][data-scroll-progress] .parallax-layer-2 {
  transform: translateY(calc(var(--scroll-progress, 0) * 15px));
}

/* ========== レスポンシブ対応 ========== */
@media (max-width: 768px) {
  /* モバイル版でアニメーション無効化 */
  [data-section-animation] {
    position: static !important;
    min-height: auto !important;
    overflow: visible !important;
  }
  
  .section-sticky-container {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  .section-content {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  
  /* すべてのアニメーション効果を無効化 */
  [data-section-animation][data-scroll-progress] .section-content {
    transform: none !important;
    opacity: 1 !important;
  }
  
  [data-section-animation="sticky-slide"][data-scroll-progress] .section-content,
  [data-section-animation="sticky-scale"][data-scroll-progress] .section-content,
  [data-section-animation="sticky-fade"][data-scroll-progress] .section-content,
  [data-section-animation="sticky-rotate"][data-scroll-progress] .section-content,
  [data-section-animation="sticky-cards"][data-scroll-progress] .section-content,
  [data-section-animation="sticky-timeline"][data-scroll-progress] .section-content,
  [data-section-animation="sticky-parallax"][data-scroll-progress] .section-content {
    transform: none !important;
    opacity: 1 !important;
  }
  
  /* パララックスレイヤーも無効化 */
  .parallax-layer {
    display: none;
  }
  
  /* カード効果も無効化 */
  [data-section-animation="sticky-cards"] .card {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ========== モバイルでのアニメーション無効化 ========== */
.mobile-animations-disabled [data-section-animation] {
  position: static !important;
  min-height: auto !important;
  overflow: visible !important;
}

.mobile-animations-disabled .section-sticky-container {
  position: static !important;
  height: auto !important;
  overflow: visible !important;
}

.mobile-animations-disabled .section-content {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

.mobile-animations-disabled .parallax-layer {
  display: none !important;
}

/* ========== アクセシビリティ ========== */
@media (prefers-reduced-motion: reduce) {
  [data-section-animation] * {
    transform: none !important;
    transition-duration: 0.01s !important;
    animation-duration: 0.01s !important;
  }
  
  [data-section-animation] .section-content {
    opacity: 1 !important;
  }
  
  .parallax-layer {
    transform: none !important;
  }
}

/* ========== スクロールスナップ対応 ========== */
.scroll-snap-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
  height: 100svh; /* モバイル対応 */
}

[data-section-animation] {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* モバイルでのスクロールスナップ無効化 */
@media (max-width: 768px) {
  .scroll-snap-container {
    scroll-snap-type: none !important; /* モバイルでスナップ無効 */
    height: auto !important;
    overflow-y: visible !important;
  }
  
  [data-section-animation] {
    scroll-snap-align: unset !important;
    scroll-snap-stop: unset !important;
  }
}

/* ========== パフォーマンス最適化 ========== */
[data-section-animation] {
  contain: layout style paint;
  will-change: transform;
}

[data-section-animation] .section-content {
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ========== デバッグモード ========== */
.debug-animations [data-section-animation] {
  border: 3px dashed rgba(255, 0, 0, 0.5);
  position: relative;
}

.debug-animations [data-section-animation]:before {
  content: attr(data-section-animation) ' | Progress: ' var(--scroll-progress, '0');
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  z-index: 9999;
  pointer-events: none;
}

/* ========== 追加エフェクト ========== */

/* 8. 磁気フィールド */

[data-section-animation="sticky-magnetic"] .section-content {
  cursor: none;
}

[data-section-animation="sticky-magnetic"] .magnetic-element {
  transition: transform 0.2s ease-out;
  will-change: transform;
}

/* 9. 液体変形 */
[data-section-animation="sticky-liquid"] {
  overflow: hidden;
}

[data-section-animation="sticky-liquid"] .liquid-bg {
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: liquidFloat 20s ease-in-out infinite;
}

@keyframes liquidFloat {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  50% { transform: translate(-30%, -30%) rotate(180deg); }
}

[data-section-animation="sticky-liquid"][data-scroll-progress] .liquid-bg {
  transform: translate(-50%, -50%) 
             rotate(calc(var(--scroll-progress, 0) * 360deg))
             scale(calc(1 + var(--scroll-progress, 0) * 0.5));
}