/*** Photos from Lorem Picsum ***/
:root {  
  --bg: url(https://fastly.picsum.photos/id/961/800/600.jpg?hmac=A4CmfO34T8BoI3chQg3ny9rFblQ-Jdt-pXPa_X0luhs);
  --tra: all 0.5s ease 0s;
}

* {
	box-sizing: border-box;
	transform-style: preserve-3d;
}

body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: radial-gradient(circle at 50% 50%, #444 20%, #000);
	perspective: 250vmin;
}

body:hover .content, body:hover .content .art {
  animation-duration: 0s;
}

.content {
	width: 100vw;
	height: 100vh;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;	
	transition: all 0.75s ease 0s;
	animation: start-v 4s ease 0s 1;
}

.art {
	--width: 90;
	--height: 60;
	--depth: 5;
	--sat: 10%;
	--hue: 10;
	height: calc(var(--height) * 1vmin);
	width: calc(var(--width) * 1vmin);
	border-radius: 1px;
	/*transform: rotateX(-11deg) rotateY(-19deg);*/
	transition: all 0.75s ease 0s;
	animation: start-h 4s ease 0s 1;
}

.side {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	border-radius: 1px;
  background: var(--bg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100vmin 70vmin;
	border: 1px solid #0004;
  &:nth-of-type(1) {
    transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
  }
  &:nth-of-type(2) {
    transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin))	rotateY(180deg);
  }
  &:nth-of-type(3) {
    width: calc(var(--depth) * 1vmin);
    transform: translate(-50%, -50%) rotateY(90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
    background-position: -95vmin -5vmin;
    filter: brightness(0.65);
  }
  &:nth-of-type(4) {
    width: calc(var(--depth) * 1vmin);
    transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
    background-position: 0vmin -5vmin;
    filter: brightness(1.25);
  }
  &:nth-of-type(5) {
    height: calc(var(--depth) * 1vmin);
    transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
    background-position: 50% 0vmin;
    filter: brightness(1.15);
  }
  &:nth-of-type(6) {
    height: calc(var(--depth) * 1vmin);
    transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
    background-position: 50% 100%;
    filter: brightness(0.4);
  }
}


 /*** 
		Cam System by @amit_sheen in CSS-Tricks:
		https://css-tricks.com/how-to-map-mouse-position-in-css/
	***/
.cam {
	width: 5.263vw;
	height: 5.263vh;
	float: left;
	box-sizing: border-box;
  position: relative;
	z-index: 1;
	cursor: zoom-in;
	transform: translateZ(0vmin);
  /* box-shadow: 0 0 0.5px 0 #fff2 inset; */
  @for $i from 1 through 19 {
    @for $j from 1 through 19 {
      $key: ($i - 1) * 19 + $j;
      &:nth-child(#{$key}) {
        &:hover ~ .content .art {
					transform: 
						rotateX(($i - 8) * -10deg + 19) 
						rotateY(($j - 8) * 10deg - 19);
        }
      }
    }
  }
	&:active ~ .content {
		transform: scale3d(1.8,1.8,1.8);
		transition: all 0.75s ease 0s;
	}
	&:active ~ .photos, &:active ~ .options {
		opacity: 0;
    transition: var(--tra);
	}
}



@keyframes start-h {
	  0% { transform: rotateY(0deg) rotateX(0deg); }
	 25% { transform: rotateY(30deg) rotateX(0deg); }
	 75% { transform: rotateY(-30deg) rotateX(0deg); }
	100% { transform: rotateY(-1deg) rotateX(1deg); } 
}
@keyframes start-v {
	  0%, 66% { transform: rotateY(0deg) rotateX(30deg); }
	 33% { transform: rotateY(0deg) rotateX(-30deg); }
  100% { transform: rotateY(-1deg) rotateX(1deg); }
}



.photos, .options {
  background: #f0f0;
  position: absolute;
  width: 54vw;
  height: 5.5vh;
  bottom: 5.5vh;
  left: calc(50% - 27vw);
  z-index: 3;
  transition: var(--tra);
	display: flex;
	align-items: center;
	justify-content: center;	
  opacity: 0.35;
  &:hover {
    opacity: 1; 
  }
}

.options {
  bottom: 89vh;
}


input[type=radio], input[type=checkbox] {
  display: none;
}

label, a.reload {
  margin: 0 ;
  position: relative;
  width: 5.975vw;
	height: 5.5vh;
  display: inline-block;
  padding: 0.3vh 0.3vw;
  cursor: pointer;
  border-radius: 2px;
}

label:before {
  content: "";
  position: absolute;
  width: calc(100% - 0.6vw);
  height: calc(100% - 0.6vh);
  background-image: var(--bg);
  background-size: cover;
  background-position: center center;
  border-radius: 1px;
}



a.reload, .options label { 
  /*
  background:  #222;
  color: #333;
  */
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}


a.reload {
  margin-left: -48vw;
  background: #555;
  &:hover {
    background: #ccc;
    color: #222;
    &:before {
      transform:  rotate(360deg);
      transition: var(--tra);
      --ar: #111;
      --rf: #ccc;
    }
  }
  &:before {
    content: "";
    position: absolute;
    width: 3.4vw;
    height: 3.4vw;
    font-size: 4vmin;
    font-weight: bold;
    text-align: center;
    line-height: 5.1vh;
    border-radius: 100%;
    --ar: #222;
    --rf: #555;
    background: 
      linear-gradient(180deg, #fff0 0 45%, var(--rf) 45% 57%, #fff0 57% 100%), 
      radial-gradient(circle at 50% 50%, #fff0 35%, var(--ar) calc(35% + 1px) 50%, #fff0 calc(50% + 1px) 100%), 
      conic-gradient(from 45deg at 0% 100%, var(--ar) 0 12.5%, #fff0 0 100%) 15% 30%, 
      conic-gradient(from -135deg at 100% 0%, var(--ar) 0 12.5%, #fff0 0 100%) 40% 70%;
    background-size: 100% 100%, 100% 100%, 1.2vw 1.2vw, 1.2vw 1.2vw;
    background-repeat: no-repeat;
    background-position: 0% 0%, 0% 0%, 80% 20%, 20% 80%;
  }
}




label[for=canvas] {
  margin-left: -24vw;
}
label[for=ratan] {
  margin-left: -12vw;
}
label[for=quilt] {
  margin-left: 0vw;
}
label[for=mesh] {
  margin-left: 12vw;
}
label[for=none] {
  margin-left: 24vw;
}
label[for=view] {
  margin-left: 48vw;
  background: #555;
}



label:after, a.reload:after {
  content: "";
  position: absolute;
  background: #1110;
  color: #3338;
  font-family: Arial, Helvetica, serif;
  font-size: 10px;
  top: 1.5vh;
  width: 100%;
  text-align: center;
  z-index: -1;
  opacity: 0;
  padding: 0.5vh 0.5vw;
  box-sizing: border-box;
  transition: var(--tra);
  filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
}

label:hover:after, a.reload:hover:after {
  top: 5vh;
  opacity: 1;
  transition: var(--tra);
  filter: blur(0px);
  padding: 1.5vh 0.5vw;
  color: #e6e6e6;
}

a.reload:hover:after, .options label:hover:after {
  top: -4.25vh;
  opacity: 1; 
}









label:nth-child(1):after {
  content: "MOUNTAIN";
}
label:nth-child(2):after {
  content: "OCEAN";
}
label:nth-child(3):after {
  content: "JUNGLE";
}
label:nth-child(4):after {
  content: "GRASS";
}
label:nth-child(5):after {
  content: "TUNDRA";
}
label:nth-child(6):after {
  content: "DESERT";
}
label:nth-child(7):after {
  content: "FOREST";
}
label:nth-child(8):after {
  content: "POND";
}
label:nth-child(9):after {
  content: "RIVER";
}





a.reload:after {
  content: "RELOAD";
}
label[for=canvas]:after {
  content: "CANVAS";
}
label[for=ratan]:after {
  content: "RATAN";
}
label[for=quilt]:after {
  content: "QUILT";
}
label[for=mesh]:after {
  content: "MESH";
}
label[for=none]:after {
  content: "NONE";
}
label[for=view]:after {
  content: "VIEW";
}






#f1:checked ~ .content,
label[for=f1]:before {
  --bg: url(https://fastly.picsum.photos/id/961/800/600.jpg?hmac=A4CmfO34T8BoI3chQg3ny9rFblQ-Jdt-pXPa_X0luhs);
}

#f2:checked ~ .content,
label[for=f2]:before {
  --bg: url(https://fastly.picsum.photos/id/179/800/600.jpg?hmac=uQODZXURYaaxkDQ11hdG4F6JMtpQh8xYKfl3FSe_5TQ);
}

#f3:checked ~ .content,
label[for=f3]:before {
  --bg: url(https://fastly.picsum.photos/id/704/800/600.jpg?hmac=BM2k67bQyfpxD6svOVCJzkmG3ydKmrU6ozSVQDsanSg);
}

#f4:checked ~ .content,
label[for=f4]:before {
  --bg: url(https://fastly.picsum.photos/id/542/800/600.jpg?hmac=qnJ821vdc-q3j09QgBNb8vl4wiwFtZT56pTUKPsyL8Q);
}

#f5:checked ~ .content,
label[for=f5]:before {
  --bg: url(https://fastly.picsum.photos/id/46/800/600.jpg?hmac=vIFMycdQ5eyaMkEm3kpPqLJ1A5gZfLs4MHSlDABz2Hg);
}

#f6:checked ~ .content,
label[for=f6]:before {
  --bg: url(https://fastly.picsum.photos/id/525/800/600.jpg?hmac=-kuOr6SWeV34OadvB-l-eoI09dL8zqINt6AmtIkHxnw);
}

#f7:checked ~ .content,
label[for=f7]:before {
  --bg: url(https://fastly.picsum.photos/id/476/800/600.jpg?hmac=w0GnsneSmB1mL_YENuJ75v_SdeS0GAxc2gEgBDhSpK4);
}

#f8:checked ~ .content,
label[for=f8]:before {
  --bg: url(https://fastly.picsum.photos/id/217/800/600.jpg?hmac=rsM7O0BELJ05CB4C58avdtVkZCfXBo9SNWf18jvY2F0);
}

#f9:checked ~ .content,
label[for=f9]:before {
  --bg: url(https://fastly.picsum.photos/id/1044/800/600.jpg?hmac=aNJNCvHzwwgQQWDUJPUFUAyd5LYhh8cAPIawaBtti3c);
}







@for $i from 1 through 9 {
  #f#{$i}:checked ~ .photos label[for=f#{$i}] {
    background: #444;
    cursor: default;
  }
}



#canvas:checked ~ .options label[for=canvas],
#ratan:checked ~ .options label[for=ratan],
#quilt:checked ~ .options label[for=quilt],
#mesh:checked ~ .options label[for=mesh],
#none:checked ~ .options label[for=none] {
  background: #666;
  cursor: default;
}

label:hover {
  background: #ccc;
}

.side:before, .options label:before {
  --u:  0.5vmin;
  --ts: 50%/ calc(var(--u) * 2) calc(var(--u) * 2);
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
  opacity: 0.25;
  filter: brightness(1.5) ;
  border-radius: 2px;
}

.options label:before {
  opacity: 1;
  width: calc(100% - 0.6vw);
  height: calc(100% - 0.6vh);
}






/*** FILTERS ***/

#canvas:checked ~ .content .art .side:before, 
label[for=canvas]:before { 
  --c1: #fff8;
  --c2: #fff9;
  --c3: #fffc;
  --c4: #fffd;
  --sh: #0004;
  --sh2: #0002;
	background: 
		repeating-linear-gradient(45deg, #42312f30 calc(var(--u) * 0.125), #fff0 calc(var(--u) * 0.25) ), 
		conic-gradient(from 85deg at 75% 1px, #fff0 0, var(--sh2) 0%, #fff0 5% 100%) var(--ts),  
		conic-gradient(from -5deg at 0% calc(75% - 1px), #fff0 0, var(--sh) 0%, #fff0 4% 100%) var(--ts),  
		conic-gradient(from 0deg at 75% calc(75% - 1px), #fff0 0 22%, var(--sh2) 25%, #fff0 25% 100%) var(--ts),   
		conic-gradient(from 0deg at 75% calc(75% - 1px), var(--c4) 0 25%, #fff0 0 97%, var(--sh) 105%) var(--ts),
		linear-gradient(180deg, #fff0 0%, var(--sh) 25%, #fff0 25% 50%, var(--sh) 50%, #fff0 75% 100%) var(--ts), 
		linear-gradient(180deg, #fff0 25%, var(--c3) 25% 50%, #fff0 50% 100%) var(--ts), 
		linear-gradient(90deg, #fff0 0%, var(--sh) 25%, #fff0 25% 50%, var(--sh) 50%, #fff0 75% 100%) var(--ts), 
		linear-gradient(90deg, #fff0 25%, var(--c2) 25% 50%, #fff0 50% 100%) var(--ts), 
		linear-gradient(180deg, var(--sh) 0%, #fff0 25% 50%, var(--sh) 75%, #fff0 75% 100%) var(--ts), 
		linear-gradient(180deg, #fff0 75%, var(--c1) 75% 100%) var(--ts), 
		#42312F;
}



#ratan:checked ~ .content .art .side:before, 
label[for=ratan]:before {
  --u: 0.75vmin;
	--c1: #fff8;
  --sh: #0008;
  --sh2: #0006;
	background:    
		conic-gradient(from -10deg at 60% 0%, #fff0 0 25%, var(--sh2) 28%, #fff0 31% 100%) var(--ts), 
		conic-gradient(from -5deg at 0% calc(60% - 1px), #fff0 0, var(--sh) 0%, #fff0 4% 100%) var(--ts),    
		conic-gradient(from 0deg at 60% calc(60% - 1px), #fff0 0 22%, var(--sh2) 25%, #fff0 25% 100%) var(--ts),     
		conic-gradient(from 0deg at 60% calc(60% - 1px), var(--c1) 0 25%, #fff0 0 97.5%, var(--sh) 102%) var(--ts),   
		linear-gradient(180deg, #fff0 0%, var(--sh) 10%, #fff0 10% 50%, var(--sh) 50%, #fff0 60% 101%) var(--ts),   
		linear-gradient(180deg, #fff0 10%, var(--c1) 10% 50%, #fff0 50% 100%) var(--ts),   
		linear-gradient(90deg, #fff0 0%, var(--sh) 10%, #fff0 10% 50%, var(--sh) 50%, #fff0 60% 100%) var(--ts),   
		linear-gradient(90deg, #fff0 10%, var(--c1) 10% 50%, #fff0 50% 100%) var(--ts),   
		linear-gradient(180deg, #fff0 60%, var(--c1) 60% 100%) var(--ts);
}



#quilt:checked ~ .content .art .side:before, 
label[for=quilt]:before {
	--c0: #fff8;
  --c1: #0008;
  --c2: #fff8;
	--ts: 50%/ calc(var(--u) * 5) calc(var(--u) * 5);
	--hide-top: conic-gradient(from 90deg at 50% 90%, var(--c0) 0 25%, #fff0 0 100%) var(--ts);
	--hide-bot: conic-gradient(from -90deg at 50% 10%, var(--c0) 0 25%, #fff0 0 100%) var(--ts);
	background:
		var(--hide-top), var(--hide-top), var(--hide-top), 
		conic-gradient(from 90deg at 50% 80%, var(--c1) 0 25%, #fff0 0 100%) var(--ts), 
		conic-gradient(from 90deg at 50% 70%, var(--c2) 0 25%, #fff0 0 100%) var(--ts), 
		conic-gradient(from 90deg at 50% 60%, var(--c1) 0 25%, #fff0 0 100%) var(--ts), 
		conic-gradient(from 90deg at 50% 50%, var(--c0) 0 25%, #fff0 0 100%) var(--ts), 
		var(--hide-bot), var(--hide-bot), var(--hide-bot), 
		conic-gradient(from -90deg at 50% 20%, var(--c1) 0 25%, #fff0 0 100%) var(--ts), 
		conic-gradient(from -90deg at 50% 30%, var(--c2) 0 25%, #fff0 0 100%) var(--ts), 
		conic-gradient(from -90deg at 50% 40%, var(--c1) 0 25%, #fff0 0 100%) var(--ts), 
		conic-gradient(from -90deg at 50% 50%, var(--c0) 0 25%, #fff0 0 100%) var(--ts), 
		repeating-linear-gradient(90deg, var(--c0) 0 10%, var(--c1) 0 20%, var(--c2) 0 30%, var(--c1) 0 40%, var(--c0) 0 50%) var(--ts),
		var(--c0);
}



#mesh:checked ~ .content .art .side:before,
label[for=mesh]:before{
  --c1: #545454;
  --c2: #727272;
	background: 
		linear-gradient(290deg, #fff0 25%, var(--c1) 25% 35%, #fff0 35% 100%) var(--ts), 
		linear-gradient(-290deg, #fff0 25%, var(--c2) 25% 35%, #fff0 35% 100%) var(--ts), 
		linear-gradient(200deg, #fff0 25%, var(--c1) 25% 35%, #fff0 35% 100%) var(--ts), 
		linear-gradient(-200deg, #fff0 25%, var(--c2) 25% 35%, #fff0 35% 100%) var(--ts), 
		#fffc;
}




#none:checked ~ .content .art .side:before {
  display: none;
}

label[for=none]:before {
  --nr: #fff;
  background: var(--nr);
}

label[for=none]:hover:before {
  --nr: #888;
}

#none:checked ~ .options label[for=none]:before {
  --nr: #ccc;
}







label[for=view]:before {
  width: 2.25vw;
  height: 1.5vw;
  border: 3px solid #0008;
  transition: var(--tra);
  background-image: none;
}

label[for=view]:hover:before {
  transform: rotate(90deg);
  border: 3px solid #000;
}

#view:checked ~ .options label[for=view]:before {
  transform: rotate(90deg);
}

#view:checked ~ .options label[for=view]:hover:before {
  transform: rotate(0deg);
}

#view:checked {
  & ~ .content .zoom {
    transform: scale3d(0.75, 0.75, 0.75);
  }
  & ~ .content .art {
	--width: 60;
	--height: 90;
    .side {
      background-size: 142.85vmin 100vmin;
      background-position: center center;
      &:nth-child(3) {
        background-position: -101vmin 50%;
      }
      &:nth-child(4) {
        background-position: -37vmin 50%;
      }
      &:nth-child(5) {
        background-position: 50% 0%;
      }
      &:nth-child(6) {
        background-position: 50% 100%;
      }
    }
  }
}

@supports (-webkit-font-smoothing: antialiased) {
	.cam {
		transform: translateZ(30vmin);
	}
}