/* ============================================================
   ANIMATIONS — Loading, transitions
   ============================================================ */

.xh-loading-step {
  opacity: 0.2;
  transition: all 0.3s ease;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-1);
  padding: 3px 0;
}

.xh-loading-step.done {
  opacity: 1;
  color: var(--cyan);
}

.xh-loading-step.done::after {
  content: ' ✓ SYNCED';
  color: var(--cyan);
  margin-left: 4px;
}

/* 視覚的グリッチ効果（チェック時に一瞬だけ） */
@keyframes xh-glitch {
  0%   { transform: translateX(0); text-shadow: -1px 0 var(--cyan), 1px 0 var(--cyan-dim); }
  25%  { transform: translateX(-1px); text-shadow: -2px 0 var(--cyan), 2px 0 var(--cyan-dim); }
  50%  { transform: translateX(1px); text-shadow: 2px 0 var(--cyan), -2px 0 var(--cyan-dim); }
  75%  { transform: translateX(-0.5px); text-shadow: -1px 0 var(--cyan), 1px 0 var(--cyan-dim); }
  100% { transform: translateX(0); text-shadow: none; }
}

.xh-loading-step.done {
  animation: xh-glitch 0.18s steps(2, end) 1;
}

.xh-loading-step.locked::after {
  content: ' LOCKED (v4)';
  color: var(--text-2);
  margin-left: 4px;
}

.xh-loading-bar {
  height: 4px;
  background: var(--cyan);
  border-radius: 999px;
  width: 0;
  transition: width 0.5s ease-out;
}

@keyframes xh-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* API待ち中のインディタミネート状態 */
.xh-loading-bar.indeterminate {
  width: 100% !important;
  background: linear-gradient(
    90deg,
    var(--cyan) 0%,
    rgba(0, 255, 255, 0.12) 35%,
    var(--cyan) 60%,
    rgba(0, 255, 255, 0.12) 80%,
    var(--cyan) 100%
  );
  background-size: 200% 100%;
  animation: xh-shimmer 2s linear infinite;
  transition: none !important;
}

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

.xh-status-dot {
  animation: xh-pulse 2s ease-in-out infinite;
}