/* Stable page-to-page motion and a first-frame result loading shell. */
@view-transition {
  navigation: auto;
}

.top-island,
.seo-page-header {
  view-transition-name: site-header;
}

.site-footer,
.seo-page-footer {
  view-transition-name: site-footer;
}

::view-transition-old(root) {
  opacity: 0;
  animation: none;
}

::view-transition-new(root) {
  animation: shell-fade-in 110ms ease-out both;
}

::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-old(site-footer),
::view-transition-new(site-footer) {
  animation-duration: 170ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes shell-fade-in {
  from { opacity: 0.94; }
}

body[data-page="result"] .result-panel.is-visible {
  animation: none;
}

html.app-shell-loading body[data-page="result"] .result-panel {
  display: block;
}

body[data-page="result"] .loading-title,
body[data-page="result"] .loading-sentence,
body[data-page="result"] .loading-progress-top {
  opacity: 1;
  transition: opacity 120ms ease-out;
}

html.app-shell-loading body[data-page="result"] .loading-title,
html.app-shell-loading body[data-page="result"] .loading-sentence,
html.app-shell-loading body[data-page="result"] .loading-progress-top {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(site-header),
  ::view-transition-new(site-header),
  ::view-transition-old(site-footer),
  ::view-transition-new(site-footer) {
    animation: none;
  }
}