/* Calm Water Surface
- moves from Right to Left
- has sparkle effect applied to every element
- has sun ray effect
*/

.page {
	width:100vw;
	height:100vh;
	perspective:2000px;
	perspective-origin: 50% 50%;
	overflow:hidden;
}

#parallax {
	transform-style: preserve-3d;
	height:100vh;
}

/* Water Layers */

div[class*='wly'] {
	position: absolute;
	top: 68vh;
	width:1000vw;
}

.wly1 { transform: translateZ(0px); left: -5vw; }
.wly2 { transform: translateZ(-200px); left: -5vw; }
.wly3 { transform: translateZ(-400px); left: -10vw; }
.wly4 { transform: translateZ(-600px); left: -15vw; }
.wly5 { transform: translateZ(-800px); left: -20vw; }
.wly6 { transform: translateZ(-1100px); left: -30vw; }
.wly7 { transform: translateZ(-1500px); left: -38vw; }
.wly8 { transform: translateZ(-2000px); left: -50vw; }
.wly9 { transform: translateZ(-2600px); left: -65vw; }
.wly10 { transform: translateZ(-3400px); left: -85vw; }

/* Water Parts */

div[class^='wpt'] {

	background-image: url(../images/sparkles.gif);
	background-size: 15vh 0.45vh;
	background-repeat: repeat-x;
	padding: 0;
	margin: -2px;
	border-style: none;
	border-width: 0;
	float: left;
}
.wpt1 { background-color: #41BDE5; width:10.1vmax; height:5.5vh; }
.wpt2 { background-color: #28A7D0; width:10.1vmax; height:6.0vh; }
.wpt3 { background-color: #0E91BE; width:10.1vmax; height:6.0vh; }
.wpt4 { background-color: #0B81B3; width:10.1vmax; height:6.0vh; }
.wpt5 { background-color: #0974AA; width:10.1vmax; height:7.0vh; }
.wpt6 { background-color: #076099; width:30.3vmax; height:8.5vh; }
.wpt7 { background-color: #065090; width:30.3vmax; height:10.0vh; }
.wpt8 { background-color: #054089; width:30.3vmax; height:11.5vh; }
.wpt9 { background-color: #043080; width:60.3vmax; height:14.0vh; }
.wpt10 { background-color: #032077; width:60.3vmax; height:17.0vh; }

.wpta {
	animation-name: wptakf;
	animation-duration: 4s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
}
@keyframes wptakf {
	0% , 100% {transform: translateY(0) skewY(7deg);}
	25% {transform: translateY(0.6vmax) skewY(0deg);}
	50% {transform: translateY(0) skewY(-7deg);}
	75% {transform: translateY(-0.6vmax) skewY(0deg);}
}

.wpta2 {
	animation-name: wpta2kf;
	animation-duration: 8s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
}
@keyframes wpta2kf {
0%,100% {transform: skewY(-2deg)}
50% {transform: skewY(2deg)}
}

.wpta3 {
	animation-name: wpta3kf;
	animation-duration: 16s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
}
@keyframes wpta3kf {
0%,100% {transform: skewY(-1deg)}
50% {transform: skewY(1deg)}
}

/* SunRays */

div[class*='sly'] {
	position: absolute; 
	top: 73.5vh;
	width:100vw;
	right: 0;
}

.sly1 { transform: translateZ(-100px); }
.sly2 { transform: translateZ(-300px); }
.sly3 { transform: translateZ(-500px); }
.sly4 { transform: translateZ(-700px); }

div[class*='sr'] {
	position:absolute;
	border-style: none;
	border-width: 0px;
	background-image: linear-gradient(to bottom, rgba(255,255,178,1), rgba(255,255,178,0));
	transform: skewX(-8deg);
	opacity:0;
	animation-duration: 64s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-name: srkf;
}

@keyframes srkf {
	0%,18%,20%,28%,30%,38%,40%,48%,50%,58%,60%,68%,70%,78%,80%,88%,90%,100% { opacity:0; }
	
	19%,39%,69% { opacity: 0.4; }
	29%,59%,79% { opacity: 0.3; }
	49%,89% { opacity: 0.2; }
	
	18% { transform: translateX(35vmax) skewX(-3deg); }
	28% { transform: translateX(95vmax) skewX(-1deg); }
	38% { transform: translateX(75vmax) skewX(-2deg); }
	48% { transform: translateX(25vmax) skewX(-10deg); }
	58% { transform: translateX(85vmax) skewX(-3deg); }
	68% { transform: translateX(55vmax) skewX(-7deg); }
	78% { transform: translateX(75vmax) skewX(-4deg); }
	88% { transform: translateX(45vmax) skewX(-7deg); }

	20% { transform: translateX(20vmax) skewX(-7deg); }
	30% { transform: translateX(80vmax) skewX(1deg); }
	40% { transform: translateX(60vmax) skewX(0deg); }
	50% { transform: translateX(10vmax) skewX(-8deg); }
	60% { transform: translateX(70vmax) skewX(0deg); }
	70% { transform: translateX(40vmax) skewX(-3deg); }
	80% { transform: translateX(60vmax) skewX(0deg); }
	90% { transform: translateX(30vmax) skewX(-4deg); }
}

.sr1 {
height:50vmax;
width:1vmax;
}

.sr2 {
height:40vmax;
width:2vmax;
}

.sr3 {
height:30vmax;
width:1.5vmax;
}

.sr4 {
height:20vmax;
width:1.8vmax;
}