/* ============================================
   イベントハブ基幹システム - アニメーション
   ============================================ */

/* ── キーフレーム定義 ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes countdownPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes glowPulse {
  0%   { box-shadow: 0 0 8px rgba(0,212,255,0.2); }
  50%  { box-shadow: 0 0 24px rgba(0,212,255,0.5); }
  100% { box-shadow: 0 0 8px rgba(0,212,255,0.2); }
}

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* ── ユーティリティクラス ── */
.anim-fadeIn    { animation: fadeIn 0.3s ease forwards; }
.anim-fadeInUp  { animation: fadeInUp 0.35s ease forwards; }
.anim-scaleIn   { animation: scaleIn 0.25s cubic-bezier(.4,0,.2,1) forwards; }
.anim-slideDown { animation: slideDown 0.3s ease forwards; }
.anim-pulse     { animation: pulse 1.5s ease-in-out infinite; }
.anim-spin      { animation: spin 1s linear infinite; }
.anim-glow      { animation: glowPulse 2s ease-in-out infinite; }

/* スタグー遅延（複数カード連続アニメ用） */
.delay-1 { animation-delay: 0.05s; }
.delay-2 { animation-delay: 0.10s; }
.delay-3 { animation-delay: 0.15s; }
.delay-4 { animation-delay: 0.20s; }
.delay-5 { animation-delay: 0.25s; }

/* ── ローダー ── */
.loader {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(0,212,255,0.2);
  border-top-color: var(--accent-cyan);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loader-lg {
  width: 36px; height: 36px;
  border-width: 3px;
}

/* ── スケルトンローディング ── */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ── プログレスバー ── */
.progress-bar {
  height: 6px;
  background: var(--bg-card);
  border-radius: 99px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--accent-cyan);
  border-radius: 99px;
  transition: width 0.8s cubic-bezier(.4,0,.2,1);
}

/* ── カウントダウン表示 ── */
.countdown-display {
  font-size: 72px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent-cyan);
  text-align: center;
  animation: countdownPulse 1s ease-in-out infinite;
  line-height: 1;
}

/* ── ステータスインジケーター ── */
.status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.status-indicator .pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-green);
  position: relative;
}

.status-indicator .pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(0,255,157,0.3);
  animation: pulse 1.5s ease-in-out infinite;
}