/* Page view transitions and badge/status indicator styles.
   Loaded globally in index.html via shared.css or directly. */

/* --- Page View Transitions --- */

home-view > main,
blog-view > main,
blog-post-view > main,
about-view > main,
about-james-view > main,
privacy-view > main,
legal-view > main,
dna-sources-view > main,
imputation-view > main,
diy-view > main,
not-found-view > main {
  animation: page-enter 0.35s ease-out both;
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Badge / Status Indicators --- */

.badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  line-height: 1;
}

.badge-success {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  color: var(--color-success);
}

.badge-warning {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  color: var(--color-warning);
}

.badge-danger {
  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
  color: var(--color-danger);
}

.badge-info {
  background: color-mix(in srgb, var(--color-info) 15%, transparent);
  color: var(--color-info);
}