/* =====================================================================
   animations.css
   複数パターンのモーションを用途別に定義。
   JS側で IntersectionObserver が要素に .is-visible を付与すると発火します。
   prefers-reduced-motion のユーザーには即表示（アニメーションなし）にします。
   ===================================================================== */

/* ---- パターン1: フェード + 少し下から上がる（見出し・本文向け） ---- */
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }

/* ---- パターン2: フェード + スケール（カード群向け、stagger と併用） ---- */
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

/* ---- パターン3: 左右からのスライドイン（交互レイアウト向け） ---- */
.reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

/* ---- パターン4: 下線・区切り線が横に伸びる ---- */
.reveal-line {
  position: relative;
  overflow: hidden;
}
.reveal-line::before {
  content: "";
  position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: var(--color-gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease-out);
}
.reveal-line.is-visible::before { transform: scaleX(1); }

/* ---- stagger 用の遅延ユーティリティ（JSがdata-indexから自動付与） ---- */
.reveal-scale[data-stagger], .reveal-up[data-stagger] { transition-delay: calc(var(--i, 0) * 90ms); }

/* ---- パターン5: 見出し文字を1文字ずつ出す（ヒーロー用） ---- */
.split-chars .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) rotate(4deg);
  filter: blur(6px);
  animation: charIn 0.7s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes charIn {
  to { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); }
}

/* ---- パターン6: フェードのみ（控えめに使う場所向け） ---- */
.fade-in {
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}
.fade-in.is-visible { opacity: 1; }

/* ---- パターン7: 数字カウントアップ用の下地（js側でtextContent更新） ---- */
.count-up { font-variant-numeric: tabular-nums; }

/* ---- パターン8: SVGラインが描画されるように見える活動フロー矢印 ---- */
.flow-list .flow-step::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.flow-list.is-visible .flow-step::after { transform: scaleX(1); }

/* ---- ヒーロー背景の緩やかな視差（scroll に応じて JS が transform を更新） ---- */
.hero-media img { transition: transform 0.2s linear; }

/* ---- 装飾の花びらフロート（控えめなアンビエント動き） ---- */
.petal {
  position: absolute;
  opacity: 0.5;
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(6deg); }
}

/* ---- パターン9: 初回ロード時のイントロスプラッシュ（黒画面→ロゴ→フェードアウト） ---- */
/* index.html にのみ設置。sessionStorage で1セッション1回だけ再生（main.js側で制御） */
#intro-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.45s var(--ease-out);
}
#intro-splash .brand-lockup {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
#intro-splash.is-in .brand-lockup { opacity: 1; transform: scale(1); }
#intro-splash.is-out { opacity: 0; pointer-events: none; }
#intro-splash.is-done { display: none; }

/* ---- ページ遷移フェード（View Transitions 対応ブラウザ向け・任意強化） ---- */
@supports (view-transition-name: none) {
  ::view-transition-old(root) { animation-duration: 0.25s; }
  ::view-transition-new(root) { animation-duration: 0.35s; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-scale, .reveal-left, .reveal-right, .fade-in,
  .split-chars .char, .reveal-line::before, .flow-list .flow-step::after {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
  .petal { display: none; }
  #intro-splash { display: none !important; }
}