<article>
	<h3>Believe in Yourself</h3>
	<p>Because the rest of us think you're an idiot.</p>
	<button>close</button>
</article>

<article>
	<h3>Irresponsibility</h3>
	<p>No single raindrop believes it is to blame for the flood.</p>
	<button>close</button>
</article>

$u: 1.25;
$d: 12.5rem;
$s0: .5rem;
$s1: 2*$s0;
$b: 2rem;
$l: 6px;
$t0: .25s;
$t1: 2*$t0;
$easeOutCubic: cubic-bezier(.32, 1, .68, 1);
$easeOutBack: cubic-bezier(.35, 1.57, .65, 1);

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

html {
	font: 100 #{$u*1em}/ 1.25 handlee, 
		z003, segoe script, comic sans ms, cursive
}

body {
	box-sizing: border-box;
	display: grid;
	grid-gap: $s1;
	grid-template-columns: 
		repeat(auto-fit, minmax($d, 1fr));
	overflow-x: hidden;
	padding: $s1;
	height: 100vh;
	background: 
		linear-gradient(var(--ang, 185deg), 
				#fff calc(50% - .5px), #000 calc(50% + .5px));
	
	@media (min-width: $u*(2*$d + 3*$s1)) { --ang: 95deg }
}

article {
	--i: 0;
	--not-i: calc(1 - var(--i));
	place-self: center;
	overflow: hidden;
	position: relative;
	padding: $s0;
	width: $d; height: $d;
	background: hsl(0, 0%, calc(var(--i)*100%));
	color: hsl(0, 0%, calc(var(--not-i)*100%));
	clip-path: inset(1px round $s0);
	mix-blend-mode: difference;
	
	&:nth-child(2) { --i: 1 }
	
	&:after {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		background: currentcolor;
		clip-path: inset(0 0 $d $d round 0 $s0);
		transition: clip-path $t0 $easeOutBack;
		content: ''
	}
	
	&.hl::after {
		clip-path: inset(0 0 $d - $b $d - $b round 0 $s0)
	}
	
	&.cl {
		--a: 0;
		
		&::after {
			clip-path: inset(0 round 0 $s0);
			transition: clip-path $t1 $easeOutCubic
		}
	}
}

h3 {
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.75
}

button {
	position: absolute;
	z-index: 2;
	top: 0; right: 0;
	border: none;
	width: $b; height: $b;
	background: transparent;
	color: transparent;
	font-size: 1px;
	mix-blend-mode: difference;
	cursor: pointer;
	
	&::before, &::after {
		--j: 0;
		position: absolute;
		top: calc(50% - .5*#{$l});
		left: calc(50% - .5*#{$b});
		width: $b; height: $l;
		border-radius: $l;
		transform: 
			rotate(calc((2*var(--j) - 1)*45deg)) 
			scale(.65);
		background: rgba(#fff, var(--a, 1));
		transition: background-color $t0 $easeOutCubic;
		content: ''
	}
	
	&::after { --j: 1 }
	
	&:focus { outline: none }
}

/*
Created for my Taming Blend Modes: `difference` and `exclusion` (https://css-tricks.com/taming-blend-modes-difference-and-exclusion/) article on CSS-Tricks - check it out for context!
*/

const _BODY = document.body;

function state(e, act = 'add', cls = 'hl') {
	const _T = e.target;
	
	if(_T.tagName.toLowerCase() === 'button')
		_T.parentNode.classList[act](cls)
}

_BODY.addEventListener('focus', state, true);
_BODY.addEventListener('mouseover', state);
_BODY.addEventListener('blur', e => state(e, 'remove'), true);
_BODY.addEventListener('mouseout', e => state(e, 'remove'));
_BODY.addEventListener('click', e => state(e, 'add', 'cl'));