@view-transition {
    navigation: auto;
}

/* Move In-Out Animation */

/*@keyframes move-out {*/
/*    from {*/
/*        transform: translateY(0%);*/
/*    }*/

/*    to {*/
/*        transform: translateY(-100%);*/
/*    }*/
/*}*/

/*@keyframes move-in {*/
/*    from {*/
/*        transform: translateY(100%);*/
/*    }*/

/*    to {*/
/*        transform: translateY(0%);*/
/*    }*/
/*}*/

/*::view-transition-old(root) {*/
/*    animation: 0.8s cubic-bezier(0.87, 0, 0.13, 1) both move-out;*/
/*}*/

/*::view-transition-new(root) {*/
/*    animation: 0.8s cubic-bezier(0.87, 0, 0.13, 1) both move-in;*/
/*}*/

/* Move In-Out Animation  End */

/* ========== Filter Blur Zoom Animation */

 /* @keyframes blur-out {
    from {
       filter: blur(0px);
        transform: scale(1);
        opacity: 1;
   }

   to {
       filter: blur(120px);
       transform: scale(1.2);
       opacity: 0;
   }
}

@keyframes blur-in {
   from {
       filter: blur(120px);
      transform: scale(1.2);
       opacity: 0;
  }

   to {
        filter: blur(0px);
        transform: scale(1);
        opacity: 1;
    }
}

::view-transition-old(root) {
   animation: 0.4s ease-out both blur-out;
}

::view-transition-new(root) {
   animation: 0.4s ease-in both blur-in;
}  */

/* ========== Filter Blur Zoom Animation End*/

/* ========== Yank Animation */

/* @keyframes yank-out {
   from {
       transform: translate(0,0);
   }

   to {
       transform: translate(100%, -100%);
   }
}

@keyframes yank-in {
   from {
       transform: translate(-100%, 100%);
   }

   to {
       transform: translate(0,0);
   }
}

::view-transition-old(root) {
   animation: 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) both yank-out;
}

::view-transition-new(root) {
   animation: 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) both yank-in;
} */

/* ========== Yank Animation End*/

/* ========== Pop Drop Animation */

/* @keyframes fall-back {
   from {
       scale: 1;
   }

   to {
       scale: 0.8;
   }
}

@keyframes drop-out {
   from {
       transform: translateY(0);
       opacity: 1;
   }

   to {
       transform: translateY(100%);
       opacity: 0;
   }
}

@keyframes pop-in {
   from {
       transform: translateY(100%);
       opacity: 0;
   }

   to {
       transform: translateY(0);
       opacity: 1;
   }
}

@keyframes come-in {
   from {
       scale: 0.8;
   }

   to {
       scale: 1;
   }
}

::view-transition-old(root) {
   animation: 1s cubic-bezier(0.87, 0, 0.13, 1) both drop-out,
   0.4s cubic-bezier(0.87, 0, 0.13, 1) both fall-back;
}

::view-transition-new(root) {
   animation: 1s cubic-bezier(0.87, 0, 0.13, 1) both pop-in,
   1.4s cubic-bezier(0.87, 0, 0.13, 1) both come-in;
   animation-delay: 0.4s;
} */

/* ========== Pop Drop Animation End*/

/* ========== Side Swipe  Animation */

/* @keyframes fade-back {
   from {
       opacity: 1;
       scale: 1;
   }

   to {
       opacity: 0.5;
       scale: 0.8;
   }
}

@keyframes slide-in {
   from {
       transform: translateX(90%);
       opacity: 0.5;
   }

   to {
       transform: translateX(0);
       opacity: 1;
   }
}

::view-transition-old(root) {
   animation: .5s cubic-bezier(0.87, 0, 0.13, 1) both fade-back;
}

::view-transition-new(root) {
   animation: .5s cubic-bezier(0.87, 0, 0.13, 1) both slide-in;
}  */
::view-transition-old(nav),::view-transition-new(nav),::view-transition-old(navbar-container),::view-transition-new(navbar-container),::view-transition-old(logo),::view-transition-new(logo),
::view-transition-old(desk-nav),::view-transition-new(desk-nav),
::view-transtion-old(contact),::view-transition-new(contact){
    animation: none;
}


/* 
@keyframes fade-in{
    from{
        opacity:0;
    }
    to{
        opacity: 1;
    }
}

@keyframes fade-out{
    from{
        opacity:1;
    }
    to{
        opacity:0;
    }
} */
@keyframes slide-to-left{
    from{
        transform:translateX(-2rem);
    }
    to{
        transform:translateX(0rem);
    }

}
@keyframes slide-to-right{
    from{
        transform:translateX(0rem);
    }
    to{
        transform:translateX(-2rem);
    }

}

::view-transition-old(root){
    animation:fade-out 350ms cubic-bezier(0,0,0.2,1),
    slide-to-right 350ms cubic-bezier(0,0,0.2,1);
}
::view-transition-new(root){
    animation:fade-in 350ms cubic-bezier(0,0,0.2,1),
    slide-to-left 350ms cubic-bezier(0,0,0.2,1);
    mix-blend-mode: normal;
}