/* css animations stylesheet by publisitio 25.07 */
@view-transition {
  navigation: auto;
}
/* Create a custom animation full page */
@keyframes move-out {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes move-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}

/* Apply the custom animation to the old and new page states */
::view-transition-old(root) {
  animation: 0.4s ease-in both move-out;
}
::view-transition-new(root) {
  animation: 0.4s ease-in both move-in;
}


/* scroll driven animation */
.anime-to-left{
	animation: fadeIn both;
	animation-timeline: view();
}
	@keyframes fadeIn {
	  /* Animation for when the element enters the scrollport */
	  0% {
	    transform: translateX(50%); 
	    opacity: 0;
	  }
	  100% { 
	    transform: translateX(0); 
	    opacity: 1;
	  }
	}
	
/* Animation for when the element enters the scrollport */
.anime-to-top{
	animation: toTop ease-in-out both;
	animation-timeline: view();
	animation-range: entry 0% exit 20%;
}
	@keyframes toTop {
	  
	  entry 0% {
	    transform: translateY(50%); 
	    opacity: 0;
	  }
	  entry 100% { 
	    transform: translateY(0%); 
	    opacity: 1;
	  }
	  exit 0% {
      opacity: 1;
    }
    exit 100% {
      opacity: 0;
    }
	}