[data-anim],
[data-anim-group] {
  opacity: var(--anim-from-opacity, 0);
  transform: translateY(24px);
  transition:
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}

[data-anim="fade"] {
  transform: none;
}

[data-anim="draw-x"] {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
}

[data-anim].is-inview,
[data-anim-group].is-inview {
  opacity: var(--anim-to-opacity, 1);
  transform: translateY(0);
}

[data-anim="fade"].is-inview {
  transform: none;
}

[data-anim="draw-x"].is-inview {
  transform: scaleX(1);
}

[data-anim-group] [data-anim],
[data-anim-group] [data-anim].is-inview {
  opacity: var(--anim-to-opacity, 1);
  transform: none;
  transition: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-anim],
  [data-anim-group] {
    opacity: var(--anim-to-opacity, 1) !important;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
}

.p-page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--color-bg-base);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.46s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.46s cubic-bezier(0.16, 1, 0.3, 1);
}

html.is-page-entering body > :not(.p-page-transition) {
  opacity: 0 !important;
}

html.is-page-entering body > :not(.p-page-transition),
html.is-page-revealing body > :not(.p-page-transition) {
  transition: opacity 1.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.p-page-transition.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.p-page-transition__logo {
  display: grid;
  place-items: center;
  width: clamp(72px, 10vw, 128px);
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition:
    opacity 0.62s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
}

.p-page-transition.is-opening .p-page-transition__logo {
  width: clamp(84px, 11vw, 144px);
  transform: translateY(12px) scale(0.94);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.p-page-transition__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.p-page-transition.is-logo.is-active .p-page-transition__logo {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.12s;
}

.p-page-transition.is-opening.is-active .p-page-transition__logo {
  transition-delay: 0.18s;
}

.p-page-transition.is-fade .p-page-transition__logo {
  display: none;
}

.is-page-transitioning {
  cursor: wait;
}

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