/* Shared motion layer; include after the page styles. */
:root {
  --motion-ease: cubic-bezier(.2, .7, .2, 1);
  --motion-quick: 180ms;
  --motion-page: 320ms;
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  /* The header remains an anchor while the document changes beneath it. */
  body > header { view-transition-name: site-header; }
  ::view-transition-group(root),
  ::view-transition-group(site-header) {
    animation-duration: var(--motion-page);
    animation-timing-function: var(--motion-ease);
  }
  ::view-transition-old(root) {
    animation: motion-page-out 160ms ease-out both;
  }
  ::view-transition-new(root) {
    animation: motion-page-in var(--motion-page) var(--motion-ease) both;
  }
  ::view-transition-old(site-header),
  ::view-transition-new(site-header) {
    animation: none;
    mix-blend-mode: normal;
  }
  html.motion-fallback main {
    animation: motion-page-in var(--motion-page) var(--motion-ease);
  }

  /* Display/hidden remains controlled by the existing accessible tab logic. */
  html.site-motion [data-tabs-ready="true"] [data-panel]:not([hidden]),
  html.site-motion .archive-panel:not([hidden]) {
    animation: motion-panel-in var(--motion-page) var(--motion-ease);
  }
  html.site-motion :is(.gov-registry-card, .complete-record) { animation: none; }

  :is(a, button, summary, input, select, textarea) {
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: var(--motion-quick);
    transition-timing-function: ease-out;
  }
  :is(.cta, .button, .gov-entry, .case-tile, .person-row, .contract-card) {
    transition-property: color, background-color, border-color, box-shadow, translate;
    transition-duration: 220ms;
    transition-timing-function: var(--motion-ease);
  }
  .cta img { transition: translate 220ms var(--motion-ease); }
  :is(.cta, .button, button):active:not(:disabled) { translate: 0 1px; }

  @media (hover: hover) and (pointer: fine) {
    :is(.cta, .button, .gov-entry):hover { translate: 0 -2px; }
    .cta:hover img { translate: 4px 0; }
    :is(.case-tile, .person-row, .contract-card):hover {
      border-color: var(--fg, #eee8d6);
      background-color: #ffffff06;
    }
  }
}

@keyframes motion-page-out { to { opacity: 0; } }
@keyframes motion-page-in {
  from { opacity: .3; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes motion-panel-in {
  from { opacity: .35; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Never rely on an entrance animation to make content readable. */
.motion-ready .reveal,
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }

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

@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}