/* Motion & finishing layer: page transitions, header on scroll, image and panel
   fades, refined reveals, selection colour. Everything here is decoration; it is
   switched off for visitors who ask for reduced motion. */

/* ---------- Page-to-page transitions (cross-document View Transitions) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease-out) both; }
.utility-bar { view-transition-name: utility-bar; }
.site-header { view-transition-name: site-header; }
::view-transition-group(site-header), ::view-transition-group(utility-bar) { animation: none; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

html { scroll-behavior: smooth; }
::selection { background: rgba(197, 160, 89, 0.35); color: inherit; }

/* ---------- Header: slimmer with a soft shadow once the page scrolls ---------- */
.site-header { transition: padding .45s var(--ease-out), box-shadow .45s ease, background-color .45s ease, border-color .45s ease; }
.site-header.is-scrolled {
  --hdr-pad: .7rem;
  box-shadow: 0 12px 30px rgba(13, 16, 43, 0.08);
  background: color-mix(in srgb, var(--c-bg) 92%, transparent);
  border-bottom-color: transparent;
}

/* ---------- Images fade in as they arrive (class set by motion.js) ---------- */
.js img.img-fade:not(.is-loaded) { opacity: 0; }
/* Keyframes only set the start, and fill backwards only, so each image ends at its own
   opacity (e.g. the faint photo behind the countdown band stays faint) */
.js img.img-fade.is-loaded { animation: img-in .8s var(--ease-out) backwards; }
@keyframes img-in { from { opacity: 0; } }

/* ---------- Panels that appear: menus, search, tabs, dialogs ---------- */
@keyframes rise-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.search-panel:not([hidden]) { animation: rise-in .4s var(--ease-out) both; }
.notice-bar:not([hidden]) { animation: rise-in .5s var(--ease-out) both; }
@media (max-width: 1100px) {
  .primary-nav.is-open { animation: rise-in .4s var(--ease-out) both; }
  .has-dropdown.is-open .submenu { animation: fade-in .35s ease both; }
}
.tabs__panel:not([hidden]) { animation: fade-up .5s var(--ease-out) both; }
.district-preview:not([hidden]) { animation: fade-up .4s var(--ease-out) both; }
.finder-results:not([hidden]) { animation: rise-in .3s var(--ease-out) both; }
.modal { animation: fade-in .3s ease both; }
.modal__dialog { animation: fade-up .45s var(--ease-out) both; }
.lightbox__img img { animation: img-in .5s var(--ease-out) backwards; }
.toast:not([hidden]) { animation: fade-up .4s var(--ease-out) both; }

/* ---------- Gentler, longer hover easing on cards ---------- */
/* Revealed cards keep their hover lift (the reveal's resting transform would otherwise win) */
.js .card[data-reveal].is-visible:hover, .js .tile[data-reveal].is-visible:hover { transform: translateY(-6px); }
.card, .tile, .officer-card, .leader-card, .term-card, .office-card, .news-card { transition-timing-function: var(--ease-out); transition-duration: .6s; }
.card .media img, .tile__image-wrapper img { transition-duration: 1.2s; }
.btn { transition-duration: .4s; transition-timing-function: var(--ease-out); }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  .js img.img-fade:not(.is-loaded) { opacity: 1; }
}