.sy-page-transition-layer {
  display: none;
}

:root {
  --sy-page-transition-surface: #ffffff;
  --sy-page-transition-logo-color: #2f6a50;
  --sy-page-transition-logo-width: clamp(5.2rem, 10vw, 8.4rem);
  --sy-page-transition-logo-image-max-width: min(16.5rem, 31vw);
  --sy-page-transition-out-total: 460ms;
  --sy-page-transition-out-surface-duration: 460ms;
  --sy-page-transition-out-surface-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sy-page-transition-out-logo-duration: 320ms;
  --sy-page-transition-out-logo-delay: 55ms;
  --sy-page-transition-out-logo-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sy-page-transition-out-content-duration: 220ms;
  --sy-page-transition-out-content-ease: cubic-bezier(0.4, 0, 1, 1);
  --sy-page-transition-in-surface-duration: 420ms;
  --sy-page-transition-in-surface-delay: 150ms;
  --sy-page-transition-in-surface-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sy-page-transition-in-logo-duration: 260ms;
  --sy-page-transition-in-logo-delay: 40ms;
  --sy-page-transition-in-logo-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sy-page-transition-in-content-duration: 260ms;
  --sy-page-transition-in-content-delay: 180ms;
  --sy-page-transition-in-content-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

html.sy-page-transitions-fallback body {
  background: var(--sy-page-transition-surface);
}

html.sy-page-transitions-fallback .sy-page-transition-layer {
  position: fixed;
  inset: 0;
  z-index: 2147483640;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2.4rem, 6vw, 6rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: var(--sy-page-transition-surface);
  transition-property: opacity, visibility;
  transition-duration: var(--sy-page-transition-in-surface-duration), 0s;
  transition-delay: var(--sy-page-transition-in-surface-delay), calc(var(--sy-page-transition-in-surface-delay) + var(--sy-page-transition-in-surface-duration));
  transition-timing-function: var(--sy-page-transition-in-surface-ease), linear;
}

html.sy-page-transitions-fallback .sy-page-transition-layer__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, var(--sy-page-transition-logo-image-max-width));
  color: var(--sy-page-transition-logo-color);
  opacity: 0;
  transform: translateY(-0.8rem) scale(0.94);
  transform-origin: center center;
  transition-property: opacity, transform;
  transition-duration: var(--sy-page-transition-in-logo-duration);
  transition-delay: var(--sy-page-transition-in-logo-delay);
  transition-timing-function: var(--sy-page-transition-in-logo-ease);
}

html.sy-page-transitions-fallback .sy-page-transition-layer__logo-image,
html.sy-page-transitions-fallback .sy-page-transition-layer__logo-symbol,
html.sy-page-transitions-fallback .sy-page-transition-layer__logo-text {
  display: block;
}

html.sy-page-transitions-fallback .sy-page-transition-layer__logo-image {
  width: auto;
  max-width: 100%;
  max-height: clamp(3.4rem, 6.4vw, 5.2rem);
  height: auto;
}

html.sy-page-transitions-fallback .sy-page-transition-layer__logo-symbol {
  width: var(--sy-page-transition-logo-width);
}

html.sy-page-transitions-fallback .sy-page-transition-layer__logo-symbol svg {
  display: block;
  width: 100%;
  height: auto;
  fill: currentColor;
}

html.sy-page-transitions-fallback .sy-page-transition-layer__logo-text {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html.sy-page-transitions-fallback body > :not(script):not(style):not(#wpadminbar):not(.sy-page-transition-layer) {
  opacity: 1;
  transition-property: opacity;
  transition-duration: var(--sy-page-transition-in-content-duration);
  transition-delay: var(--sy-page-transition-in-content-delay);
  transition-timing-function: var(--sy-page-transition-in-content-ease);
}

html.sy-page-transitions-fallback:not(.is-page-ready) .sy-page-transition-layer,
html.sy-page-transitions-fallback.sy-top-animations-pending .sy-page-transition-layer {
  opacity: 1;
  visibility: visible;
  transition-delay: 0ms, 0ms;
}

html.sy-page-transitions-fallback:not(.is-page-ready) .sy-page-transition-layer__logo,
html.sy-page-transitions-fallback.sy-top-animations-pending .sy-page-transition-layer__logo {
  opacity: 1;
  transform: translateY(0) scale(1);
}

html.sy-page-transitions-fallback:not(.is-page-ready) body > :not(script):not(style):not(#wpadminbar):not(.sy-page-transition-layer),
html.sy-page-transitions-fallback.sy-top-animations-pending body > :not(script):not(style):not(#wpadminbar):not(.sy-page-transition-layer) {
  opacity: 0;
}

html.sy-page-transitions-fallback.is-page-transitioning .sy-page-transition-layer {
  opacity: 1;
  visibility: visible;
  transition-duration: var(--sy-page-transition-out-surface-duration), 0s;
  transition-delay: 0ms, 0ms;
  transition-timing-function: var(--sy-page-transition-out-surface-ease), linear;
}

html.sy-page-transitions-fallback.is-page-transitioning .sy-page-transition-layer__logo {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-duration: var(--sy-page-transition-out-logo-duration);
  transition-delay: var(--sy-page-transition-out-logo-delay);
  transition-timing-function: var(--sy-page-transition-out-logo-ease);
}

html.sy-page-transitions-fallback.is-page-transitioning body > :not(script):not(style):not(#wpadminbar):not(.sy-page-transition-layer) {
  opacity: 0;
  pointer-events: none;
  transition-duration: var(--sy-page-transition-out-content-duration);
  transition-delay: 0ms;
  transition-timing-function: var(--sy-page-transition-out-content-ease);
}

@media (prefers-reduced-motion: reduce) {
  html.sy-page-transitions-js .sy-page-transition-layer,
  html.sy-page-transitions-js .sy-page-transition-layer__logo,
  html.sy-page-transitions-js body > :not(script):not(style):not(#wpadminbar):not(.sy-page-transition-layer) {
    animation: none !important;
    transition: none !important;
  }

  html.sy-page-transitions-fallback .sy-page-transition-layer {
    display: none !important;
  }

  html.sy-page-transitions-fallback:not(.is-page-ready) body > :not(script):not(style):not(#wpadminbar):not(.sy-page-transition-layer),
  html.sy-page-transitions-fallback.sy-top-animations-pending body > :not(script):not(style):not(#wpadminbar):not(.sy-page-transition-layer),
  html.sy-page-transitions-fallback.is-page-transitioning body > :not(script):not(style):not(#wpadminbar):not(.sy-page-transition-layer) {
    opacity: 1;
  }
}