/* Unified Loading State (Phase 3 Overhaul) — TASTEOME
   .loading-state を canonical wrapper、 .dna-spinner を再利用 (既存 hub/tier/daily と同じ markup)。
   Domain `.loading` (旧 text-only) も同じ dna-spinner を使用するよう更新済。 */

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 1rem;
  color: var(--t-fg-soft);
  font-family: var(--t-font-sans);
  font-size: 0.9rem;
  text-align: center;
}

.loading-state p { margin: 0; color: var(--t-muted); }

/* DNA Spinner — identity-hub.css と統一の canonical 定義 (Phase 3 で集約) */
.dna-spinner {
  position: relative;
  width: 60px;
  height: 60px;
}
.dna-spinner div {
  position: absolute;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--t-accent);
  animation: dnaSpin 1.2s linear infinite;
}
.dna-spinner div:nth-child(2) {
  border-top-color: var(--t-accent-warm);
  animation-delay: -0.4s;
}
.dna-spinner div:nth-child(3) {
  border-top-color: var(--t-emo);
  animation-delay: -0.8s;
}
@keyframes dnaSpin {
  0%   { transform: rotate(0deg)   scale(0.7); opacity: 0.4; }
  50%  { transform: rotate(180deg) scale(1.0); opacity: 1.0; }
  100% { transform: rotate(360deg) scale(0.7); opacity: 0.4; }
}

/* ⚠ 空状態 (.empty-state) は shared/css/components/empty-state.css へ移設。
   ここに戻さない — loading と empty は別の役割で、link する page 集合も違う。 */