/* File: public/css/design-system/animations.css */

/* ========================================
   アニメーションライブラリ
   - @supportsルールによるプログレッシブ・エンハンスメントを実装。
   - @media (prefers-reduced-motion) を強化し、
     アニメーション抑制設定のユーザーにも表示を完全に保証します。
   ======================================== */

/* ===== アニメーション設定変数 ===== */
:root {
  /* アニメーション時間 */
  --duration-instant: 0.1s;
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-medium: 0.5s;
  --duration-slow: 0.8s;
  --duration-slower: 1s;
  
  /* 共通の移動距離 */
  --hover-lift: -4px;
  --hover-lift-large: -8px;
  --slide-distance: 20px;
  --slide-distance-large: 40px;
  
  /* 共通のスケール値 */
  --scale-hover: 1.02;
  --scale-hover-large: 1.05;
  --scale-active: 0.98;
  --scale-active-small: 0.95;
  --scale-hidden: 0.95;
  --scale-hidden-small: 0.9;
}

/* 
  ==============================================================
   デフォルトのスタイル
   - すべての要素が最初から表示されることを保証します。
  ==============================================================
*/
.card,
.card-header,
.card-body > *,
.card-title,
.card-footer,
.card-action {
  opacity: 1;
  transform: none;
}

/* ===== Keyframe definitions (キーフレーム定義はグローバルに配置) ===== */
@keyframes cardFadeIn { from { opacity: 0; translate: 0 40px; scale: 0.95; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes contentFadeIn1 { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes contentFadeIn2 { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes contentFadeIn3 { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cardFadeOut { from { opacity: 1; translate: 0 0; scale: 1; } to { opacity: 0; translate: 0 -40px; scale: 0.95; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideLeft { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideRight { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes scaleOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes progressGrow { from { width: 0%; } to { width: var(--target-width, 0%); } }
@keyframes gradientShift { 0%, 100% { background-position: 0% 50%; background-size: 200% 200%; } 50% { background-position: 100% 50%; background-size: 200% 200%; } }
@keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-30px) rotate(120deg); } 66% { transform: translateY(30px) rotate(240deg); } }
@keyframes floatCircle { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(30px, -40px) rotate(90deg); } 50% { transform: translate(-20px, -60px) rotate(180deg); } 75% { transform: translate(-40px, 20px) rotate(270deg); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 5px var(--primary-user, rgba(102, 126, 234, 0.5)); } 50% { box-shadow: 0 0 20px var(--primary-user, rgba(102, 126, 234, 0.5)), 0 0 30px var(--primary-user, rgba(102, 126, 234, 0.5)); } }
@keyframes wave { 0% { transform: translateX(-100%) translateY(0) scaleY(1); } 50% { transform: translateX(0) translateY(-25%) scaleY(0.5); } 100% { transform: translateX(100%) translateY(0) scaleY(1); } }
@keyframes ripple { 0% { transform: scale(0); opacity: 0.5; } 100% { transform: scale(4); opacity: 0; } }
@keyframes iconBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1) rotate(5deg); } }
@keyframes inputFocus { 0% { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } 100% { box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1); } }
@keyframes statusIconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 8px currentColor); } }
@keyframes skeleton { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ===== 汎用/ホバー/ユーティリティクラス (アニメーション定義のみ) ===== */
.animate-rotate { animation: rotate 1s var(--ease-linear, linear) infinite; }
.animate-pulse { animation: pulse 2s var(--ease-in-out, ease-in-out) infinite; }
.animate-bounce { animation: bounce 1s var(--ease-in-out, ease-in-out) infinite; }
.animate-float { animation: float 20s var(--ease-in-out, ease-in-out) infinite; }
.animate-iconBounce { animation: iconBounce 0.4s var(--ease-out, ease-out); }
.animate-statusIconPulse { animation: statusIconPulse 0.6s var(--ease-out, ease-out); }
.form-input:focus { animation: inputFocus 0.3s var(--ease-out, ease-out); }

.animation-delay-100 { animation-delay: 0.1s; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-500 { animation-delay: 0.5s; }
.animation-delay-1000 { animation-delay: 1s; }

.animation-duration-fast { animation-duration: var(--duration-fast, 0.15s); }
.animation-duration-medium { animation-duration: var(--duration-medium, 0.5s); }
.animation-duration-slow { animation-duration: var(--duration-slow, 0.8s); }

.hover-base {
  --translate-x: 0; --translate-y: 0; --scale: 1; --rotate: 0deg;
  translate: var(--translate-x) var(--translate-y);
  scale: var(--scale); rotate: var(--rotate);
  transition: translate var(--duration-normal, 0.3s) var(--ease-out, ease-out),
              scale var(--duration-normal, 0.3s) var(--ease-out, ease-out),
              rotate var(--duration-normal, 0.3s) var(--ease-out, ease-out);
}
.hover-grow { transition: scale var(--duration-fast, 0.15s) var(--ease-out, ease-out); }
.hover-grow:hover { --scale: var(--scale-hover-large, 1.05); }
.hover-shrink { transition: scale var(--duration-fast, 0.15s) var(--ease-out, ease-out); }
.hover-shrink:hover { --scale: var(--scale-active, 0.95); }
.hover-lift { transition: translate var(--duration-medium, 0.5s) var(--ease-out, ease-out); }
.hover-lift:hover { --translate-y: var(--hover-lift, -4px); }
.hover-sink { transition: translate var(--duration-medium, 0.5s) var(--ease-out, ease-out); }
.hover-sink:hover { --translate-y: 2px; }
.hover-lift-grow {
  transition: translate var(--duration-medium, 0.5s) var(--ease-out, ease-out),
              scale var(--duration-medium, 0.5s) var(--ease-out, ease-out);
}
.hover-lift-grow:hover { --translate-y: var(--hover-lift, -4px); --scale: var(--scale-hover, 1.02); }

.skeleton {
  background: linear-gradient(90deg, var(--gray-200, #e9ecef) 25%, var(--gray-300, #dee2e6) 50%, var(--gray-200, #e9ecef) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.5s ease-in-out infinite;
}


/* 
  ==============================================================
   【重要】アクセシビリティ: Reduced Motion対応
   - このブロックは、アニメーションを抑制する設定のユーザーに適用されます。
   - !important を使い、他のスタイルを上書きして表示を保証します。
  ==============================================================
*/
@media (prefers-reduced-motion: reduce) {
  /* ページトランジションや要素のアニメーションを無効化し、表示を保証 */
  .card,
  .card-header,
  .card-body > *,
  .card-title,
  .card-footer,
  .card-action {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;
  }
  
  /* その他のアニメーションユーティリティクラスも無効化 */
  .animate-fadeIn, .animate-fadeOut, .animate-slideUp, .animate-slideDown, .animate-slideLeft, .animate-slideRight, .animate-scaleIn, .animate-scaleOut, .animate-rotate, .animate-pulse, .animate-bounce, .animate-float, .animate-iconBounce, .animate-statusIconPulse {
    animation: none !important;
    transition: none !important;
  }
  
  /* 装飾的なホバーエフェクトを無効化 */
  .hover-grow:hover, .hover-shrink:hover, .hover-lift:hover, .hover-sink:hover {
    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;
  }
}

/* 
  ==============================================================
   アニメーション対応ブラウザ向けのスタイル
   - animation と translate に対応している場合にのみ、
     デフォルトのスタイルを上書きしてアニメーションを実行します。
  ==============================================================
*/
@supports (animation-name: a) and (translate: 0 0) {

  /* カード統一アニメーション */
  .card {
    opacity: 0;
    translate: 0 40px;
    scale: 0.95;
    animation: cardFadeIn 0.6s var(--ease-out, ease-out) forwards;
  }

  /* カード内部要素の段階的アニメーション */
  .card-header,
  .card-body > *:nth-child(1),
  .card-title {
    opacity: 0;
    transform: translateY(20px);
    animation: contentFadeIn1 0.75s var(--ease-out, ease-out) 0.2s both;
  }

  .card-body > *:nth-child(2),
  .card-body form,
  .card-body .form-group:first-child {
    opacity: 0;
    transform: translateY(30px);
    animation: contentFadeIn2 0.75s var(--ease-out, ease-out) 0.4s both;
  }

  .card-body > *:nth-child(3),
  .card-body > *:nth-child(n+3),
  .card-footer,
  .card-action {
    opacity: 0;
    transform: translateY(20px);
    animation: contentFadeIn3 0.75s var(--ease-out, ease-out) 0.6s both;
  }

  /* 動的表示/非表示用のクラス */
  .card.is-hidden {
    opacity: 0;
    translate: 0 -40px;
    scale: 0.95;
    transition: opacity 0.5s var(--ease-out, ease-out), translate 0.5s var(--ease-out, ease-out), scale 0.5s var(--ease-out, ease-out);
    pointer-events: none;
  }

  .card.is-visible {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    transition: opacity 0.5s var(--ease-out, ease-out), translate 0.5s var(--ease-out, ease-out), scale 0.5s var(--ease-out, ease-out);
    pointer-events: auto;
  }

  /* カードフェードアウトアニメーション */
  .card.fade-out {
    animation: cardFadeOut 0.5s var(--ease-out, ease-out) forwards;
  }

  /* 動的表示用 */
  .card.fade-in {
    opacity: 0;
    translate: 0 40px;
    scale: 0.95;
    animation: cardFadeIn var(--duration-slow, 0.8s) var(--ease-out, ease-out) forwards;
  }
  
  /* ユーティリティクラスに具体的なアニメーション設定を適用 */
  .animate-fadeIn { animation: fadeIn var(--duration-medium, 0.5s) var(--ease-out, ease-out); }
  .animate-fadeOut { animation: fadeOut var(--duration-medium, 0.5s) var(--ease-in, ease-in); }
  .animate-slideUp { animation: slideUp var(--duration-medium, 0.5s) var(--ease-out, ease-out); }
  .animate-slideDown { animation: slideDown var(--duration-medium, 0.5s) var(--ease-out, ease-out); }
  .animate-slideLeft { animation: slideLeft var(--duration-medium, 0.5s) var(--ease-out, ease-out); }
  .animate-slideRight { animation: slideRight var(--duration-medium, 0.5s) var(--ease-out, ease-out); }
  .animate-scaleIn { animation: scaleIn var(--duration-medium, 0.5s) var(--ease-bounce, cubic-bezier(0.68, -0.55, 0.27, 1.55)); }
  .animate-scaleOut { animation: scaleOut var(--duration-medium, 0.5s) var(--ease-in, ease-in); }
}