.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  cursor: pointer;
}

.theme-toggle [data-theme-icon] {
  font-size: 1.15em;
  line-height: 1;
}

.site-transition {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  color: #ede4cd;
  background: #11100e;
  clip-path: inset(49.7% 0);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.site-transition::before,
.site-transition::after {
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(237, 228, 205, .45);
  content: "";
}

.site-transition::before { top: calc(50% - 4px); }
.site-transition::after { top: calc(50% + 4px); }

.site-transition__card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .32rem;
  padding: .7rem 1.2rem;
  background: #11100e;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(.45rem);
}

.site-transition__card strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 4vw, 3.2rem);
  letter-spacing: -.04em;
  line-height: .9;
}

.site-transition__card span {
  color: #b9af99;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(.55rem, 1vw, .75rem);
  font-weight: 800;
  letter-spacing: .14em;
}

html.is-leaving .site-transition {
  visibility: visible;
  opacity: 1;
  clip-path: inset(0);
  transition: clip-path 380ms cubic-bezier(.7, 0, .2, 1), opacity 80ms linear;
}

html.is-leaving .site-transition__card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 160ms ease 170ms, transform 180ms ease 170ms;
}

html.is-entering .site-transition {
  visibility: visible;
  animation: site-transition-reveal 560ms cubic-bezier(.7, 0, .2, 1) both;
}

html.is-entering .site-transition__card {
  animation: site-transition-card-reveal 400ms ease both;
}

@keyframes site-transition-reveal {
  0%, 42% { clip-path: inset(0); opacity: 1; }
  99% { visibility: visible; }
  100% { clip-path: inset(49.7% 0); visibility: hidden; opacity: 0; }
}

@keyframes site-transition-card-reveal {
  0%, 32% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-.45rem); }
}

@media (prefers-reduced-motion: reduce) {
  .site-transition { display: none; }
}