/* Shared motion for public pages and portal screens. */
:root {
  --motion-fast: 160ms;
  --motion-normal: 260ms;
  --motion-ease: cubic-bezier(.2, .7, .2, 1);
}
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out 140ms ease-in; }
::view-transition-new(root) { animation: page-fade 200ms ease-out; }
@keyframes page-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes panel-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes popup-in { from { opacity: 0; scale: .97; } to { opacity: 1; scale: 1; } }

:where(button, .btn, input[type="submit"], nav a, .portal-link, .admin-tab, .go-back a) {
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease,
    border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease,
    transform var(--motion-fast) var(--motion-ease);
}
:where(button, .btn, input[type="submit"]):active:not(:disabled) { scale: .98; }
:where(input, select, textarea) {
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}
:where(.card, .service-card, .portal-card, .event-card, .event-admin-card) {
  transition: box-shadow var(--motion-normal) ease, transform var(--motion-normal) var(--motion-ease);
}
:where(.admin-tab-content.active, .tab-content.active, .dropdown-content.show, .menubar.active) {
  animation: panel-in var(--motion-normal) var(--motion-ease) both;
}
:where(.popup-content, dialog[open]) {
  animation: popup-in var(--motion-normal) var(--motion-ease) both;
}
.logout-transition {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #fffcee;
  color: #004d00;
  text-align: center;
  animation: page-in var(--motion-normal) var(--motion-ease) both;
}
.logout-spinner {
  display: inline-block;
  width: 48px;
  height: 48px;
  border: 4px solid #dce8d7;
  border-top-color: #004d00;
  border-radius: 50%;
  animation: logout-spin 800ms linear infinite;
}
@keyframes logout-spin { to { transform: rotate(360deg); } }
dialog::backdrop { transition: opacity var(--motion-normal) ease; }
html { scroll-behavior: smooth; }

/* Animate entry and exit for overlays without delaying their event handlers. */
@supports (transition-behavior: allow-discrete) {
  .popup {
    transition: opacity var(--motion-fast) ease, display var(--motion-fast) allow-discrete;
    opacity: 1;
  }
  .popup[style*="display: none"], .popup[style*="display:none"] { opacity: 0; }
  @starting-style { .popup { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}