/* SGI fast smooth first-paint system v2 */

html.sgi-booting {
  background: #f3f5f7;
}

html.sgi-booting body {
  min-height: 100vh;
  background: #f3f5f7;
  overflow: hidden;
}

html.sgi-booting .skip-link,
html.sgi-booting .site-header,
html.sgi-booting #app,
html.sgi-booting .site-footer {
  opacity: 0;
  visibility: hidden;
}

html.sgi-ready .skip-link,
html.sgi-ready .site-header,
html.sgi-ready #app,
html.sgi-ready .site-footer {
  visibility: visible;
}

html.sgi-ready .site-header {
  animation: sgi-shell-in 165ms cubic-bezier(.2,.7,.2,1) both;
}

html.sgi-ready #app {
  animation: sgi-shell-in 185ms 10ms cubic-bezier(.2,.7,.2,1) both;
}

html.sgi-ready .site-footer {
  animation: sgi-shell-in 185ms 20ms cubic-bezier(.2,.7,.2,1) both;
}

#app.sgi-page-enter {
  opacity: 0;
  transform: translateY(2px);
}

#app.sgi-page-enter.sgi-page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 160ms cubic-bezier(.2,.7,.2,1),
    transform 160ms cubic-bezier(.2,.7,.2,1);
}

/* Maintenance is rendered only after its live state has been resolved. */
.sgi-maint {
  animation: sgi-maint-in 180ms cubic-bezier(.2,.7,.2,1) both;
}

@keyframes sgi-shell-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sgi-maint-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.sgi-ready .site-header,
  html.sgi-ready #app,
  html.sgi-ready .site-footer,
  .sgi-maint {
    animation: none !important;
  }

  #app.sgi-page-enter,
  #app.sgi-page-enter.sgi-page-enter-active {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* Avoid doing unnecessary layout/paint work for large sections well below the viewport. */
@supports (content-visibility: auto) {
  .section,
  .related-content,
  .section-gap-36 {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
  }
}
