/* ========================================================
   シネマティック スクロールアニメーション & 画像フェードイン強化
   株式会社秀和興業 Pattern D
   ======================================================== */

/* --- 1. スクロール連動ベース要素 (.reveal) --- */
.reveal {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* --- 2. カード群の流れるような時間差フェードイン (.stagger) --- */
.reveal .stagger {
  opacity: 0 !important;
  transform: translateY(26px) scale(0.98) !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
  will-change: opacity, transform;
}

.reveal.is-visible .stagger {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 4枚のカードが左から順番にフワッと現れるスタッガーディレイ */
.reveal.is-visible .stagger:nth-child(1) { transition-delay: 0.05s !important; }
.reveal.is-visible .stagger:nth-child(2) { transition-delay: 0.15s !important; }
.reveal.is-visible .stagger:nth-child(3) { transition-delay: 0.25s !important; }
.reveal.is-visible .stagger:nth-child(4) { transition-delay: 0.35s !important; }

/* --- 3. 会社紹介の斜めカット写真 (.company-photo) --- */
.company-photo {
  background-position: center !important;
  background-size: cover !important;
  clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%) !important;
  opacity: 0 !important;
  transform: translateX(-35px) scale(1.04) !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
  will-change: opacity, transform;
}

.company-photo.is-visible {
  opacity: 1 !important;
  transform: translateX(0) scale(1) !important;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.3s cubic-bezier(0.16, 1, 0.3, 1),
              clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (max-width: 700px) {
  .company-photo {
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%) !important;
  }
}

/* --- 4. 画像枠と画像の滑らかなレンダリング & タッチスクロール最適化 --- */
img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x pan-y;
}

.image-wrap {
  overflow: hidden;
  background: #1c2635; /* 画像読み込み前の美しいダーク背景 */
  touch-action: pan-x pan-y !important;
}

.image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none !important; /* スマホで画像上をスワイプした時にブラウザの画像ドラッグ判定でスクロールが止まるのを完全解消 */
  touch-action: pan-x pan-y !important;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s ease !important;
  will-change: transform;
}

/* ホバー時の微かなズーム（PCマウス操作のみに限定し、スマホタッチ時のスクロールロックを完全防止） */
@media (hover: hover) and (pointer: fine) {
  .work-card:hover .image-wrap img,
  .csr-card:hover .image-wrap img,
  .work-list-card:hover .image-wrap img {
    transform: scale(1.06) !important;
  }
}

/* --- 5. ヒーロースライダーのクロスフェード完全最適化 --- */
.hero-bg {
  position: absolute !important;
  inset: 0 !important;
  background-position: center !important;
  background-size: cover !important;
  opacity: 0 !important;
  transform: scale(1.06) !important;
  transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 6.5s ease-out !important;
  z-index: 1;
  will-change: opacity, transform;
}

.hero-bg.active {
  opacity: 1 !important;
  transform: scale(1) !important;
  z-index: 2 !important;
}

/* 直前のスライドが滑らかに背後でフェードアウト */
.hero-bg.last-active {
  z-index: 1 !important;
  opacity: 0 !important;
  transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* --- 6. スマホのタッチスクロール・カルーセル操作最適化 --- */
main {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

@media (max-width: 768px) {
  /* スマホでの物理移動（translateY）を無効化：指が触れた瞬間に画像が上にせり上がったりスクロールが固まる現象を完全防止 */
  .reveal,
  .reveal .stagger,
  .company-photo {
    transform: none !important;
    will-change: opacity !important;
  }

  .reveal {
    transition: opacity 0.3s ease !important;
  }
  .reveal.is-visible {
    transform: none !important;
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .reveal .stagger {
    transition: opacity 0.25s ease !important;
  }
  .reveal.is-visible .stagger {
    transform: none !important;
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .company-photo {
    transition: opacity 0.3s ease !important;
  }
  .company-photo.is-visible {
    transform: none !important;
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* 横スクロールコンテナでも縦スクロール（上下移動）を確実に許可・伝播 */
  .works-track,
  .csr-grid,
  .tech-grid {
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
  }

  /* 各カード・リンクも縦スクロールをブロックしない */
  .work-card,
  .csr-card,
  .tech-grid a,
  .work-list-card,
  .pickup-grid a {
    touch-action: pan-x pan-y !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
  }

  /* 会社紹介の斜めカット写真やヒーロー背景 */
  .company-photo,
  .hero,
  .hero-bg {
    touch-action: pan-y !important;
  }
}