/* ========================================
   Card Stack Effect - Scroll-driven Animations
   元のCodeHouseデモに完全に忠実な実装
   https://scroll-driven-animations.style/demos/stacking-cards/css/
   ======================================== */

/* カードコンテナ */
#cards,
.stack-cards {
  --numcards: 4;
  view-timeline-name: --cards-element-scrolls-in-body;

  /* カスタマイズ可能な変数 */
  --card-top-offset: 1.5rem;
  --card-radius: 24px;
  --card-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Scroll-driven Animations対応ブラウザのみ */
@supports (animation-timeline: view()) {
  @keyframes scale {
    to {
      transform: scale(calc(1.05 - calc(0.04 * var(--reverse-index))));
    }
  }

  .card__content,
  .stack-card__content {
    --start-range: calc(var(--index0) / var(--numcards) * 100%);
    --end-range: calc((var(--index)) / var(--numcards) * 100%);

    animation: linear scale forwards;
    animation-timeline: --cards-element-scrolls-in-body;
    animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range);
  }
}

/* 各カードのインデックス設定 */
.card:nth-child(1),
.stack-card:nth-child(1) { --index: 1; }
.card:nth-child(2),
.stack-card:nth-child(2) { --index: 2; }
.card:nth-child(3),
.stack-card:nth-child(3) { --index: 3; }
.card:nth-child(4),
.stack-card:nth-child(4) { --index: 4; }
.card:nth-child(5),
.stack-card:nth-child(5) { --index: 5; }
.card:nth-child(6),
.stack-card:nth-child(6) { --index: 6; }

/* インデックス計算（@supports外で定義） */
.card,
.stack-card {
  --index0: calc(var(--index) - 1); /* 0-based index */
  --reverse-index: calc(var(--numcards) - var(--index0)); /* reverse index */
  --reverse-index0: calc(var(--reverse-index) - 1); /* 0-based reverse index */
}

/* カードコンテナ */
.stack-cards {
  display: block !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  list-style: none;
  margin: 0;
}

/* 各カード（外側） - ここにstickyを適用 */
.card,
.stack-card {
  display: block !important;
  margin: 0;
  list-style: none;

  /* 重要: position: stickyは.cardに適用 */
  position: sticky;
  position: -webkit-sticky;
  top: 0;

  /* padding-topでカード間のオフセットを作る */
  padding-top: calc(var(--index) * var(--card-top-offset));
}

/* カードコンテンツ（アニメーションのみ） */
.card__content,
.stack-card__content {
  /* WordPress干渉防止 */
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  /* カードスタイル */

  overflow: visible !important;

  /* パフォーマンス最適化 */
  will-change: transform;
}

/* WordPressレイアウトクラスの干渉を防ぐ */
.stack-card.has-global-padding,
.stack-card.is-layout-constrained {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  /* padding-top は残す（カードオフセット用） */
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  max-width: none !important;
}

.stack-card__content.has-global-padding,
.stack-card__content.is-layout-constrained {
  padding: 0 !important;
  max-width: none !important;
}

/* カバーブロックのスタイル */
.stack-card__content > .wp-block-cover {
  border-radius: var(--card-radius);
  overflow: hidden;
  margin: 0 !important;
}

/* カード間のスペーシング - すべてのカードに統一したスクロール距離を持たせる */
.stack-card {
  margin-bottom: calc(100vh + var(--card-top-offset));
}

/* 最後のカードは margin-bottom を削除（コンテナの padding-bottom で制御） */
.stack-card:last-child {
  margin-bottom: 0;
}

/* レスポンシブ: モバイルではスタック効果を無効化 */
@media (max-width: 768px) {
  .stack-card {
    padding-bottom: 0;
    margin-bottom: 2rem;
  }

  .stack-card__content {
    position: relative !important;
  }
}

/* アクセシビリティ対応 */
@media (prefers-reduced-motion: reduce) {
  .card__content,
  .stack-card__content {
    animation: none !important;
    transform: none !important;
  }
}