@charset "utf-8";

/**
 * Animation System
 * サイト全体のアニメーション
 */


/* ====================================
  スクロールアニメーション（Reveal）
==================================== */

/* 初期状態（非表示） */
.reveal {
  opacity: 0;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
  will-change: opacity, transform;
}

/* フェードイン（下から） */
.reveal--up {
  transform: translateY(24px);
}

/* フェードイン（左から） */
.reveal--left {
  transform: translateX(-40px);
}

/* フェードイン（右から） */
.reveal--right {
  transform: translateX(40px);
}

/* フェードイン（拡大） */
.reveal--scale {
  transform: scale(0.9);
}

/* フェードイン（回転） */
.reveal--rotate {
  transform: rotate(-5deg) translateY(20px);
}

/* 表示状態 */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1) rotate(0);
}

/* 遅延クラス */
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }
.reveal--delay-5 { transition-delay: 0.5s; }


/* ====================================
  カードホバーアニメーション
==================================== */

/* リフトアップ効果 */
.hover-lift {
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* シャインエフェクト */
.hover-shine {
  position: relative;
  overflow: hidden;
}
.hover-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  transform: rotate(45deg) translateX(-100%);
  transition: transform 0.6s ease;
}
.hover-shine:hover::after {
  transform: rotate(45deg) translateX(100%);
}

/* 画像ズーム効果 */
.hover-zoom {
  overflow: hidden;
}
.hover-zoom img {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-zoom:hover img {
  transform: scale(1.08);
}

/* ボーダーアニメーション */
.hover-border {
  position: relative;
}
.hover-border::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #fbbf24;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-border:hover::before {
  width: 100%;
  left: 0;
}


/* ====================================
  ボタンアニメーション
==================================== */

/* パルスエフェクト */
.btn-pulse {
  position: relative;
}
.btn-pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fbbf24;
  opacity: 0;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

/* リップルエフェクト */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}


/* ====================================
  テキストアニメーション
==================================== */

/* タイピング効果（カバータイトル用） */
.text-typing {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #fbbf24;
  animation:
    typing 2s steps(20, end),
    blink-caret 0.75s step-end infinite;
}
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: #fbbf24; }
}

/* グラデーションテキスト */
.text-gradient {
  background: linear-gradient(90deg, #fbbf24, #facc15);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* テキストシャドウホバー */
.text-glow:hover {
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
}


/* ====================================
  ローディングアニメーション
==================================== */

/* スピナー */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #fbbf24;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ドットローダー */
.loading-dots {
  display: flex;
  gap: 6px;
}
.loading-dots span {
  width: 10px;
  height: 10px;
  background: #fbbf24;
  border-radius: 50%;
  animation: bounce 1.4s ease-in-out infinite both;
}
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* スケルトンローダー */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ====================================
  ページトランジション
==================================== */

/* ページロード時のフェードイン */
.page-transition {
  animation: pageIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ====================================
  カバーセクションアニメーション
==================================== */

/* カバー背景パララックス */
.cover-parallax {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

/* カバータイトルアニメーション */
.cover__title-en {
  animation: fadeInDown 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.cover__title-ja {
  animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ====================================
  セクションタイトルアニメーション
==================================== */
.section__title {
  position: relative;
}
.section__title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 0;
  height: 3px;
  background: #fbbf24;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.section__title.is-visible::after {
  width: 60px;
  left: calc(50% - 30px);
}


/* ====================================
  ナビゲーションアニメーション
==================================== */

/* SPナビリンクのスタガーアニメーション */
.header-nav--sp.is-active .header-nav__item {
  animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.header-nav--sp.is-active .header-nav__item:nth-child(1) { animation-delay: 0.05s; }
.header-nav--sp.is-active .header-nav__item:nth-child(2) { animation-delay: 0.1s; }
.header-nav--sp.is-active .header-nav__item:nth-child(3) { animation-delay: 0.15s; }
.header-nav--sp.is-active .header-nav__item:nth-child(4) { animation-delay: 0.2s; }
.header-nav--sp.is-active .header-nav__item:nth-child(5) { animation-delay: 0.25s; }
.header-nav--sp.is-active .header-nav__item:nth-child(6) { animation-delay: 0.3s; }
.header-nav--sp.is-active .header-nav__item:nth-child(7) { animation-delay: 0.35s; }
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* ====================================
  スクロールインジケーター
==================================== */
.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollBounce 2s infinite;
}
.scroll-indicator::before {
  content: '';
  display: block;
  width: 24px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 12px;
  position: relative;
}
.scroll-indicator::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 8px;
  background: #fff;
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollDot 2s infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}
@keyframes scrollDot {
  0% { opacity: 1; top: 8px; }
  100% { opacity: 0; top: 20px; }
}


/* ====================================
  カウントアップアニメーション
==================================== */
.count-up {
  font-variant-numeric: tabular-nums;
}


/* ====================================
  アコーディオンアニメーション
==================================== */
.accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion__item.is-open .accordion__content {
  max-height: 500px;
}
.accordion__icon {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion__item.is-open .accordion__icon {
  transform: rotate(180deg);
}


/* ====================================
  フォーカスアニメーション
==================================== */
input:focus,
textarea:focus,
select:focus {
  animation: focusPulse 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes focusPulse {
  0% { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0.2); }
  100% { box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.06); }
}


/* ====================================
  Reduced Motion対応
==================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}