/*@supports (animation-timeline: scroll()) {
  /* Your scroll-driven animation code here */

img.frame
{
display:block;
	width:100%;
	position:fixed;
	left:0;
	top:0;
	z-index: 999;
	pointer-events: none;
	height:100%;
	animation: frame linear;
	animation-timeline: scroll(root);
	transform-origin:center;
	animation-fill-mode: forwards;
	animation-duration: 1ms; /* Required in Firefox */
}

img.back
{
display:block;
	width:100%;
	position:fixed;
	left:0;
	top:0;
	z-index: -999;
	pointer-events: none;
	height:100%;
	
	animation: back linear;
	animation-timeline: scroll(root);
	transform-origin:center;
	animation-fill-mode: forwards;
	animation-duration: 1ms; /* Required in Firefox */
}

.left_door
{
display:block;
	background-color:black;
	position:fixed;
	top:0;
	left:22%;
	height:100%;
	width:28%;
	z-index:900;
	background-color:black;
	animation: left-door linear;
	animation-timeline: scroll(root);
	transform-origin:0%;
	animation-fill-mode: forwards;
	perspective:1000px;
	animation-duration: 1ms; /* Required in Firefox */
}

.right_door
{
display:block;
	background-color:black;
	position:fixed;
	top:0;
	right:22%;
	height:100%;
	width:28%;
	z-index:900;
	background-color:black;
	animation: right-door linear;
	animation-timeline: scroll(root);
	transform-origin:100%;
	animation-fill-mode: forwards;
	perspective:1000px;
	transform-style: preserve-3d;
	animation-duration: 1ms; /* Required in Firefox */
}


@keyframes left-door
{
	10% {scale :1 1;transform-origin:0%;}
  25% {transform: rotateY(90deg);transform-origin:-150%;}
  40% { scale: 2 2;}
  100% {transform: rotateY(90deg); scale: 2 2; transform-origin:-150%;}
}

@keyframes right-door
{
	10% {scale :1 1; transform-origin:100%;}
  25% {transform: rotateY(90deg); transform-origin:250%; }
  
  40% { scale: 2 2;}
  
  100% {transform: rotateY(90deg); scale: 2 2; transform-origin:250%;}
}

@keyframes back
{
	0% {scale :0.80 0.80;}
	20% { scale: 1 1; }
	100% { scale: 1 1; }
}
@keyframes frame
{
	10% {scale :1 1;}
	40% { scale: 2 2; }
	100% { scale: 2 2; }
}

/*}*/


.scroll_leader
{
	height:1200px;
}

.scroll_gap
{
	height:1200px;
}