$base: 'https://images.unsplash.com/';
$imid: '1608848461950-0fe51dfc41cb';
$size: 800;

/* declarations 1 through 3 are for layout */
html, body, div { display: grid } /* 1 */ 

html { height: 100% } /* 2 */

div {
	place-self: center; /* 3 */
	background: /* cat image */
		url('#{$base}photo-#{$imid}?w=#{$size}') 50%/ cover; /* 4 */
	
	&::after {
		padding: Min(20em, 47vmin); /* 5 size element */
		background: /* blinds */
			/* pattern
			 * top to bottom 50% lightness grey to white 
			 * repeating gradient (16 repetitions) */
			/* slightly lighter than 50% grey to fix Chrome on Android glitch */
			repeating-linear-gradient(hsl(0, 0%, 52.5%), #fff 6.25%), 
			/* map
			 * 50% lightness grey to white gradient 
			 * the top third of the gradient is fully grey 
			 * the middle third is the gradient transition 
			 * from the 50% lightness grey of the first third 
			 * to white, which also covers the bottom third */
			/* extra black stop added to fix Chrome on Android glitch */
			linear-gradient(#000 33.3%, grey 0, #fff 66.7%) 
				/* background height is 3x the element's height */
				0/ 100% 300%; /* 6 */
		/* for reference: this talk where I go into 
		 * the multiply blend mode (Chromium only slides)
		 * https://codepen.io/thebabydino/project/full/ZjwjBe */
		background-blend-mode: multiply; /* 7 */
		/* use a very high contrast value to make  
		 * all greys darker than the 50% lightness one black
		 * and all others white 
		 * from top to bottom, this gives us 
		 * horizontal white bands of increasing height 
		 * with black in between */
		filter: contrast(999); /* 8 */
		/* also detailed in the talk mentioned above
		 * wherever this pseudo is white, result of blending 
		 * with parent (with cat background) is white; 
		 * wherever this pseudo is black, result of blending 
		 * with parent is the parent (cat background here) */
		mix-blend-mode: screen; /* 9 */
		/* background-position animation goes back and forth */
		animation: p 1s linear infinite alternate; /* 10 */
		content: '' /* 11 necesarry for pseudo to show up */
	}
}

@keyframes p {
	/* cat is covered by grey top third of tall gradient, 
	 * which results in a fully black pseudo after 
	 * blending backgrounds & applying contrast 
	 * => result after blending it with the cat is the cat*/
	0%, 25% { background-position: 0 0 } /* 12 */
	/* cat is covered by white bottom third of tall gradient, 
	 * which results in a fully white pseudo after 
	 * blending backgrounds & applying contrast 
	 * => fully white result after blending with cat */
	75%, 100% { background-position: 0 100% } /* 13 */
}