:root {
  --site-transition-dark: #0a0a0a;
  --site-transition-accent: #5a45fe;
  --site-transition-z-dark: 40000;
  --site-transition-z-text: 40001;
  --site-transition-z-accent: 40002;
  --site-transition-z-heading: 40003;
}

.site-route-shell {
  position: fixed;
  inset: 0;
  z-index: 50000;
  pointer-events: none;
  visibility: hidden;
}

.site-route-shell__dark,
.site-route-shell__accent {
  position: absolute;
  inset: 0;
  transform: translate3d(0, 101%, 0);
  backface-visibility: hidden;
}

.site-route-shell__dark {
  z-index: 0;
  background: var(--site-transition-dark);
}

.site-route-shell__accent {
  z-index: 1;
  background: var(--site-transition-accent);
}

.site-route-shell__title {
  position: absolute;
  top: 3rem;
  left: 3rem;
  z-index: 2;
  color: #f0f0f0;
  font-family: 'Breton', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
  will-change: transform;
}

html.site-router-active .site-route-shell {
  visibility: visible;
}

html.site-router-active .site-route-shell__dark,
html.site-router-active .site-route-shell__accent {
  will-change: transform;
}

@media (max-width: 768px) {
  .site-route-shell__title {
    top: 1.5rem;
    left: 1.5rem;
    font-size: clamp(1.8rem, 7vw, 3rem);
  }
}

.page-transition-dark,
.route-transition-dark {
  z-index: var(--site-transition-z-dark) !important;
}

.work-flying-text {
  z-index: var(--site-transition-z-text) !important;
}

.work-flying-text.is-above-transition,
html.site-transition-pending .works-page .page-title,
html.site-transition-active .works-page .page-title {
  z-index: var(--site-transition-z-heading) !important;
}

.page-transition-accent,
.route-transition-accent {
  z-index: var(--site-transition-z-accent) !important;
}

.page-transition-dark,
.page-transition-accent,
.route-transition-dark,
.route-transition-accent,
.work-flying-text {
  backface-visibility: hidden;
}

html.site-transition-active .page-transition-dark,
html.site-transition-active .page-transition-accent,
html.site-transition-active .route-transition-dark,
html.site-transition-active .route-transition-accent {
  will-change: transform;
}