/* PAGE TRANSITIONS */
  
  html.is-transitioning * {
    pointer-events: none !important;
  }
  
  body .transitioner {
    --transform-origin-in: right center;
    --transform-origin-out: left center;
  }
  
  body[data-transition-direction="left"] .transitioner {
    --transform-origin-in: left center;
    --transform-origin-out: right center;
  }

	.transitioner {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		z-index: 998;
	}

	.transitioner > div {
    --index: 0;
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		bottom: 0;
    width: 100%;
		background: #111;
		opacity: 0.9999; /* due to a weird chrome bug */
		z-index: 1;
		will-change: transform;
    transform: scaleX(0);
    transform-origin: var(--transform-origin-in);
	}

	.barba-outer,
	.sn-pt-leave-active,
	.sn-pt-enter-active {
		transition: opacity;
		transition-duration: 1.2s;
		opacity: 1;
	}

	.sn-pt-leave-active .module,
	.sn-pt-enter-active .module,
	.barba-once-active .module {
		transition: opacity 1s, transform 1s;
		transition-timing-function: cubic-bezier(0.19,1,.22,1);
	}

	.sn-pt-leave-active .transitioner > div,
	.sn-pt-enter-active .transitioner > div,
	.barba-once-active .transitioner > div {
		transition: opacity .5s, transform .5s;
		transition-timing-function: var(--ttf-5);
	}	
	.sn-pt-enter-active .transitioner > div {
		transition-delay: .15s;
	}

	/* Starting state for leave */
	.sn-pt-leave .module {
		opacity: 1;
	}
	.sn-pt-leave .transitioner > div {
		opacity: 0.9999; /* due to a weird chrome bug */
    transform: scaleX(0);
	}

	/* Ending state for leave */
	.sn-pt-leave-to .module {
		opacity: 1;
	}
	.sn-pt-leave-to .transitioner > div {
		opacity: 0.9999; /* due to a weird chrome bug */
    transform: scaleX(1);
	}

	/* Starting state for enter */
	.sn-pt-enter .module,
	.barba-once .module {
		/*opacity: 0;*/
		/*transform: translateY(80px);*/
	}
	.sn-pt-enter .transitioner > div,
	.barba-once .transitioner > div {
		opacity: 0.9999; /* due to a weird chrome bug */
    transform: scaleX(1);
	}

	/* Ending state for enter */
	.sn-pt-enter-to .module,
	.barba-once-to .module {
		opacity: 1;
		transform: none;
	}
	.sn-pt-enter-to .transitioner > div,
	.barba-once-to .transitioner > div {
		opacity: 0.9999; /* due to a weird chrome bug */
    transform: scaleX(0);
    transform-origin: var(--transform-origin-out);
	}





  html[data-transition*="overlay"] body .transitioner > div {
    display: none;
  }
  
  html[data-transition="work-overlay"] body .sn-pt-enter .transitioner > div,
  html[data-transition="work-overlay"] body .sn-pt-enter-to .transitioner > div {
    display: block;
  }
  
	html[data-transition*="overlay"] .barba-outer,
	html[data-transition*="overlay"] .sn-pt-leave-active,
	html[data-transition*="overlay"] .sn-pt-enter-active {
		transition-duration: 1.4s;
	}

  html[data-transition*="overlay"] body .transitioner::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: var(--base-color-black);
    opacity: 0;
    transition: opacity 1s;
  }
  
  html[data-transition="work-overlay"] body .transitioner::after,
  html[data-transition="legal-overlay"] body .transitioner::after {
    transition: opacity 400ms;
  }
  
  html[data-transition*="overlay"] body .sn-pt-leave .transitioner::after {
    opacity: 0;
  }
  
  html[data-transition*="overlay"] body .sn-pt-leave-to .transitioner::after {
    opacity: 1;
  }
  
  html[data-transition*="overlay"] body .sn-pt-enter .transitioner::after {
    opacity: 1;
  }
    
  html[data-transition*="overlay"] body .sn-pt-enter-to .transitioner::after {
    opacity: 0;
  }
  
  
  
  









	/* ON SCREEN */


	/* clip left to right */
	*[data-ios] *[data-ios-item="a"] {
		opacity: 0;
		-webkit-clip-path: inset(0% 100% 0% 0%);
		clip-path: inset(0% 100% 0% 0%);
		transition: clip-path 1.5s, -webkit-clip-path 1.5s, opacity 1.5s;
		transition-timing-function: cubic-bezier(.075, .82, .165, 1);
		transition-delay: calc((var(--ios-item-index) * 100ms) + var(--ios-delay, 0ms));
		will-change: opacity;
	}

	*[data-ios].is-on-screen *[data-ios-item="a"] {
		opacity: 1;
		-webkit-clip-path: inset(0% 0% 0% 0%);
		clip-path: inset(0% 0% 0% 0%);
	}


	/* clip top to bottom */
	*[data-ios] *[data-ios-item="b"] {
		opacity: 0;
		-webkit-clip-path: inset(0% 0% 100% 0%);
		clip-path: inset(0% 0% 100% 0%);
		transition: clip-path 1.5s, -webkit-clip-path 1.5s, opacity 1.5s;
		transition-timing-function: cubic-bezier(.075, .82, .165, 1);
		transition-delay: calc((var(--ios-item-index) * 100ms) + var(--ios-delay, 0ms));
		will-change: opacity;
	}

	*[data-ios].is-on-screen *[data-ios-item="b"] {
		opacity: 1;
		-webkit-clip-path: inset(0% 0% 0% 0%);
		clip-path: inset(0% 0% 0% 0%);
	}


	/* pop randomly */
	*[data-ios] *[data-ios-item="c"] {
		transform: scale(0.8);
		opacity: 0;
		transition: transform 1s, opacity 1s;
		transition-timing-function: cubic-bezier(.075, .82, .165, 1);
		transition-delay: calc((var(--ios-random) * 30ms) + var(--ios-delay, 0ms));
		will-change: opacity;
	}

	*[data-ios].is-on-screen *[data-ios-item="c"] {
		opacity: 1;
		transform: none;
	}


	/* clip vertically from center */
	*[data-ios] *[data-ios-item="d"] {
		opacity: 0;
		-webkit-clip-path: inset(50% 0% 50% 0%);
		clip-path: inset(50% 0% 50% 0%);
		transition: clip-path 1.5s, -webkit-clip-path 1.5s, opacity 1.5s;
		transition-timing-function: cubic-bezier(.075, .82, .165, 1);
		transition-delay: calc((var(--ios-item-index) * 100ms) + var(--ios-delay, 0ms));
		will-change: opacity;
	}

	*[data-ios].is-on-screen *[data-ios-item="d"] {
		opacity: 1;
		-webkit-clip-path: inset(0% 0% 0% 0%);
		clip-path: inset(0% 0% 0% 0%);
	}


	/* move in from bottom */
	*[data-ios] *[data-ios-item="e"] {
		opacity: 0;
		transform: translateY(2vw);
		transition: opacity 1.5s, transform 1.5s;
		transition-timing-function: cubic-bezier(.075, .82, .165, 1);
		transition-delay: calc((var(--ios-item-index) * 100ms) + var(--ios-delay, 0ms));
		will-change: opacity;
	}

	*[data-ios].is-on-screen *[data-ios-item="e"] {
		opacity: 1;
		transform: none;
	}


	/* move in from right */
	*[data-ios] *[data-ios-item="f"] {
		opacity: 0;
		transform: translateX(20vw);
		transition: opacity 1.5s, transform 1.5s;
		transition-timing-function: cubic-bezier(.075, .82, .165, 1);
		transition-delay: calc((var(--ios-item-index) * 100ms) + var(--ios-delay, 0ms));
		will-change: opacity;
	}

	*[data-ios].is-on-screen *[data-ios-item="f"] {
		opacity: 1;
		transform: none;
	}




	/* scale in */
	*[data-ios] *[data-ios-item="scale-in"] {
		opacity: 0;
		transform: scale(0.98);
    transform-origin: bottom center;
		transition: opacity 1.5s, transform 1.5s;
		transition-timing-function: var(--ttf-2);
		transition-delay: calc((var(--ios-item-index) * 100ms) + var(--ios-delay, 500ms));
		will-change: opacity;
	}

	*[data-ios].is-on-screen *[data-ios-item="scale-in"] {
		opacity: 1;
		transform: none;
	}