.pageTransition {
  --transition-accent: #5debe5;
  position: fixed;
  inset: 0;
  z-index: 5000;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.pageTransition.is-entering,
.pageTransition.is-covered,
.pageTransition.is-revealing {
  visibility: visible;
}

.pageTransitionLayer {
  position: absolute;
  inset: 0;
  transform: translate3d(105%, 0, 0);
  will-change: transform;
}

.pageTransitionLayerOne {
  background: color-mix(in srgb, var(--transition-accent) 72%, #071012);
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pageTransitionLayerTwo {
  background: color-mix(in srgb, var(--transition-accent) 34%, #071012);
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1) 70ms;
}

.pageTransitionLayerThree {
  background:
    radial-gradient(circle at 72% 34%, color-mix(in srgb, var(--transition-accent) 20%, transparent), transparent 34rem),
    #020405;
  transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1) 140ms;
}

.pageTransitionContent {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 6vw, 110px);
  color: #f4f7f6;
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  transition:
    opacity 420ms ease 300ms,
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1) 260ms;
}

.pageTransitionKicker,
.pageTransitionMeta {
  margin: 0;
  color: var(--transition-accent);
  font-size: clamp(11px, 0.8vw, 14px);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.pageTransitionTitleMask {
  max-width: min(1180px, 90vw);
  margin-top: clamp(16px, 2vw, 30px);
  overflow: hidden;
}

.pageTransitionTitle {
  display: block;
  font-family: "Bebas Neue", Impact, Haettenschweiler, "Arial Narrow", sans-serif;
  font-size: clamp(70px, 11vw, 190px);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: 0;
  text-transform: uppercase;
  transform: translate3d(0, 112%, 0) skewY(4deg) scaleX(0.76);
  transform-origin: left center;
  transition: transform 920ms cubic-bezier(0.16, 1, 0.3, 1) 310ms;
}

.pageTransitionMeta {
  margin-top: clamp(24px, 3vw, 42px);
  color: rgba(244, 247, 246, 0.48);
}

.pageTransitionRule {
  position: absolute;
  left: clamp(28px, 6vw, 110px);
  right: clamp(28px, 6vw, 110px);
  bottom: clamp(32px, 6vh, 72px);
  z-index: 3;
  height: 1px;
  background: var(--transition-accent);
  box-shadow: 0 0 26px color-mix(in srgb, var(--transition-accent) 40%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1) 320ms;
}

.pageTransition.is-entering .pageTransitionLayer,
.pageTransition.is-covered .pageTransitionLayer {
  transform: translate3d(0, 0, 0);
}

.pageTransition.is-entering .pageTransitionContent,
.pageTransition.is-covered .pageTransitionContent {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.pageTransition.is-entering .pageTransitionTitle,
.pageTransition.is-covered .pageTransitionTitle {
  transform: translate3d(0, 0, 0) skewY(0) scaleX(1);
}

.pageTransition.is-entering .pageTransitionRule,
.pageTransition.is-covered .pageTransitionRule {
  transform: scaleX(1);
}

.pageTransition.is-revealing .pageTransitionContent {
  opacity: 0;
  transform: translate3d(-32px, 0, 0);
  transition-delay: 0ms;
  transition-duration: 180ms;
}

.pageTransition.is-revealing .pageTransitionLayerOne,
.pageTransition.is-revealing .pageTransitionLayerTwo {
  opacity: 0;
  transition: none;
}

.pageTransition.is-revealing .pageTransitionLayerThree {
  transform: translate3d(-105%, 0, 0);
  transition: transform 480ms cubic-bezier(0.76, 0, 0.24, 1);
}

.pageTransition.is-revealing .pageTransitionRule {
  opacity: 0;
  transform: scaleX(1);
  transition: opacity 140ms ease;
}

html.page-transition-arriving::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4999;
  background: #020405;
}

@media (max-width: 760px) {
  .pageTransitionContent {
    padding: 28px;
  }

  .pageTransitionTitle {
    font-size: clamp(58px, 18vw, 104px);
  }

  .pageTransitionRule {
    left: 28px;
    right: 28px;
    bottom: 32px;
  }
}

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