/* Native, same-origin document transitions. Links, GET forms and browser history
   keep their normal behavior; unsupported browsers simply navigate as usual. */
@view-transition { navigation:auto; }
/* Search arrivals use a native fragment, resolved before the transition snapshot. */
html:has(.explore-page) { scroll-padding-top:24px; scroll-behavior:auto; }

@media (prefers-reduced-motion:no-preference) {
  /* The shared header is a stationary layer, outside the moving page snapshot.
     Use the incoming header immediately so active links and account state are current. */
  :is(.awning-home,.explore-page) .site-header {
    view-transition-name:site-header;
    background:var(--paper);
  }
  ::view-transition-group(site-header) { animation:none; z-index:3; }
  ::view-transition-image-pair(site-header) { isolation:isolate; }
  ::view-transition-old(site-header) { display:none; }
  ::view-transition-new(site-header) { animation:none; mix-blend-mode:normal; }

  :is(.awning-home,.explore-page) .explore-search-panel {
    view-transition-name:place-finder;
  }
  /* Preserve the search as one visual object while the surrounding page changes. */
  ::view-transition-group(place-finder) {
    animation-duration:620ms;
    animation-timing-function:cubic-bezier(.22,1,.36,1);
    z-index:2;
  }
  ::view-transition-image-pair(place-finder) {
    isolation:isolate;
    border-radius:24px;
    overflow:clip;
  }
  ::view-transition-old(place-finder),
  ::view-transition-new(place-finder) {
    height:100%;
    object-fit:fill;
    mix-blend-mode:normal;
  }
  ::view-transition-old(place-finder) { animation:none; }
  ::view-transition-new(place-finder) { animation:finder-in 620ms cubic-bezier(.22,1,.36,1) both; }
  ::view-transition-old(root) { animation:journey-out 160ms ease-out both; }
  ::view-transition-new(root) { animation:journey-in 620ms cubic-bezier(.22,1,.36,1) both; }
  /* Animate incoming snapshots together, not a second entrance after navigation. */
  .explore-page .explore-collage { view-transition-name:explore-collage; }
  .explore-page .catalog-results { view-transition-name:explore-results; }
  ::view-transition-group(explore-collage),
  ::view-transition-group(explore-results) {
    animation-duration:620ms;
    animation-timing-function:cubic-bezier(.22,1,.36,1);
  }
  ::view-transition-new(explore-collage) {
    animation:collage-arrival 620ms cubic-bezier(.22,1,.36,1) both;
  }
  ::view-transition-new(explore-results) {
    animation:results-arrival 620ms cubic-bezier(.22,1,.36,1) both;
  }
  ::view-transition-old(explore-collage),
  ::view-transition-old(explore-results) { animation:journey-out 160ms ease-out both; }
  /* Keep suppression after the transition, so entrance animations do not restart. */
  html[data-journey-arrival] .explore-page :is(.business-card,.explore-print) {
    animation:none;
  }
}
@keyframes finder-in { from { opacity:0; } to { opacity:1; } }
@keyframes journey-out { to { opacity:0; transform:translateY(-8px); } }
@keyframes journey-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) {
  @view-transition { navigation:none; }
}

@keyframes collage-arrival {
  from { opacity:0; transform:translateY(22px) rotate(-3deg) scale(.96); }
  to { opacity:1; transform:translateY(0) rotate(0) scale(1); }
}
@keyframes results-arrival {
  from { opacity:0; transform:translateY(38px); }
  to { opacity:1; transform:translateY(0); }
}