h2 The Amur Leopard
h3 rarest kitty in the world - too beautiful for its own good?

section.gallery
	- var n = 36;
	- for(var i = 0; i < n; i++) {
		input(id=`gallery__item--${i}` type='radio' name='gallery__items' checked=i?null:'true')
		label.gallery__item(for=`gallery__item--${i}`) gallery item #{i}
			img(src=`https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_05_a_amur_leopard_${i}.jpg` alt=`Amur leopard image ${i}`)
	- }

section.info
	input#show(type='checkbox')
	label(for='show') show info
	section.info__content
		p Amur leopards are relatively easy to distinguish from other leopard subscpecies because, in order to survive the long cold winter, they have a soft coat with long and thick hair. This gives them a fluffy and extremely aesthetically pleasing appearance - just look at them!
		p Their beauty has been both a curse and a blessing.
		p Their gorgeous coats have made them poached to such an extent that, ten years ago, only about 20 of them were still to be found in the wild.
		p At the same time, their charisma has made them popular in zoos or as vanity "pets" for rich people and had raised the interest in saving them from extinction.
		p For the past ten years however, their numbers have climbed slowly. There are about 50- 60 cats living in the wild today.

@import 'compass/css3';

$n: 36;
$f: .2;
$ax: 10deg;
$fy: 1/cos($ax);
$ba: 360deg/$n;

* {
	box-sizing: border-box;
	margin: 0;
}

body {
	--d: 100vmin;
	--f: .2;
	--ty: calc(.5rem + var(--d));
	--tx: calc(50vmin - .5*var(--f)*var(--d));
	--oy: 1rem;
	display: flex;
	overflow-x: hidden;
	flex-direction: column;
	min-width: .75rem; min-height: 100vh;
	background: gainsboro;
	font: .75rem satisfy, cursive;
	
	@media (min-width: 23rem) and (min-height: 23em) {
		--d: 22.5rem;
		--ty: calc(2*var(--tx) + 1rem);
		font-size: 4vmin;
	}
	
	@media (min-width: 35rem) and (min-height: 35em) {
		--tx: calc((#{1/sqrt(2)} + .5*var(--f))*var(--d));
		--ty: 0;
		--oy: calc(var(--tx) - .5*(1 - var(--f))*var(--d) + 1rem);
		font-size: 1.5rem;
	}
}

h2, h3 { text-align: center }

input {
	position: absolute;
	left: -200vw;
}

label {
	font-size: 0;
	cursor: pointer;
}

img {
	position: absolute;
	width: 100%; height: 100%;
}

p {
	margin: .75em 1em;
	transform: scale(0) translate(50%);
	opacity: 0;
	transition: .3s calc(var(--k, 0)*.1s);
	
	@for $k from 1 to 5 {
		&:nth-child(#{$k + 1}) { --k: $k }
	}
}

.gallery {
	flex: 1;
	position: relative;
	transform-style: preserve-3d;
	
	&__item {
		overflow: hidden;
		position: absolute;
		top: var(--oy); left: 50%;
		margin: 0 calc(-.5*var(--d));
		width: var(--d); height: var(--d);
		border: solid calc(.02*var(--d)) whitesmoke;
		border-radius: 50%;
		--a: calc(var(--k)*#{$ba});
		transform: translateY(var(--ty)) 
			rotate(var(--a)) translate(var(--tx)) 
			scale(var(--f)) rotateX($ax) scaleY($fy) 
			rotate(calc(-1*var(--a)));
		filter: grayscale(1);
		transition: .3s;

		@for $k from 0 to $n {
			&:nth-child(#{2*$k + 2}) { --k: $k }
		}
		
		[type='radio']:focus + & , &:hover { filter: none }
		
		[type='radio']:checked + & {
			border-radius: 1rem;
			transform: rotate(0deg) translate3d(0, 0, -1rem) rotatex(0deg) scale(1);
			filter: none
		}
	}
}

.info {
	position: absolute;
	right: 0; bottom: 0;
	pointer-events: none;
	
	&__content {
		position: relative;
		bottom: 3.5rem; right: 1rem;
		padding: .125em 0;
		width: calc(100vw - 2rem);
		max-height: calc(100vh - 5rem);
		transform-origin: 100% 100%;
		transform: scale(0);
		background: rgba(white, .8);
		transition: .3s .3s;
		pointer-events: auto;
		
		[type='checkbox']:checked ~ & {
			transform: none;
			transition: .3s;
			
			p {
				opacity: 1;
				transform: none;
				transition: .3s calc(.3s + var(--k, 0)*.1s);
			}
		}
	}
}

[for='show'] {
	pointer-events: auto;
	
	&:before, &:after {
		position: absolute;
		right: .5em;
		width: 2em;
		border-radius: 50%;
		box-shadow: 0 0 0 3px currentcolor;
		font: 900 1.25rem/2 consolas, monospace;
		text-align: center;
	}
	
	&:before {
		position: absolute;
		bottom: .5em;
		width: 2em;
		background: dodgerblue;
		color: whitesmoke;
		filter: grayscale(.5);
		content: 'i'
	}
	
	&:after {
		position: absolute;
		z-index: 2;
		top: calc(100% - 2em);
		transform: scale(0);
		opacity: 0;
		background: white;
		color: silver;
		transition: .3s .3s;
		content: 'x'
	}
	
	[type='checkbox']:checked + &, 
	[type='checkbox']:focus + &, &:hover {
		&:before { filter: none }
	}
	
	[type='checkbox']:checked + & {
		&:after {
			top: -1.75rem;
			opacity: 1;
			transform: scale(1);
			transition: .3s;
		}
	}
}