/* Shared motion: content stays visible when animations are unavailable. */
@keyframes fh-arrive {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes fh-dialog {
  from { opacity: 0; translate: 0 10px; scale: .98; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes fh-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fh-line {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

@media (prefers-reduced-motion: no-preference) {
  main > :is(header, .logo, h1, p, .panel, details, form, .start-button, .secondary-button),
  .country-card, #favorites > .card {
    animation: fh-arrive 520ms cubic-bezier(.2, .7, .2, 1) backwards;
  }

  main > h1 { animation-delay: 60ms; }
  main > :is(p, .panel, form) { animation-delay: 120ms; }
  main > :is(.start-button, .secondary-button) { animation-delay: 180ms; }
  :is(.country-card, #favorites > .card, main > details):nth-child(4n + 2) { animation-delay: 50ms; }
  :is(.country-card, #favorites > .card, main > details):nth-child(4n + 3) { animation-delay: 100ms; }
  :is(.country-card, #favorites > .card, main > details):nth-child(4n) { animation-delay: 150ms; }
  main > .line { animation: fh-line 650ms 120ms ease-out backwards; }

  :is(.profile-dialog, #country-modal):not([hidden]) {
    animation: fh-fade 180ms ease-out;
  }
  .profile-dialog:not([hidden]) > .profile-card,
  #country-modal:not([hidden]) > .modal-card,
  #login-form:not([hidden]), .profile-links:not([hidden]),
  #session-expired-dialog[open] {
    animation: fh-dialog 240ms cubic-bezier(.2, .7, .2, 1);
  }
  details[open] > :not(summary) { animation: fh-arrive 220ms ease-out; }

  :is(button, .start-button, .secondary-button, .micronations, .back, .legend a) {
    transition: transform 180ms ease, box-shadow 180ms ease,
      background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  }
  .country-card img, #favorites > .card img {
    transition: transform 240ms ease;
  }
  :is(button, .start-button, .secondary-button, .micronations):not(:disabled):active {
    scale: .97;
  }

  @media (hover: hover) and (pointer: fine) {
    .country-card:hover img, #favorites > .card:hover img { transform: rotate(-2deg) scale(1.05); }
    .back:hover, .legend a:hover { transform: translateY(-2px); }
  }
  .country-card:focus-visible img, #favorites > .card:focus-within img {
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}