/* Animated way in and out of the full-screen search (search.css, assets/inc/search-page.php).
   Loaded on every public page by page-head.php (not by the admin or the maintenance/503/newsletter pages).

   Browsers that animate between pages (Chrome, Edge, Safari 18.2+): every public page opts in below, and app.js
   cancels every page change that doesn't go to or come from search, so normal navigation stays instant.
   - Going in:  the page blurs and fades away, the magnifying glass grows into the search bar, the rest fades in.
   - Going out: the search slides up and fades, the bar shrinks back into the magnifying glass, the page fades in.
   Other browsers get a short fade instead (app.js: tjLeave, and the entrance fade in search.css).
   Reduced motion: nothing moves. */

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

/* The magnifying glass and the search bar are "the same thing" on both pages, so the browser morphs one into the other */
.search-btn { view-transition-name: search-field; }

/* While it morphs: a frosted pill that grows (or shrinks), the icon fading out early and the bar fading in late */
::view-transition-group(search-field) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
::view-transition-image-pair(search-field) {
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  box-shadow: 0 0 0 1px var(--line), 0 12px 32px -18px rgba(20, 33, 61, 0.45);
  animation: vt-pill-out 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;   /* going out: the pill melts into the plain icon */
}
::view-transition-old(search-field),
::view-transition-new(search-field) {
  inset: 0; width: 100%; height: 100%; object-fit: contain;
  mix-blend-mode: normal;
}
::view-transition-old(search-field) { animation: vt-fade-out 140ms ease-out both; }
::view-transition-new(search-field) { animation: vt-fade-in 200ms ease-in 220ms both; }

/* The page around it */
::view-transition-old(root) { animation: vt-page-out 280ms cubic-bezier(0.4, 0, 0.2, 1) both; }
::view-transition-new(root) { animation: vt-page-in 340ms cubic-bezier(0.2, 0.8, 0.2, 1) 80ms both; }
/* The search screen (results, status), named in search.css */
::view-transition-new(search-screen) { animation: vt-screen-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) 120ms both; }
::view-transition-old(search-screen) { animation: vt-screen-out 220ms cubic-bezier(0.4, 0, 1, 1) both; }

@keyframes vt-fade-in    { from { opacity: 0; } }
@keyframes vt-fade-out   { to   { opacity: 0; } }
@keyframes vt-pill-out   { 70% { opacity: 1; } to { opacity: 0; } }
@keyframes vt-page-out   { to   { opacity: 0; transform: scale(0.97); filter: blur(6px); } }
@keyframes vt-page-in    { from { opacity: 0; transform: scale(1.015); } }
@keyframes vt-screen-in  { from { opacity: 0; transform: translateY(14px); } }
@keyframes vt-screen-out { to   { opacity: 0; transform: translateY(-10px); } }

/* Browsers without page transitions: app.js fades the page out before leaving (to or from search) */
html.tj-leaving body { opacity: 0; transition: opacity 0.16s ease-in; }
@media (prefers-reduced-motion: reduce) { html.tj-leaving body { transition: none; } }