/* Functional loading and motion styles shared by classic and modern. */
.archive-model-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 220px;
  overflow: hidden;
  contain: layout paint;
}
.archive-model-preview .archive-preview-renderer {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.archive-model-preview .archive-preview-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  background: transparent;
}
.archive-preview-label {
  color: var(--muted);
  font-size: .8rem;
  padding: 18px;
  text-align: center;
}
.archive-model-preview[data-preview-state="loading"]::after,
.loading::after {
  content: "";
  display: block;
  width: 38px;
  height: 3px;
  border-radius: 4px;
  background: var(--accent);
  animation: loading-breathe 1.2s ease-in-out infinite;
}
.archive-model-preview[data-preview-state="loading"]::after { position: absolute; bottom: 15px; }
.loading::after { margin: 16px auto 0; }
.archive-model-preview[data-preview-state="ready"] .archive-preview-label { display: none; }
.archive-grid > [hidden] { display: none !important; }
.archive-card img[data-load-state="loading"] { opacity: .35; }
.archive-card img[data-load-state="error"] { color: var(--muted); border: 1px dashed var(--line); }

:is(.nav-link, .archive-filter, .quick-link, .country-open, .article-image-button, .world-switch-button) {
  transition: color var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
}
:is(.term-card, .timeline-card, .country-card, .book-card) {
  transition: border-color var(--motion-normal), background-color var(--motion-normal);
}
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover { transform: translateX(calc(3px * var(--motion-intensity))); }
  :is(.archive-filter, .article-image-button):hover { transform: translateY(calc(-2px * var(--motion-intensity))); }
  :is(.term-card, .timeline-card, .country-card, .book-card):hover { border-color: var(--accent); }
}
:is(button, .quick-link, .archive-filter, .article-image-button):active:not(:disabled) {
  transform: scale(calc(1 - .018 * var(--motion-intensity)));
}
:is(input, textarea, select):focus-visible { transition: border-color var(--motion-fast), box-shadow var(--motion-fast); }
.site-toast { animation: toast-arrive calc(220ms * var(--motion-tempo)) ease-out; }
.search-results.open { animation: surface-arrive calc(160ms * var(--motion-tempo)) ease-out; }
details[open] > :not(summary) { animation: surface-arrive calc(180ms * var(--motion-tempo)) ease-out; }
@keyframes surface-arrive { from { opacity: .3; } to { opacity: 1; } }
@keyframes toast-arrive { from { opacity: 0; translate: 0 calc(8px * var(--motion-intensity)); } to { opacity: 1; translate: 0 0; } }
@keyframes loading-breathe { 0%, 100% { opacity: .25; transform: scaleX(.55); } 50% { opacity: 1; transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .loading::after, .archive-model-preview::after { animation: none; }
}