/**
 * Scroll Animation System
 *
 * スクロール連動アニメーション用の共通CSS
 * Intersection Observer APIと組み合わせて使用
 *
 * 使用方法：
 * 1. 要素にアニメーションクラスを追加（例：fade-in-up, scale-in）
 * 2. 順番にアニメーションさせたい場合は stagger-1 〜 stagger-8 を追加
 * 3. scroll-animations.js が自動的に .visible クラスを付与
 */

/* ===== 基本フェードインアニメーション ===== */

/* 下から上へフェードイン */
.fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 上から下へフェードイン */
.fade-in-down {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-down.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 左からスライドイン */
.fade-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* 右からスライドイン */
.fade-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* スケールイン（拡大しながらフェードイン） */
.scale-in {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* ブラーイン（ブラー解除しながらフェードイン） */
.blur-in {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), filter 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.blur-in.visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* ===== スタガードディレイ（順番にアニメーション） ===== */
/* 短い間隔で素早く表示 */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.1s; }
.stagger-3 { transition-delay: 0.15s; }
.stagger-4 { transition-delay: 0.2s; }
.stagger-5 { transition-delay: 0.25s; }
.stagger-6 { transition-delay: 0.3s; }
.stagger-7 { transition-delay: 0.35s; }
.stagger-8 { transition-delay: 0.4s; }

/* ===== セクションタイトルアニメーション ===== */
.section-title-anim {
  position: relative;
}

.section-title-anim::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  transition: width 0.8s ease, left 0.8s ease;
}

.section-title-anim.visible::after {
  width: 80px;
  left: calc(50% - 40px);
}

/* 左寄せタイトル用 */
.section-title-anim.text-left::after {
  left: 0;
}

.section-title-anim.text-left.visible::after {
  left: 0;
}

/* ===== Hero専用アニメーション ===== */
.hero-title-anim {
  opacity: 0;
  transform: translateY(30px);
  animation: heroFadeIn 1s ease forwards;
  animation-delay: 0.3s;
}

.hero-subtitle-anim {
  opacity: 0;
  transform: translateY(30px);
  animation: heroFadeIn 1s ease forwards;
  animation-delay: 0.6s;
}

.hero-btn-anim {
  opacity: 0;
  transform: scale(0.9);
  animation: heroBtnIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.9s;
}

@keyframes heroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroBtnIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== パララックス効果 ===== */
.parallax-hero {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ===== Instagram画像ホバー効果 ===== */
.instagram-item {
  overflow: hidden;
  border-radius: 8px;
}

.instagram-item img {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.instagram-item:hover img {
  transform: scale(1.1);
}

/* ===== 商品カード用アニメーション強化 ===== */
.product-card-anim {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card-anim.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 即時表示クラス（初期表示要素用） ===== */
/* ページ読み込み時に画面内にある要素は待機なしで表示 */
.animate-immediate {
  transition-delay: 0s !important;
}

.animate-immediate.visible {
  opacity: 1;
  transform: none;
}

/* ===== アクセシビリティ：モーション軽減 ===== */
@media (prefers-reduced-motion: reduce) {
  .fade-in-up,
  .fade-in-down,
  .fade-in-left,
  .fade-in-right,
  .scale-in,
  .blur-in,
  .product-card-anim {
    transition: opacity 0.3s ease;
    transform: none;
    filter: none;
  }

  .hero-title-anim,
  .hero-subtitle-anim,
  .hero-btn-anim {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .section-title-anim::after {
    transition: none;
    width: 80px;
    left: calc(50% - 40px);
  }

  .parallax-hero {
    will-change: auto;
    transition: none;
  }

  .slide-reveal {
    clip-path: none;
    transition: none;
  }
}

/* ===== スライドリビール（左から右へ表示） ===== */
.slide-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-reveal.visible {
  clip-path: inset(0 0 0 0);
}