.showcase-transition {
  position: fixed;
  inset: 0;
  z-index: 100000;
  overflow: hidden;
  background: rgba(232, 230, 223, 0.76);
  color: #282724;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateZ(0);
  transition:
    opacity 680ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 680ms step-end;
  -webkit-backdrop-filter: blur(28px) saturate(0.82);
  backdrop-filter: blur(28px) saturate(0.82);
  contain: strict;
}

.showcase-transition::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 44%),
    rgba(222, 221, 215, 0.08);
  content: "";
  pointer-events: none;
}

.showcase-transition.is-complete {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.showcase-transition.is-leaving {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

html.route-entry-skip .showcase-transition {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

html.route-entry-skip .framer-1mlwztd-container {
  display: none !important;
}

.showcase-transition__label,
.showcase-transition__counter {
  position: absolute;
  z-index: 1;
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 9px;
  font-weight: 690;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}

.showcase-transition__label {
  top: clamp(20px, 3vw, 40px);
  left: clamp(20px, 3vw, 48px);
}

.showcase-transition__counter {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  display: grid !important;
  justify-items: center;
  gap: 12px !important;
  transform: translate(-50%, -50%);
}

.showcase-transition__counter span {
  opacity: 0.56;
}

.showcase-transition__counter strong {
  min-width: 3.2ch !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(42px, 6vw, 82px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.08em !important;
  line-height: 0.8 !important;
}

html.route-enhanced:not(.route-ready) :is(
    .case-nav,
    .gallery-nav,
    .concept-rail,
    .site-header,
    .concept-note
  ) {
  opacity: 0;
}

html.route-enhanced :is(.case-nav, .gallery-nav, .site-header) {
  transform: translateY(-10px);
  transition:
    opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.route-enhanced :is(.concept-rail, .concept-note) {
  transform: translateY(10px);
  transition:
    opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.route-enhanced.route-ready :is(
    .case-nav,
    .gallery-nav,
    .concept-rail,
    .site-header,
    .concept-note
  ) {
  opacity: 1;
  transform: translateY(0);
}

html.route-enhanced.route-leaving :is(
    .case-nav,
    .gallery-nav,
    .concept-rail,
    .site-header,
    .concept-note
  ) {
  opacity: 0;
  transition-duration: 180ms;
}

.route-letter {
  display: inline-block;
  height: 1.14em;
  overflow: hidden;
  vertical-align: top;
  white-space: pre;
}

.route-letter__track {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
}

.route-letter__track > span {
  display: block;
  height: 1.14em;
  line-height: 1.14em;
}

html.route-ready .route-letter__track {
  animation: route-letter-settle 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(70ms + (var(--route-letter-index, 0) * 10ms));
}

@keyframes route-letter-settle {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-66.666%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-transition {
    background: #e8e6df;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: none;
  }

  .showcase-transition__counter {
    transition: none !important;
  }

  html.route-enhanced :is(
      .case-nav,
      .gallery-nav,
      .concept-rail,
      .site-header,
      .concept-note
    ) {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .route-letter__track {
    animation: none !important;
    transform: translateY(-66.666%);
  }
}