:root {
  --page-transition-duration: 0.98s;
  --page-transition-duration-mobile: 0.84s;
  --page-transition-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-transition-chrome-delay: 0.08s;
  --page-transition-home-settle-delay: 500ms;
  --page-transition-leave-delay: 1180ms;
  --page-transition-leave-delay-mobile: 1120ms;
  --page-transition-overlay-duration: 0.62s;
  --page-transition-overlay-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html.has-pending-page-transition,
html.is-leaving-page-transition {
  overflow: hidden;
}

html.has-pending-page-transition body,
html.is-leaving-page-transition body {
  overflow: hidden;
}

html.has-pending-page-transition body::before,
html.is-leaving-page-transition body::before {
  position: fixed;
  pointer-events: none;
}

html.has-pending-page-transition body::before,
html.is-leaving-page-transition body::before {
  content: "";
  inset: 0;
  z-index: 420;
  background: var(--site-bg, #f0f0f0);
}

html.is-leaving-page-transition body::before {
  animation: page-transition-overlay-in 0.18s ease both;
}

html.has-pending-page-transition body::before {
  animation: page-transition-overlay-out var(--page-transition-overlay-duration) var(--page-transition-overlay-ease) both;
}

.page-transition-logo {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 421;
  width: clamp(1.375rem, 2.15vw, 2.3rem);
  aspect-ratio: 499.25 / 1000.32;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-50%, -50%, 0) scale(0.96);
  will-change: opacity, transform, filter;
}

.page-transition-logo__layer {
  position: absolute;
  inset: 0;
  display: block;
}

.page-transition-logo__layer--base {
  color: #c1c1c1;
}

.page-transition-logo__layer--ink {
  color: #1b1b1b;
  opacity: 0;
}

.page-transition-logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

html.has-pending-page-transition .page-transition-logo,
html.is-leaving-page-transition .page-transition-logo {
  visibility: visible;
}

html.is-leaving-page-transition .page-transition-logo {
  animation: page-transition-logo-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.has-pending-page-transition .page-transition-logo {
  animation: page-transition-logo-out var(--page-transition-overlay-duration) var(--page-transition-overlay-ease) both;
}

html.has-pending-page-transition body[data-page="home"] .page-transition-logo {
  animation-name: page-transition-logo-out-home;
}

html.has-pending-page-transition .page-transition-logo__layer--ink {
  animation: page-transition-logo-ink-in calc(var(--page-transition-duration) + 0.14s) cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.has-pending-page-transition [data-transition-container] {
  will-change: transform, opacity, filter, clip-path;
  transform-origin: center top;
  animation: page-enter-reveal var(--page-transition-duration) var(--page-transition-ease) both;
}

html.has-pending-page-transition body[data-page="portfolio"] [data-transition-container] {
  animation-name: page-enter-reveal-portfolio;
}

html.has-pending-page-transition body[data-page="home"] [data-transition-container] {
  will-change: auto;
  transform-origin: initial;
  animation: none;
  clip-path: none;
  opacity: 1;
  filter: none;
  transform: none;
}

html.has-pending-page-transition body[data-page="home"] .home-logo {
  opacity: 0;
  will-change: transform, opacity, filter;
  animation: home-logo-enter 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.2s + var(--page-transition-home-settle-delay));
}

html.has-pending-page-transition body[data-page="home"] .home-carousel {
  opacity: 1;
  will-change: auto;
  animation: none;
}

body[data-page="home"] .home-carousel.home-carousel--progressive {
  pointer-events: none;
}

body[data-page="home"] .home-carousel.home-carousel--progressive .carousel-item {
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 20px, 0) scale(0.985);
  transition: none;
}

body[data-page="home"] .home-carousel.home-carousel--progressive .carousel-item.is-home-reveal-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 0.42s ease,
    filter 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.72s cubic-bezier(0.19, 1, 0.22, 1);
}

html.has-pending-page-transition body > nav,
html.has-pending-page-transition body > .shared-contact,
html.has-pending-page-transition body > [data-shared-footer],
html.has-pending-page-transition body > [data-page-extras] {
  opacity: 1;
  transform: none;
  animation: none;
}

html.is-leaving-page-transition [data-transition-container] {
  will-change: transform, opacity, filter;
  opacity: 0.42;
  filter: blur(2px);
  transform: translate3d(0, -1.25vh, 0) scale(0.992);
  transition:
    opacity 0.18s ease,
    filter 0.18s ease,
    transform 0.18s ease;
}

html.is-leaving-page-transition body > nav,
html.is-leaving-page-transition body > .shared-contact,
html.is-leaving-page-transition body > [data-shared-footer],
html.is-leaving-page-transition body > [data-page-extras] {
  opacity: 1;
  transform: none;
  transition: none;
}

html.has-pending-page-transition body > nav,
html.is-leaving-page-transition body > nav {
  position: fixed;
  z-index: 220;
}

html.has-pending-page-transition body > .header-progressive-blur,
html.is-leaving-page-transition body > .header-progressive-blur {
  position: fixed;
  z-index: 219;
  opacity: 1;
}

html.has-pending-page-transition body > .shared-contact,
html.is-leaving-page-transition body > .shared-contact,
html.has-pending-page-transition body > [data-shared-footer],
html.is-leaving-page-transition body > [data-shared-footer] {
  position: fixed;
  z-index: 210;
}

@keyframes page-enter-reveal {
  0% {
    clip-path: inset(100% 0% 0% 0%);
    opacity: 0.02;
    filter: blur(14px);
    transform: translate3d(0, 4vh, 0) scale(0.985);
  }

  55% {
    opacity: 0.88;
    filter: blur(3.5px);
  }

  100% {
    clip-path: inset(0% 0% 0% 0%);
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

@keyframes page-transition-overlay-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes page-transition-logo-in {
  0% {
    opacity: 0;
    filter: blur(6px);
    transform: translate3d(-50%, calc(-50% + 5px), 0) scale(0.92);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}

@keyframes page-transition-overlay-out {
  0%,
  38% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes page-transition-logo-out {
  0%,
  32% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(-50%, calc(-50% - 8px), 0) scale(0.9);
  }
}

@keyframes page-transition-logo-out-home {
  0%,
  68% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(-50%, calc(-50% - 8px), 0) scale(0.9);
  }
}

@keyframes page-transition-logo-ink-in {
  0% {
    opacity: 0;
  }

  24% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes page-enter-reveal-portfolio {
  0% {
    clip-path: inset(0% 0% 0% 0%);
    opacity: 0.02;
    filter: blur(14px);
    transform: translate3d(0, 4vh, 0) scale(0.985);
  }

  55% {
    opacity: 0.88;
    filter: blur(3.5px);
  }

  100% {
    clip-path: inset(0% 0% 0% 0%);
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

@keyframes home-logo-enter {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(
      var(--home-logo-base-x, 0px),
      calc(var(--home-logo-base-y, 0px) + 22px),
      0
    );
  }

  65% {
    opacity: 0.82;
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(
      var(--home-logo-base-x, 0px),
      var(--home-logo-base-y, 0px),
      0
    );
  }
}

@media (max-width: 900px) {
  :root {
    --page-transition-duration: 0.56s;
    --page-transition-chrome-delay: 0.05s;
    --page-transition-overlay-duration: 0.48s;
  }

  html.has-pending-page-transition [data-transition-container] {
    will-change: transform, opacity;
    animation-name: page-enter-reveal-mobile;
  }

  html.has-pending-page-transition body[data-page="home"] .home-logo {
    will-change: transform, opacity;
    animation-name: home-logo-enter-mobile;
  }

  html.has-pending-page-transition body[data-page="home"] .home-carousel {
    will-change: auto;
    animation: none;
  }

  html.is-leaving-page-transition [data-transition-container] {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  @keyframes page-enter-reveal-mobile {
    0% {
      opacity: 0.08;
      transform: translate3d(0, 18px, 0) scale(0.992);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes home-logo-enter-mobile {
    0% {
      opacity: 0;
      transform: translate3d(
        var(--home-logo-base-x, 0px),
        calc(var(--home-logo-base-y, 0px) + 14px),
        0
      );
    }

    100% {
      opacity: 1;
      transform: translate3d(
        var(--home-logo-base-x, 0px),
        var(--home-logo-base-y, 0px),
        0
      );
    }
  }

  html.has-pending-page-transition body[data-page="home"] .home-logo {
    animation-duration: 0.26s;
    animation-delay: calc(0.1s + var(--page-transition-home-settle-delay));
  }
}