/* CSS Document */
:root {
	--sannes-blue:hsl( 205.2 75% 42% );

	--body-color:#363330;
	--body-bg:#e1ddd9;

	--header-bg:var(--sannes-blue);
	--header-dark:hsl( 205.2 87.5% 36% );
	--header-shadow:hsl( 205.2 87.5% 20% );
	--header-fade:hsl( 205.2 87.5% 20% / .5);

	--h1-color:#fff;
	--tagline-color:hsl( 205.2 75% 21% );

	--filter-color:#fff;
	--filter-shadow:drop-shadow(0 .33rem .33rem #0006);

	--item-color:var(--body-color);
	--item-gradient:linear-gradient(to right, #adaaa7 50%, #bebbb8 50%);
	--item-shadow:0 .75em .75em -.25em #0006;

	--wolk-bg:#fff;
	--wolk-shadow:drop-shadow(0 .33rem .3rem #0006);

	--disclaimer-color:#fc0;
	--disclaimer-gradient:linear-gradient(to right, var(--header-dark) 50%, var(--header-bg) 50%);
	--disclaimer-shadow:drop-shadow(0 -.125rem .5rem #0006);

	--disclaimer-button-color:#fff;
	--disclaimer-button-bg:var(--header-bg);
	--disclaimer-button-bg-expanded:#DB4437;
	--disclaimer-button-shadow:drop-shadow(0 .33rem .33rem #0006);

	--disclaimer-link-shadow:drop-shadow(0 .33rem .33rem #0006);

	--header-size:5.5em;
	--shadow-size:1.5em;
}

@media (prefers-color-scheme:dark) {
	:root {
		--body-bg:#363330;
		--item-gradient:linear-gradient(to right, #474441 50%, #585552 50%);
	}
}


*, ::before, ::after {
	box-sizing:border-box;
	padding:0; margin:0;
  list-style:none;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family:"open sans", sans-serif;
	color:var(--body-color);
	background:var(--body-bg);
}

h1, h2, h3, h4 {
	font-family: 'Lora', serif;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (prefers-reduced-motion:no-preference) {
	html {
		scroll-behavior:smooth;
	}
}



/**********/
/* HEADER */
/**********/

header {
	position:relative;
	left:50%; /* voor safari :-( --> ipv grid op body */
	z-index:300;

	width:100%;
	max-width:32em;
	translate:-50% 0; /* voor safari :-( --> ipv grid op body */

	display:grid; 
	grid-template-columns:1fr 1fr;
	grid-template-rows: minmax(var(--header-size), max-content);
	
	perspective: 20em;
	transform-style: preserve-3d;
}


/* header content */
header :is(h1, p) {
	position: relative;
	
	padding:.5rem 1rem;

	display:grid;
	align-items:center;
	align-content:center;

	z-index:400;
}

header h1 {
	font-size: 1.5em;
	font-weight: normal;
	color:var(--h1-color);

	background-color: var(--header-dark);

	text-align: right;
	transform-origin:left center;
	transform:rotateY(-10deg) scaleX(1.016) skewY(1.5deg);
}

header p {
	color:var(--tagline-color);
	line-height: 1.2em;
  text-align: left;
	-webkit-hyphens: auto;
  hyphens: auto;

	background-color: var(--header-bg);

	transform-origin:right center;
	transform:rotateY(10deg) scaleX(1.016) skewY(-1.5deg);
}

@media (min-width: 27em) {
	header h1 div {
		display:grid;
	}
}

@media (min-width: 32em) {
	header::before,
	header::after {
		content:"";

		position:absolute;
		bottom:calc(var(--shadow-size) * -1);
		
		display:block;
		height:100%;
		aspect-ratio:1;

		background-size:
			var(--shadow-size) var(--shadow-size),
			cover,
			cover;
		background-repeat:no-repeat;

		pointer-events:none;
	}

	header::before {
		left:calc(var(--shadow-size) - var(--header-size));

		background-image:
			conic-gradient(
				at left top,
				var(--header-shadow) 135deg,
				transparent 0
			),
			linear-gradient(
				to left, 
				var(--header-fade) 0%, 
				transparent 50%),
			conic-gradient(
				from -33.3deg at 33.3% center,
				var(--header-dark) 246.7deg,
				transparent 0
			);
		background-position:
			right bottom,
			center,
			center;
		transform-origin:
			calc(var(--header-size) - var(--shadow-size))
			calc(var(--header-size) - var(--shadow-size));
		rotate:-2.5deg;
	}
	
	header::after {
		right:calc(var(--shadow-size) - var(--header-size));

		background-image:
			conic-gradient(
				at right top,
				transparent 225deg,
				var(--header-shadow) 0
			),
			linear-gradient(
				to right, 
				var(--header-fade) 0%, 
				transparent 50%),
			conic-gradient(
				from 146.7deg at 67.7% center,
				var(--header-bg) 246.7deg,
				transparent 0
			);
		background-position:
			left bottom,
			center,
			center;
		transform-origin:
			var(--shadow-size)
			calc(var(--header-size) - var(--shadow-size));
			rotate:2.5deg;
	}
}

@media (min-width: 32em) and (min-height: 40em) {
	header {
		position:fixed;
		top:0;
	}
}

@media (min-width: 48em) and (min-height: 40em) {
	header {
		top:2.5em;
	}
	
	header::before {
		rotate:-5deg;
	}
	header::after {
		rotate:5deg;
	}
	
	header h1 {
		transform:rotateY(-10deg) scaleX(1.016) skewY(-1.5deg);
	}
	header p {
		transform:rotateY(10deg) scaleX(1.016) skewY(1.5deg);
	}
}





/**********/
/* FILTER */
/**********/

/* de container */
menu {
	position: sticky;
	left:50%; /* voor safari :-( --> ipv grid op body */
	top:-.5em;
	z-index:200;

	translate:0 -.25em;

	display:grid;
	place-items:start center;
	place-content:start center;
}

menu li {
	position: absolute;

	display:grid;
	place-items:start center;
	place-content:start center;
}

menu li:nth-of-type(1) { transform:translateX(calc(-150% - .75em)); }
menu li:nth-of-type(2) { transform:translateX(calc(-50% - .25em)); }
menu li:nth-of-type(3) { transform:translateX(calc(50% + .25em)); }
menu li:nth-of-type(4) { transform:translateX(calc(150% + .75em)); }

input {
  appearance:none;  
	
	position: absolute;
	inset:0;
	z-index: 150;

	display: block;

	outline-style:solid;
	outline-color:transparent;

	cursor:pointer;
}

/* het knopje zelf */
label {
	position: relative;

	height:5.5rem;
	width:4rem;
	padding-bottom:1.75rem;
	
	display:grid;
	place-content:end center;
	place-items:end center;
	
	font-size:.75em;
	color:var(--filter-color);
	box-shadow:inset 0 3rem 1rem -1rem var(--header-fade);

	user-select: none;
}

li:nth-of-type(-n+2) label {
	background-image:
		conic-gradient(
			from calc(180deg - 56.7deg) at 50% calc(100% - 4rem/3),
			transparent calc(180deg - 66.7deg),
			var(--header-dark) 0
		);
}

li:nth-last-of-type(-n+2) label {
  background-image:
		conic-gradient(
			from calc(180deg - 56.7deg) at 50% calc(100% - 4rem/3),
			transparent calc(180deg - 66.7deg),
			var(--header-bg) 0
		);
}

label > svg {
	width:3rem;
	height:3rem;
	margin-bottom:-.375rem;
	color:#fff0;
}

/* checked */
input:checked + label > svg {
  color:inherit;
}

/* focus */
input:focus-visible + label {
	filter:var(--filter-shadow);
}

@media (min-width: 32em) and (min-height: 40em) {
	menu {
		position:fixed;
		top:var(--header-size);
	}
}

@media (min-width: 48em) and (min-height: 40em) {
	menu {
		top:calc( var(--header-size) + 2em );
	}
}

@media (prefers-reduced-motion:no-preference) {
	menu {
		translate:0 -.5em;
	}

	menu li {
		transform-origin:center -22.5em;
	}

	menu li:nth-of-type(1) { transform:rotate(15deg); }
	menu li:nth-of-type(2) { transform:rotate(5deg); }
	menu li:nth-of-type(3) { transform:rotate(-5deg); }
	menu li:nth-of-type(4) { transform:rotate(-15deg); }

	label {
		transition:.3s;
	}
	
	label > svg {
		transition:.3s;
	}

	/* checked */
	input:checked + label {
		height:7.5rem;
	}
}





/************/
/* HET WERK */
/************/

main {
    overflow-x: hidden;

		z-index:50;
}


/**************/
/* DE WERKJES */
/**************/

main ul {
	position: relative;
	z-index:100;

	padding:
		calc( 7.5em + var(--top, 0em) )
		clamp(2.25em, 6vw, 3em)
		clamp(2.25em, 6vw, 3em);

	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap: clamp(1.5em, 4vw, 2em);
}

@media (min-width: 32em) and (min-height: 40em) {
	main ul {
		--top: var(--header-size);
	}
}

@media (min-width: 48em) and (min-height: 40em) {
	main ul {
		--top: calc(var(--header-size) + 2em);
	}
}


/************/
/* een item */
main li {
	flex-basis:20em;
	/* flex-grow:1; */
	/* max-width:20em; */
	aspect-ratio:1;
	border-radius:50%;

	transition:opacity .15s;
}

main li.hide {
	opacity:0;
}

 main li.hide.gone {
	position:absolute;
	visibility:hidden;
}

@media (prefers-reduced-motion:no-preference) {
	main li {
		transition:opacity .45s, scale .45s;
	}

	main li.hide {
		scale:0;
	}
}


/*************/
/* een link  */
main a {
	position:relative;
	padding:1.5em;

	display:grid;
	justify-items:center;

	text-decoration: none;
	color:var(--item-color);
	background-image: var(--item-gradient);
	border-radius:inherit;
	outline-style:solid;
	outline-color:transparent;

	opacity:1;
	scale:1;
}

main a:focus-visible {
	box-shadow:var(--item-shadow);	
}


/***************/
/* tekstwolkje */
main a div {
	position:absolute;
	top:2%;

	padding:.75em;

	display:grid;
	grid-template-columns:max-content max-content;
	justify-items:center;
	column-gap:.375em;

	background-color:var(--wolk-bg);
	
	filter:var(--wolk-shadow);
}

main li:nth-of-type(7n - 0) div { translate:-20%; rotate:-10deg; }
main li:nth-of-type(7n - 1) div { translate:20%;  rotate:10deg; }
main li:nth-of-type(7n - 2) div { translate:10%;  rotate:-12deg; }
main li:nth-of-type(7n - 3) div { translate:30%;  rotate:5deg; }
main li:nth-of-type(7n - 4) div { translate:-30%; rotate:-12deg; }
main li:nth-of-type(7n - 5) div { translate:-10%; rotate:3deg; }
main li:nth-of-type(7n - 6) div { translate:0%;   rotate:-5deg; }

main a div::before {
	content:"";
	
	position:absolute;
	top:99%;

	width:1.5em;
	aspect-ratio:1;
	clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0);

	background-color:inherit;  
}

main a h3 {
	justify-self:end;
	font-size:1.125em;
}

main a h4 {
	order:1;
	grid-column:1/-1;
	font-size:1.125em;
}

main a p {
	justify-self:start;
}
main a p::before {
	content:"("
}
main a p::after {
	content:")"
}


/**********/
/* image  */
main a img {
    display: block;
    width:100%;
		height:100%;
    border-radius:inherit;
}


/***********/
/* melding */
main > div {
	position: absolute;
	left:50%;
	top:20em;
	
	transform:translateX(-50%);

	opacity:0;
	transition: .15s;

	user-select:none;
}

.noresults main > div {
	opacity:1;
}

@media (prefers-reduced-motion:no-preference) {
	main > div {
		transition: .45s;
	}
}





/**************/
/* DISCLAIMER */
/**************/

aside {
	position: fixed;
	left:1.5em;
	bottom:1.5em;
	z-index:250;

	transform-origin:left calc(100% + 1.5em);
	rotate:-90deg;
}

aside.show {
	rotate:0deg;
	filter:var(--disclaimer-shadow);
}

/* button */
aside button {
	position: absolute;
	right:0;
	top:100%;
	z-index:275;

	width:50%;
  height:2rem;
	margin:0;
    
	display:grid;
	place-items:center;
	place-content:center;
	
	font-family: 'Lora', serif;
	font-size:1.125em;
	font-weight:normal;

	appearance: none;
	color:var(--disclaimer-button-color);
	background-color:var(--disclaimer-button-bg);
	border:none;
	outline-style:solid;
	outline-color:transparent;
	
	cursor:pointer;
	user-select:none;	
}

aside button:focus-visible {
	filter:var(--disclaimer-link-shadow);
}

/* button - streepjes */
aside button::before,
aside button::after {
    content:"";
    position:absolute;
    width:1.5rem; height:.25rem;
    
    background-color:var(--disclaimer-button-color);
    border-radius:.125rem;
    opacity: 0;
    
    rotate:0deg;
}

/* button - expanded */
aside.show button {
	height:3rem; width:3rem;
	top:-1.5rem; right:.5rem;
	
	color:transparent;
	background-color:var(--disclaimer-button-bg-expanded);
	border-radius:50%;
}

aside.show button::before,
aside.show button::after {
    opacity:1;
}

aside.show button::before {    
    rotate:-765deg;
}

aside.show button::after {
    rotate:765deg;
}

@media (prefers-reduced-motion:no-preference) {
	aside {
		transition:.75s;
	}

	aside button {
		transition:.5s;
	}

	aside button::before,
	aside button::after {
    transition: .25s;
	}

	aside.show button::before,
	aside.show button::after {
			transition:1.5s;
	}
}

/* chrome */
aside a {
	width:18rem;
	padding:1rem 1rem 0;
	
	display:grid;
	grid-template-columns: 12rem;
	justify-items:center;
	justify-content:center;

	font-family: 'Kalam', cursive;
	font-size:1.5em;
	text-decoration: none;
	
	color:var(--disclaimer-color);
	background-image: var(--disclaimer-gradient);
	outline-style:solid;
	outline-color:transparent;

	opacity:0;
	transition:opacity .5s;
}

aside.show a {
	opacity:1;
}

aside a span {
	height:4rem;
	padding:0 1.5rem 0 4rem;

	display:flex;
	align-items:center;

	font-family:"open sans", sans-serif;
	font-size:1rem;
	
	background:white url("../images/chrome-logo.svg") .5rem center / auto 3em no-repeat;
	border-radius:2rem;

	color:var(--body-color);
}

aside a:focus-visible span {
	filter:var(--disclaimer-link-shadow);
}

@media (prefers-reduced-motion:no-preference) {
	aside {
		transition:.75s;
	}

	aside button {
		transition:.5s;
	}

	aside button::before,
	aside button::after {
    transition: .25s;
	}

	aside.show button::before,
	aside.show button::after {
			transition:1.5s;
	}

	aside a {
		opacity:1;
		transition:none;
	}
}