/* ========================================
   GSAPアニメーション用のスタイル
   ======================================== */

/* アニメーション対象の初期状態 */
[data-animation],
[data-animation-item] {
  /* パフォーマンス最適化 */
  will-change: transform, opacity;
}

/* アニメーション完了後にwill-changeを削除 */
.animation-complete {
  will-change: auto;
}

/* ========================================
   画像のオーバーフロー対策
   ======================================== */
[data-animation='imageZoom'],
.p-about__card-image,
.p-voice__card-image,
.p-recruit__card-image {
  overflow: hidden;
}

[data-animation='imageZoom'] img,
.p-about__card-image img,
.p-voice__card-image img,
.p-recruit__card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* transition を削除してGSAPに任せる */
}

/* アニメーション中はpointer-eventsを無効化 */
[data-animation],
[data-animation-item] {
  pointer-events: auto;
}

/* アニメーション中のクラス */
.gsap-animating {
  pointer-events: none;
}

/* ========================================
   スプリットテキスト用
   ======================================== */
[data-animation='splitText'] {
  display: inline-block;
}

[data-animation='splitText'] .char {
  display: inline-block;
  transform-origin: 50% 100%;
}

/* ========================================
   ライン描画アニメーション用
   ======================================== */
[data-animation='drawLine'] {
  --line-width: 0%;
  position: relative;
  display: inline-block;
}

[data-animation='drawLine']::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: var(--line-width);
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}

/* ========================================
   カード共通のホバーエフェクト
   ======================================== */
.p-about__card,
.p-voice__card,
.p-recruit__card {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.p-about__card:hover,
.p-voice__card:hover,
.p-recruit__card:hover {
  transform: translateY(-4px);
}

/* ========================================
   ページトップボタン
   ======================================== */
.c-page-top {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.c-page-top.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ========================================
   フローティングCTA
   ======================================== */
.p-floating-cta {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   パララックス用
   ======================================== */
[data-animation='parallax'] {
  will-change: transform;
}

/* ========================================
   スムーススクロール
   ======================================== */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ========================================
   アニメーション無効化設定
   アクセシビリティ対応
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-animation],
  [data-animation-item] {
    will-change: auto;
  }
}

/* ========================================
   ローディング時の初期非表示
   ========================================== */
.js-loading [data-animation],
.js-loading [data-animation-item] {
  opacity: 0;
}

/* ========================================
   セクション共通のスペーシング調整
   ======================================== */
section {
  position: relative;
}

/* ========================================
   カスタムイージング用のCSS変数
   ======================================== */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-circ: cubic-bezier(0, 0.55, 0.45, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================================
   ニュースアイテムのホバーエフェクト
   ======================================== */
.p-news__content--item {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.p-news__content--item:hover {
  transform: translateX(8px);
}

/* ========================================
   職種リストのホバーエフェクト
   ======================================== */
.u-jobs a {
  position: relative;
  transition: color 0.3s ease;
}

.u-jobs a::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}

.u-jobs a:hover::before {
  width: 100%;
}

/* ========================================
   関連リンクのホバーエフェクト
   ======================================== */
.p-related-links__item li {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.p-related-links__item li:hover {
  transform: translateY(-6px);
}

/* ========================================
   タイトル共通のスタイル
   ======================================== */
.c-common__title {
  overflow: hidden;
}

.c-common__title .title-ja,
.c-common__title .title-en {
  display: block;
}

/* ========================================
   モバイル用の最適化
   ======================================== */
@media (max-width: 768px) {
  /* モバイルではwill-changeを控えめに */
  [data-animation],
  [data-animation-item] {
    will-change: auto;
  }

  /* ホバーエフェクトを無効化 */
  .p-about__card:hover,
  .p-voice__card:hover,
  .p-recruit__card:hover,
  .p-news__content--item:hover,
  .p-related-links__item li:hover {
    transform: none;
  }

  /* 画像ズームもモバイルでは控えめに */
  [data-animation='imageZoom'] img:hover,
  .p-about__card-image img:hover,
  .p-voice__card-image img:hover,
  .p-recruit__card-image img:hover {
    transform: none;
  }
}

/* ========================================
   デバッグ用（開発時のみ使用）
   ======================================== */
/* 
.debug [data-animation] {
  outline: 2px dashed red;
}

.debug [data-animation-group] {
  outline: 2px dashed blue;
}

.debug [data-animation-item] {
  outline: 1px dashed green;
}
*/

/* ========================================
   ページ遷移アニメーション
   ======================================== */
body {
  opacity: 1;
  transition: opacity 0.3s ease;
}

body.is-transitioning {
  opacity: 0;
}

/* ========================================
   スクロールバーのスタイル（オプション）
   ======================================== */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Firefox用 */
* {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}