/* CSS Document: View Transitions API  */
/************Scroll-driven web-animations*****************************/
/* Function with no parameters set https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline/view */
@supports (animation-timeline: view()) {
  @keyframes fade-out {
    to {
      background-size: 150%;
      opacity: 0;
    }
  }
  @keyframes zoom-out {
	to {
		transform: scale(2);
	}
  }
  @keyframes appear {
    to {
      opacity: 1;
    }
  }
  @keyframes max-out {
    to {
      max-width: 100%;
    }
  }
  .hero {
    animation: fade-out linear both;
    animation-timeline: view();
    animation-range: exit -100px;
  }

  nav {
    animation: max-out linear both;
    animation-timeline: view();
    animation-range-start: 80vh;
    animation-range-end: 100vh;
  }

  nav:after {
    animation: appear linear both;
    animation-timeline: view();
    animation-range-start: 60vh;
    animation-range-end: 100vh;
  }

  .logo {
    animation: zoom-out linear both;
    animation-timeline: view();
    animation-range-start: 1vh;
    animation-range-end: 100vh;
  }
}
@supports not (animation-timeline: view()) {
  .notice:after {
    content: " animation-timeline of scroll and view are currently not supported in your browser.";
  }
}

/*==========================================*/

@keyframes grow-progress {
	from { width: 0% }
	to { width: 100% }
}

#progress {
	position: fixed;
	left: 0; top: 0;
	width: 0%; height: .4em;
	background: red;
	z-index: 999;
	transform-origin: 0 50%;
	animation: grow-progress auto linear;
	animation-timeline: scroll();
}
#header{
	view-transition-name: header;
	view-transition-offscreen: ignore;
}






@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(30px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-30px); }
}
::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/*=======ANIMATE Reveal==========*/

@keyframes reveal {
  from { opacity: 0; clip-path: inset(0% 60% 0% 50%); }
  to { opacity: 1; clip-path: inset(0% 0% 0% 0%); }
}

.revealing-image {
  animation: auto linear reveal both;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

/*=======ANIMATE Vertically==========*/

@keyframes animate-in-and-out {
  entry 0%  {
    opacity: 0; transform: translateY(100%);
  }
  entry 100%  {
    opacity: 1; transform: translateY(0);
  }
  exit 0% {
    opacity: 1; transform: translateY(0);
  }
  exit 100% {
    opacity: 0; transform: translateY(-100%);
  }
}
[data-animate=in-out]{
  animation: linear animate-in-and-out;
  animation-timeline: view();
}

/*============ANIMATE BUTTON BACKGROUND LTR ON HOVER ==================*/

.button.hollow {
    position: relative;
        z-index: 1;
}
.button.hollow:hover {
    color: white;
}
.button.hollow::before {
    transform: scaleX(0);
    transform-origin: bottom right;
}

.button.hollow:hover::before {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.button.hollow::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0 0 0 0;
    background: black;
    z-index: -1;
    transition: transform .3s ease;
}