@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both;
}

::view-transition-old(root) {
  animation-name: page-fade-out;
  z-index: 1;
}

::view-transition-new(root) {
  animation-name: page-fade-in;
  z-index: 2;
}

@keyframes page-fade-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    filter: blur(4px);
  }
}

@keyframes page-fade-in {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}


.rail--brand {
  view-transition-name: brand-rail;
}

::view-transition-old(brand-rail),
::view-transition-new(brand-rail) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-group(brand-rail) {
  animation-duration: 0.001ms;
}


.rail--nav {
  view-transition-name: nav-rail;
}

::view-transition-old(nav-rail),
::view-transition-new(nav-rail) {
  animation-duration: 0.25s;
  animation-timing-function: ease-in-out;
}

::view-transition-old(nav-rail) {
  animation-name: nav-fade-out;
}

::view-transition-new(nav-rail) {
  animation-name: nav-fade-in;
}

@keyframes nav-fade-out {
  to { opacity: 0.3; }
}

@keyframes nav-fade-in {
  from { opacity: 0.3; }
  to { opacity: 1; }
}


.page-header h1 {
  view-transition-name: page-title;
}

::view-transition-old(page-title),
::view-transition-new(page-title) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

::view-transition-old(page-title) {
  animation-name: title-exit;
}

::view-transition-new(page-title) {
  animation-name: title-enter;
}

@keyframes title-exit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px) scale(0.9) rotateX(-10deg);
    filter: blur(8px);
  }
}

@keyframes title-enter {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.85) rotateX(15deg);
    filter: blur(10px);
  }
  60% {
    opacity: 1;
    transform: translateY(-5px) scale(1.02) rotateX(-2deg);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
    filter: blur(0);
  }
}


.profile-picture img {
  view-transition-name: profile-image;
}

::view-transition-old(profile-image),
::view-transition-new(profile-image) {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  overflow: clip;
  border-radius: var(--radius);
}

::view-transition-old(profile-image) {
  animation-name: image-zoom-out;
}

::view-transition-new(profile-image) {
  animation-name: image-zoom-in;
}

@keyframes image-zoom-out {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: blur(0) brightness(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.7) rotate(-5deg);
    filter: blur(12px) brightness(1.2);
  }
}

@keyframes image-zoom-in {
  0% {
    opacity: 0;
    transform: scale(1.3) rotate(5deg);
    filter: blur(12px) brightness(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: blur(0) brightness(1);
  }
}


.contact-form {
  view-transition-name: contact-form;
}

::view-transition-old(contact-form),
::view-transition-new(contact-form) {
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

::view-transition-old(contact-form) {
  animation-name: form-slide-out;
}

::view-transition-new(contact-form) {
  animation-name: form-slide-in;
}

@keyframes form-slide-out {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50px) scale(0.92);
    filter: blur(6px);
  }
}

@keyframes form-slide-in {
  0% {
    opacity: 0;
    transform: translateX(50px) scale(0.92);
    filter: blur(8px);
  }
  60% {
    opacity: 1;
    transform: translateX(-3px) scale(1.01);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}