/* Keep the classic scrollbar gutter reserved while the transition locks scrolling.
   This prevents centered content from shifting when overflow changes to hidden. */
html {
  scrollbar-gutter: stable;
}

html.site-transition-leaving,
html.site-transition-loading,
html.site-transition-arriving {
  overflow: hidden;
}

html.site-transition-leaving::before,
html.site-transition-loading::before,
html.site-transition-arriving::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: #f7f3eb;
  background-image:
    linear-gradient(180deg, rgba(185, 219, 229, .22), rgba(247, 243, 235, .96)),
    url("home/shore-watercolor-texture.svg");
  pointer-events: auto;
}

html.site-transition-loading::before {
  cursor: progress;
  animation: siteTransitionWait 1.8s ease-in-out infinite alternate;
}

html.site-transition-leaving::before {
  animation: siteTransitionLeave 320ms cubic-bezier(.22, 1, .36, 1) both;
}

html.site-transition-arriving::before {
  animation: siteTransitionArrive 360ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes siteTransitionLeave {
  from { opacity: 0; transform: translateY(12%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes siteTransitionWait {
  from { filter: saturate(.88); background-position: center, center 48%; }
  to { filter: saturate(1.04); background-position: center, center 52%; }
}

@keyframes siteTransitionArrive {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-2%); visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  html.site-transition-leaving::before,
  html.site-transition-loading::before,
  html.site-transition-arriving::before {
    animation-duration: .001ms !important;
  }
}