/* Native page changes: fade out, then fade in, with the navigation held steady.
   Unsupported browsers keep their normal navigation; no click is delayed. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  .site-header { view-transition-name: ss-site-header; }
  .ss-page-loader { view-transition-name: ss-loading-feedback; }

  ::view-transition {
    pointer-events: none;
    background: #faf9f6;
  }
  /* Opacity only: no geometry interpolation or overlapping page text. */
  ::view-transition-group(root) { animation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { mix-blend-mode: normal; }
  ::view-transition-old(root) {
    animation: ss-page-fade-out 130ms ease-in both;
  }
  ::view-transition-new(root) {
    animation: ss-page-fade-in 180ms 130ms ease-out both;
  }

  /* Use the incoming menu immediately, without a duplicate or geometry morph. */
  ::view-transition-group(ss-site-header) { animation: none; }
  ::view-transition-old(ss-site-header) { display: none; }
  ::view-transition-new(ss-site-header) { animation: none; }

  /* A real loading line must not become a frozen part of either snapshot. */
  ::view-transition-group(ss-loading-feedback) { display: none; }
}
@keyframes ss-page-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ss-page-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Entry branding once per tab session; later navigation uses a discreet line. */
.ss-page-loader {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 190;
  place-items: center;
  pointer-events: none;
  color: #142341;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease-out, visibility 0s linear 250ms;
}
html.ss-page-loading .ss-page-loader {
  opacity: 1;
  visibility: visible;
  transition: none;
}
.ss-page-loader-content {
  display: none;
  justify-items: center;
  gap: 0;
  max-width: calc(100vw - 48px);
  padding: 24px;
  text-align: center;
}
html[data-page-loader-mode="entry"] .ss-page-loader {
  background: radial-gradient(circle at 50% 42%, rgb(40 88 221 / 6%), transparent 46%), #f4f5f7;
}
html[data-page-loader-mode="entry"] .ss-page-loader-content { display: grid; }
/* Form feedback stays inside its submit button. */
body :is(.contact-form button, #audit-kit-submit)[aria-busy="true"]::before {
  content: "";
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -3px;
  animation: ss-entry-orbit 0.8s linear infinite;
}
.ss-page-loader-symbol {
  position: relative;
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  margin-bottom: 28px;
  border: 1px solid #dce3ef;
  border-radius: 50%;
}
.ss-page-loader-symbol::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 2px solid transparent;
  border-top-color: #2858dd;
  border-radius: inherit;
  animation: ss-entry-orbit 1.6s linear infinite;
}
.ss-page-loader-symbol img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
  transform-origin: center;
  animation: ss-entry-bounce 1.45s ease-in-out infinite;
}
.ss-page-loader-wordmark {
  font: 500 14px/1.5 Inter, Arial, sans-serif;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.ss-page-loader-wordmark strong { font-weight: 750; }
html body .ss-page-loader .ss-page-loader-content p {
  margin: 8px 0 0;
  font: 400 13px/1.5 Inter, Arial, sans-serif;
  letter-spacing: 0;
  color: #596984;
}
.ss-page-loader-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  overflow: hidden;
  background: rgb(40 88 221 / 10%);
}
.ss-page-loader-line::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 28%;
  background: #2858dd;
  animation: ss-entry-line 1.4s ease-in-out infinite;
}
/* Never preserve a partly visible loader in a restored document. */
html[data-page-loader="leaving"] .ss-page-loader,
html[data-page-loader="restored"] .ss-page-loader,
html[data-page-loader="unavailable"] .ss-page-loader { transition: none; }
@keyframes ss-entry-orbit { to { transform: rotate(360deg); } }
@keyframes ss-entry-bounce {
  0%, 100% { transform: translateY(1px) scale(0.94); }
  50% { transform: translateY(-2px) scale(1.06); }
}
@keyframes ss-entry-line {
  from { transform: translateX(-100%); }
  to { transform: translateX(360%); }
}
@media (max-width: 600px) {
  .ss-page-loader-symbol { width: 128px; height: 128px; margin-bottom: 24px; }
  .ss-page-loader-symbol img { width: 84px; height: 84px; }
}
@media (max-height: 400px) {
  .ss-page-loader-symbol { width: 104px; height: 104px; margin-bottom: 16px; }
  .ss-page-loader-symbol img { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-page-loader { transition: none !important; }
  .ss-page-loader-symbol::before,
  .ss-page-loader-symbol img,
  .ss-page-loader-line::after,
  body :is(.contact-form button, #audit-kit-submit)[aria-busy="true"]::before {
    animation: none !important;
    transform: none !important;
  }
}