@font-face {
  font-family: 'Fink Heavy';
  src:  url('../fonts/FinkHeavy.woff') format('woff');
}





/**************/
/* CSS REMEDY */
/**************/

*, *::before, *::after {
	box-sizing: border-box;
}

button:not([disabled]), summary {
	cursor:pointer;
}





/*********************/
/* CUSTOM PROPERTIES */
/*********************/

*, *::before, *::after {
	--color-main:#000;
	--color-main-inverse:#fff;
	--color-focus:#09c;
	--color-accent:#DC143C;

	--color-background:#fff;
	--color-background-translucent:#fff9;
	--color-background-very-translucent:#fff6;
	--color-background-transparent:#fff0;

	--size-white-space:1rem;
	--size-backdrop-filter-blur:3px;

	--shadow-focus:0 0 0 .25rem var(--color-el-focus, var(--color-focus));
	--filter-blur:blur(var(--size-backdrop-filter-blur));


	/* buttons */
	--color-button-background:var(--color-el-background, var(--color-background));
	--color-button-background-translucent:#ddd9;
	--shadow-button-focus:var(--shadow-focus);

	--size-button:2.75rem;
	--size-button-radius:calc(var(--size-white-space) / 2);

	--time-button-transition:.3s;


	/* menu */
	--size-menu-max:36em;
	--time-menu-transition:.5s;


	/* summary*/
	--gradient-summary:
			linear-gradient(
				var(--color-background) 2.5%,
				var(--color-background-transparent)
			);
	--mask-summary:
			linear-gradient(
				var(--color-background) calc(100% - var(--size-white-space) * .75 ), 
				var(--color-background-transparent)
			);


	/* fish	in shop */
	--color-fish-main:#fff;
	--color-fish-main-inverse:#000;

	--color-fish-dark: hsl(
			calc(var(--h) * 360deg) 
			calc(var(--s) * 150%) 
			20%
			);
	--color-fish-mid: hsl(
			calc(var(--h) * 360deg) 
			calc(var(--s) * 150%) 
			30%
			);
	--color-fish-light: hsl(
			calc(var(--h) * 360deg) 
			calc(var(--s) * 150%) 
			75%
			);

	--color-fish-mid-translucent: hsl(
			calc(var(--h) * 360deg) 
			calc(var(--s) * 150%) 
			30% 
			/ .25
			);
	--color-fish-mid-transparent: hsl(
			calc(var(--h) * 360deg) 
			calc(var(--s) * 150%) 
			30% 
			/ 0
			);

	--color-fish-border:currentcolor;
	
	--color-fish-shadow:#6669;

	--gradient-fish:
			repeating-linear-gradient(
				135deg,
				var(--color-fish-mid-transparent) 0em 1em,
				var(--color-fish-mid-translucent) 1em calc(1em + 1px)
			),
			linear-gradient(
				-165deg,
				var(--color-fish-mid) 40%,
				var(--color-fish-light)
			);
	--shadow-fish:
			inset 0 0 0 calc(var(--size-button-radius) / 3) var(--color-fish-border),
			0 calc(var(--size-button-radius) / 2) var(--size-button-radius) var(--color-fish-shadow);
	--shadow-fish-mid:
			0 0 .25em var(--color-fish-mid),
			0 0 .5em var(--color-fish-mid),
			0 0 1em var(--color-fish-mid);
	--shadow-fish-light:
			0 0 .25em var(--color-fish-light),
			0 0 .5em var(--color-fish-light),
			0 0 1em var(--color-fish-light);

	--size-fish-min:16em;


	/* cart */
	--color-cart-background:#cccc;


	/* sea */
	--color-sea-main:#fff;
	--color-sea-link:#fc0;
	
	--color-sea-mid:#06c;
	--color-sea-dark:#013;
	--color-sea-shadow:#0138;
	--gradient-sea:linear-gradient(var(--color-sea-mid), var(--color-sea-dark));
	--gradient-sea-lightray:
			conic-gradient(
				at 20% -50%, 
				#0000 0deg 158deg, 
				#fff2 161deg 169deg, 
				#0001 171deg 184deg,
				#fff2 186deg 189deg, 
				#0000 192deg 360deg
			);
	--filter-sea-drop:
			drop-shadow(
				0 
				var(--dy, var(--size-white-space)) 
				var(--sp, calc(var(--size-white-space) * .2))
				var(--color-sea-shadow)
			);

	--size-sea-perspective:1em;
	--size-sea-zerostatetext-max:14em;


	/* fish in sea */
	--color-fishinsea-background-dying:#0009;

	--size-fishinsea:clamp(5em, 20vmin, 9em);

	--time-transition-swim:30s;
	--time-transition-dying:1s;
	--time-transition-death:10s;	
}





/*******************/
/* GENERAL STYLING */
/*******************/

body {
	margin:0;
	font-family: 'Saira', sans-serif;	
}

h1, h2 {
	font-family: 'Fink Heavy';
}

/* ramdom transform letters */
h1, h2 {
	display:flex;
	gap:.375em;
	flex-wrap:wrap;
	margin:0;

	font-size:3em;
}

:is(h1, h2) > span {
	display:flex;
	gap:.02em;
}

:is(h1, h2) span span {
	transform: 
		translate( calc(var(--tX) * .02em), calc(var(--tY) * .15em) )
		rotate( calc(var(--rotate) * 15deg) );
		
	display:inline-block;
}

button {
	position:relative;
	min-height:var(--size-button);
	margin:0;

	-webkit-appearance:none;
	appearance:none;
	background-color:var(--color-button-background);
	border:none;
	border-radius:var(--size-button-radius);
	outline:none;

	font:inherit;

	transition:var(--time-button-transition);
}

button:not([disabled]):hover,
button:not([disabled]):focus {
	box-shadow:var(--shadow-focus);
}





/**************/
/* CONTAINERS */
/**************/

html {
	background:
		fixed var(--gradient-sea-lightray),
		fixed var(--gradient-sea);
	background-blend-mode: overlay;
}

main {
	width:100%;
	height:100%;

	display:grid;
	place-items:center;
	/* place-content:center; */

	overflow:hidden;
}





/*************/
/* SKIP LINK */
/*************/

body > a {
	--color-el-focus:#fff;

	position: fixed;
	inset:calc(var(--size-white-space) * .5) calc(var(--size-white-space) * .5) auto;
	z-index: 200;
	transform:translateY(calc(-100% - var(--size-white-space) * 1));

	min-height:var(--size-button);
	padding:calc(var(--size-white-space) * 1) var(--size-white-space);
	
	background-color: var(--color-background-translucent);
	border-radius:var(--size-button-radius);
	outline:none;
	-webkit-backdrop-filter:var(--filter-blur);
	backdrop-filter:var(--filter-blur);

	text-align:center;
}

body > a:focus {
	transform:none;		
	box-shadow:inset var(--shadow-focus);
}





/************/
/* DE TITEL */
/******>*****/

h1 {
	position:absolute;
	inset:var(--size-white-space) calc(var(--size-white-space) * 2 + var(--size-button)) auto;

	justify-content: center;
	
	filter:var(--filter-sea-drop);

	color:var(--color-sea-main);
}





/*********************/
/* DE SHOP CONTAINER */
/*********************/

main form {
	position:fixed;
	inset:0 auto 0 0;
	z-index: 100;
	transform: translateX(0);

	width:100%;
	max-width:var(--size-menu-max);
	
	background-color: var(--color-background);
	outline:none;

	transition:var(--time-menu-transition);
	will-change: scroll-position;
}

/* shop open */
body.is-hidden main > form {
	transform: translateX(-100%);
}





/******************/
/* DE SHOP BUTTON */
/******************/

main form > button {
	--color-el-background:var(--color-button-background-translucent);

	position: absolute;
	right:var(--size-white-space);
	top:var(--size-white-space);
	z-index: 200;
	transform: translateX(0);

	aspect-ratio: 1/1;
	display:grid;
	place-items:center;
}

/* shop open */
/* pijl <-> kruis */
main form > button::before,
main form > button::after {
	content:"";
	position:absolute;
	transform:rotate(var(--rotateAngle)) scaleX(var(--scaleFactor, 1.33));
	transform-origin:center;
	
	width:calc(var(--size-button) / 2);
	height:calc(var(--size-button) / 9);
	
	background-color:var(--color-accent);

	transition:inherit;
}

main form > button::before {
	--rotateAngle:45deg;
}
main form > button::after {
	--rotateAngle:-45deg;
}

/* shop closed */
body.is-hidden main form > button {
	--color-el-background:var(--color-background);
	transform:translateX(calc(var(--size-white-space) * 2 + var(--size-button)));
}

body.is-hidden main form > button::before,
body.is-hidden main form > button::after {
	--scaleFactor:1;
	transform-origin:calc(100% - var(--size-button) / 18) calc(var(--size-button) / 18);
	background-color:var(--color-main);
}





/********************/
/* SHOP DEPARTMENTS */
/********************/

main form > section:first-of-type {
	height:100%;
	padding-bottom:calc(var(--size-button) + var(--size-white-space) * 2);
	overflow-y:auto;

	outline:none;

	overscroll-behavior-y:contain;
	scroll-behavior:smooth;
	scrollbar-width: none;
	scrollbar-height: none;
}

main form > section:first-of-type::-webkit-scrollbar {
	display: none;
}

main form > section:first-of-type h2 {
	padding:var(--size-white-space);
}





/*******************/
/* SHOP DEPARTMENT */
/*******************/

main form > section:first-of-type summary {
	min-height:calc(var(--size-button) + var(--size-white-space) * 2);
	padding:var(--size-white-space);
	display:grid;
	place-items:center;
	list-style: none;

	outline:none;
	pointer-events: none;
}

main form > section:first-of-type summary::-webkit-details-marker {
	display:none;
}

[data-glass-demo*="2"] main form > section:first-of-type summary {
	position: sticky;
	top:0;
	z-index: 25;
}

[data-glass-demo*="3"] main form > section:first-of-type summary {
	background-image:var(	--gradient-summary);
}

[data-glass-demo*="4"] main form > section:first-of-type summary {
	-webkit-backdrop-filter: var(--filter-blur);
	backdrop-filter: var(--filter-blur);
}

[data-glass-demo*="5"] main form > section:first-of-type summary {
	-webkit-mask:var(--mask-summary);
	mask:var(--mask-summary);
}

/* shop department - title */
main form > section:first-of-type h3 {	
	position: relative;
	
	min-height:var(--size-button);
	margin:0;
	/* padding:0 0 0 calc(var(--size-button) - var(--size-button) / 18); */
	padding:0;
	display:grid;
	grid-template-columns: 
		max-content
		calc(var(--size-button) - var(--size-button) / 18);

	place-items:center;
	
	border-radius: var(--size-button-radius);

	pointer-events:all;

	font-size:1.5em;
	text-align:center;

	transition:var(--time-button-transition);
}

main form > section:first-of-type summary:focus h3 {
	box-shadow:var(--shadow-focus);
}

/* pijl <-> kruis */
main form > section:first-of-type h3::before,
main form > section:first-of-type h3:after {
	content:"";
	/* position: absolute; */

	grid-area:1/2;

	/* right:calc(var(--size-button) / 2 - var(--size-button) / 18); */

	width:calc(var(--size-button) / 9);
	height:calc(var(--size-button) * 2/5);
	transform: rotate(var(--rotateAngle)) scaleY(var(--scaleFactor, 1));
	transform-origin:calc(var(--size-button) / 18) calc(100% - var(--size-button) / 18);

	background: var(--color-main);

	transition:inherit;
}

main form > section:first-of-type h3::before {
	--rotateAngle:-45deg;
}
main form > section:first-of-type h3::after {
	--rotateAngle:45deg;
}

/* details open */
main form > section:first-of-type [open] h3::before,
main form > section:first-of-type [open] h3::after {
	--scaleFactor:1.33;
	transform-origin:center;
}





/*******************************/
/* SHOP DEPARTMENT - FISH LIST */
/*******************************/

main form > section:first-of-type ul {
	margin:0;
	padding:0 var(--size-white-space) var(--size-white-space);
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax(var(--size-fish-min), 1fr));
	gap:var(--size-white-space);

	list-style:none;
}





/****************************/
/* SHOP DEPARTMENT - A FISH */
/****************************/

main form > section:first-of-type li {
	position:relative;

	transform-style:preserve-3d;
	transition:.5s;
}





/**************************************/
/* SHOP DEPARTMENT - OPEN/CLOSE SIDES */
/**************************************/

main form > section:first-of-type li.details {
	transform:perspective(40em) rotateY(.5turn);
}

main form > section:first-of-type li > section > button {
	--color-el-background:transparent;
	width: var(--size-button);
	color:var(--color-button-main);
}

main form > section:first-of-type li > section > :is(button:focus, button:hover) {
	--color-el-background:var(--color-button-background-translucent);
	color:var(--color-fish-main-inverse);
}

main form > section:first-of-type li > section:first-of-type > button {
	grid-area: 1 / 2 / 3 / -1;
	place-self: start end;
}

main form > section:first-of-type li > section:last-of-type > button {
	grid-area: 1 / 1 / 5 / 2;
	place-self: start;
}





/***************************/
/* SHOP DEPARTMENT - SIDES */
/***************************/

main form > section:first-of-type li > section {
	position:relative;
	isolation: isolate;

	width:100%;
	aspect-ratio:9 / 6;
	padding:var(--size-white-space);

	display: grid;

	background-image:var(--gradient-fish);
	border-radius:var(--size-white-space);
	box-shadow:var(--shadow-fish);

	color:var(--color-fish-main);

	backface-visibility: hidden;
}





/********************************/
/* SHOP DEPARTMENT - FRONT SIDE */
/********************************/

main form > section:first-of-type li > section:first-of-type {
	grid-template-columns:
		auto
		auto;
	grid-template-rows:
		minmax(1.375em, auto) 
		1fr
		minmax(var(--size-button), auto);
	grid-template-areas: 
		"rarity rarity"
		"title  title"
		"form   price";
}

/* shop department - fish - title */ 
main form > section:first-of-type li > section:first-of-type h4 {
	grid-area:title;
	
	margin:0 0 0 calc(var(--size-white-space) / 8);	
	display:grid;
	grid-template-columns:min-content;
	
	font-size:1.5em;
	line-height:1em;
	text-transform: capitalize;
	text-shadow:var(--shadow-fish-mid);	
}

/* shop department - fish - rarity */ 
main form > section:first-of-type li > section:first-of-type > p:first-of-type {
	margin:0;
	padding:
		0
		calc(var(--size-white-space) * 3 / 7 )
		calc(var(--size-white-space) / 8);
	grid-area:rarity;
	place-self:start;

	background-color:var(--color-fish-dark);
	border-radius: var(--size-white-space);

	line-height:1em;
}

/* shop department - fish - price */ 
main form > section:first-of-type li > section:first-of-type > p:last-of-type {
	grid-area:price;
	place-self:end;
	
	margin:0;
	padding:calc(var(--size-white-space) / 8) calc(var(--size-white-space) / 2);
	min-height:var(--size-button);

	background-color: var(--color-fish-main);
	border-radius: var(--size-button-radius);

	color:var(--color-fish-dark);
}

main form > section:first-of-type li > section:first-of-type > p:last-of-type::before {
	content:"$";
	font-size: 2em;
	line-height: 1.125em;
	float:left;
}

/* shop department - fish - form */ 
main form > section:first-of-type li > section:first-of-type fieldset {
	grid-area:form;

	max-height:var(--size-button);
	margin:0;
	padding:0;
	display:flex;
	align-items: center;

	border:none;

	color:var(--color-fish-main-inverse);
	text-shadow:var(--shadow-fish-light);
}

/* buttons */
main form > section:first-of-type li > section:first-of-type fieldset button {
	--color-el-background:transparent;
	padding:0 .25em;
	font-weight:bold;
}

main form > section:first-of-type li > section:first-of-type fieldset :is(button:focus, button:hover) {
	--color-el-background:var(--color-button-background-translucent);
}

/* plus button als eerste */
main form > section:first-of-type li > section:first-of-type fieldset button:first-of-type {
	order:-1;
}

/* output */
main form > section:first-of-type li > section:first-of-type fieldset output {
	flex-basis:2.25em;
	flex-shrink:0;
	padding:0 .25em;
	text-align:center;
}

/* indien output gevuld is - dan zijn de buttons vierkant */
main form > section:first-of-type li > section:first-of-type fieldset output:not(:empty) ~ button {
	aspect-ratio: 1/1;
}

/* indien output leeg is - dan zijn output en min-button weg */
main form > section:first-of-type li > section:first-of-type fieldset :is(output:empty, output:empty ~ button:last-of-type) {
	display:none;
}

/* indien output leeg is - dan heeft plus button extra tekstje */
main form > section:first-of-type li > section:first-of-type fieldset output:empty ~ button:first-of-type::after {
	content: "buy me";
	margin-left:.125em;
	font-weight:normal;
	color:var(--color-fish-mid);
}

/* tekst als vis nu niet beschikbaar is */
main form > section:first-of-type li > section:first-of-type div {	
	grid-area:form;

	display:flex;
	flex-direction:column;
	justify-content:end;

	color:var(--color-fish-mid);
	text-shadow:var(--shadow-fish-light);
}

main form > section:first-of-type li > section:first-of-type div p {
	margin:0;
	line-height:1em;
}

/* shop department - fish content - img */ 
main form > section:first-of-type li > section:first-of-type img {
	position: absolute;
	right: var(--size-white-space);
	z-index:-100;
	height:100%;
	aspect-ratio:1/1;


}





/*******************************/
/* SHOP DEPARTMENT - BACK SIDE */
/*******************************/

main form > section:first-of-type li > section:last-of-type {
	position:absolute;
	top:0;
	left:0;

	transform: rotateY(.5turn);

	grid-template-columns:
		1.5fr
		1fr;
	grid-template-rows:
		4fr
		min-content
		min-content
		4fr
		5fr;
	grid-template-areas: 
		"image        name"
		"image        rarity"
		"image        location"
		"image        price"
		"availability availability";

	column-gap:var(--size-white-space);

	/* background: var(--color-fish-mid); */
}

main form > section:first-of-type li > section:last-of-type p {
	margin:0;
	line-height:1.25em;
}

/* name */
main form > section:first-of-type li > section:last-of-type p:nth-of-type(1) {
	grid-area:name;
	align-self:end;
	font-weight:bold;
	text-transform: capitalize;
	white-space: nowrap;
}

/* rarity */
main form > section:first-of-type li > section:last-of-type p:nth-of-type(2) {
	grid-area:rarity;
}

/* location */
main form > section:first-of-type li > section:last-of-type p:nth-of-type(3) {
	grid-area:location;
	max-width:10em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* price */
main form > section:first-of-type li > section:last-of-type p:nth-of-type(4) {
	grid-area:price;
}

main form > section:first-of-type li > section:last-of-type p:nth-of-type(4)::before {
	content:"$";
}

/* image */
main form > section:first-of-type li > section:last-of-type img {
	grid-area:image;
	place-self:center;
	justify-self:end;
	width:75%;
	height:100%;
	object-fit: contain;
}

/* availability */
main form > section:first-of-type li > section:last-of-type table {
	grid-area:availability;
	place-self: start center;

	margin-top:calc(var(--size-white-space) / 2);

	border:none;
	border-spacing: 0;
	
	font-size:.75em;
	line-height:1.375em;
}

main form > section:first-of-type li > section:last-of-type table tr {
	display:grid;
	grid-template-columns: 3em repeat(12, minmax(auto, 2.5em));
}

main form > section:first-of-type li > section:last-of-type table :is(th, td) {
	flex-grow:1;
	padding:0;
	display:grid;
	place-items:center;
}

/* availability months data */
main form > section:first-of-type li > section:last-of-type table th:first-of-type {
	justify-self: start;
	font-weight:normal;
	color:var(--color-fish-dark);
}

main form > section:first-of-type li > section:last-of-type table tbody td img {
	width:92%;
}

main form > section:first-of-type li > section:last-of-type table tbody td.true img {
	/* filter: drop-shadow(0 0 .125em var(--color-fish-mid)); */
}

main form > section:first-of-type li > section:last-of-type table tbody td.false img {
	opacity:.25;
	filter:grayscale(1);
}


/* FLIP FISH */
main form > section:first-of-type li > section:last-of-type img {
	transform: perspective(6em) rotateY(0);
	transition:1s ease-in-out;
}

body.flip main form > section:first-of-type li > section:last-of-type img {
	transform: perspective(6em) rotateY(.5turn);
}




/*********************/
/* THE SHOPPING CART */
/*********************/

main form > section:last-of-type {
	position:absolute;
	inset:auto 0 0;
	z-index: 200;
	
	padding: var(--size-white-space);
	display:flex;
	gap:calc(var(--size-white-space) / 2);
	justify-content: end;
	align-items:center;
	flex-wrap: wrap;

	background-color: var(--color-cart-background);
	-webkit-backdrop-filter: var(--filter-blur);
	backdrop-filter: var(--filter-blur);
}


/* fish counter */
main form > section:last-of-type output:empty {
	display:none;
}

main form > section:last-of-type output:not(:empty)::after {
	content:" fishes";
} 
main form > section:last-of-type output[data-count="1"]:not(:empty)::after {
	content:" fish";
} 


/* buttons */
main form > section:last-of-type button {
	padding:calc(var(--size-white-space) / 8) calc(var(--size-white-space) / 2);
}


/* kill 'em all button */
main form > section:last-of-type [type="button"] {
	order:-1;
	height:var(--size-button);
	aspect-ratio:1/1;
	padding:0;
	display:none;
	align-items:center;
	gap:calc(var(--size-white-space) / 4);
	overflow:hidden;
}

main form > section:last-of-type output:not(:empty) + [type="button"] {
	display:flex;
}

main form > section:last-of-type :is([type="button"]:not([disabled]):focus, [type="button"]:not([disabled]):hover) {
	--color-el-background:var(--color-accent);
	--color-el-focus:var(--color-main-inverse);
	color:var(--color-main-inverse);
}

main form > section:last-of-type [type="button"]::before {
	content:"☠";
	
	height:100%;
	aspect-ratio:1/1;
	display:grid;
	place-items:center;

	font-size:2em;
	line-height:1em;
}

@keyframes killingInProgress {
	0% {
		transform:rotateY(0turn);
	}
	100% {
		transform:rotateY(1turn);
	}
}

main form > section:last-of-type [type="button"][disabled]::before {
	animation: killingInProgress .8s infinite linear;
}






/* submit button */
main form > section:last-of-type [type="submit"] {
	--color-el-background:var(--color-focus);

	margin-left:auto;	
	display:flex;
	align-items:center;

	color:var(--color-main-inverse);
}

main form > section:last-of-type :is([type="submit"]:focus, [type="submit"]:hover) {
	--color-el-focus:var(--color-main-inverse);
}

main form > section:last-of-type [type="submit"]::before {
	content:"$";
}

body:not(.is-hidden) main form > section:last-of-type [type="submit"]::after {
	content:"💰";
	order:-1;
	font-size:2em;
	line-height:1em;
}


/* shop closed */
body.is-hidden main form > section:last-of-type [type="submit"] {
	--color-el-background:var(--color-background-transparent);

	transform: translateX(calc(var(--size-white-space) * 2 + 100%));
	filter:var(--filter-sea-drop);
}

@media (min-width:26em) {
		/* submit button */
		main form > section:last-of-type [type="submit"] {
			align-items:start;
			
			font-size: 2em;
			line-height: 1.125em;
		}
	
		main form > section:last-of-type [type="submit"]::before {
			float:left;
	
			font-size: .5em;
			line-height: initial;	
		}
	
		body:not(.is-hidden) main form > section:last-of-type [type="submit"]::after {
			padding-right:calc(var(--size-white-space) / 4);
			font-size:1em;
			line-height:inherit;
		}
}


@media (min-width:30em) {
	main form > section:last-of-type {
		gap:var(--size-white-space);
	}

	/* kill 'em all button */
	main form > section:last-of-type [type="button"] {

		aspect-ratio:unset;
		padding:calc(var(--size-white-space) / 8) calc(var(--size-white-space) / 2);

		gap:calc(var(--size-white-space) / 4);
	}

	main form > section:last-of-type [type="button"]::before {
		height:auto;	
		aspect-ratio:unset;
	}
}





/*****************/
/* THE FISH TANK */
/*****************/

main > section:last-of-type {
	height:100vh;
	width:100%;

	color:var(--color-sea-main);

	transform-style:preserve-3d;
	perspective:var(--size-sea-perspective);

	will-change: contents;
	contain: paint;
	pointer-events:none;
}

/* zero state text */
main > section:last-of-type + p {
	position:fixed;
	top:0;
	left:0;
	translate:calc(50vw - 50%) calc(50vh - 50%);

	display:none;
	max-width:var(--size-sea-zerostatetext-max);

	filter:var(--filter-sea-drop);

	text-align:center;
	color:var(--color-sea-main);

	transition:var(--time-menu-transition);
}

body:not(.is-hidden) main > section:last-of-type:empty + p {
	opacity: 0;
}

main > section:last-of-type:empty + p {
	display:block;
}

main > section:last-of-type + p a {
	color:var(--color-sea-link);
}





/****************/
/* FISH IN TANK */
/****************/

@keyframes swim {
	0%{
		transform:
			translateZ( calc( var(--size-sea-perspective) * var(--z) * -1 ) )
			translateX( calc( (50vw + var(--size-fishinsea) * 1) * (var(--z) + 1) ) );
		animation-timing-function: cubic-bezier(0.250, 0.500, .750, 0.500);
	}
	49.99%{
		transform:
		  translateZ( calc( var(--size-sea-perspective) * var(--z) * -1 ) )
			translateX( calc( (-50vw - var(--size-fishinsea) * 1) * (var(--z) + 1) ) );
	}
	50.01%{
		transform:
			translateZ( calc( var(--size-sea-perspective) * var(--z) * -1 ) )
			translateX( calc( (-50vw - var(--size-fishinsea) * 1) * (var(--z) + 1) ) )
			scaleX(-1);
		animation-timing-function: cubic-bezier(0.250, 0.500, .750, 0.500);
	}
	100% {
		transform:
			translateZ( calc( var(--size-sea-perspective) * var(--z) * -1 ) )
			translateX( calc( (50vw + var(--size-fishinsea) * 1) * (var(--z) + 1) ) )
			scaleX(-1);
	}
}
@keyframes dying {
	0% {
		background-color:transparent;
	}
	0.1%, 50% {
		background-color:var(--color-fishinsea-background-dying);
		color:inherit;
	}
	100% {
		background-color:transparent;
		color:transparent;
	}
}

@keyframes death {
	0% {
			transform:
				rotateX(.5turn);
	}
	100% {
		transform:
			translateY(calc( (10vh + 80vh * var(--y) + var(--size-fishinsea) ) * (var(--z) + 1) * -1 ))
			rotateX(.5turn);
		opacity:.5;
	}
}

@keyframes flip {
	0%{
		transform:
			scale(calc( (var(--z) + 1) ));
	}
	49.99%{
		transform:
			scale(calc( (var(--z) + 1) ));
	}
	50.01%{
		transform:
			rotateY(.5turn)
			scale(calc( (var(--z) + 1) ));
	}
	100% {
		transform:
			rotateY(.5turn)
			scale(calc( (var(--z) + 1) ));
	}
}

main > section:last-of-type button {
	/* base time * dept correction * fish variation */
	--time-swim:calc( 
		  var(--time-transition-swim)
			* (1 + var(--z)) 
			* (1 + (var(--t) - 0.5) * .5 )
		);

	--dy:calc(var(--size-white-space) * .5);
	--sp:calc(var(--size-white-space) * .5);
	
	--color-el-focus:currentcolor;

	position: absolute;
	top:calc(10vh + 80vh * var(--y) - var(--size-fishinsea) / 2);
	left:calc(50vw - var(--size-fishinsea) / 2);

	height:var(--size-fishinsea);
	aspect-ratio:1/1;
	margin:0;
	padding:0;
	display:grid;
	place-items:center;
	
	border-radius:50%;
	filter:var(--filter-sea-drop);

	font:inherit;
	color:inherit;

	transition: 0s;
	animation:
		swim var(--time-swim) calc(var(--time-swim) * -.85) infinite,
		dying var(--time-transition-dying) paused forwards;
	will-change: transform, opacity;

	pointer-events: all;
}

main > section:last-of-type button > span {
	position:absolute;
	bottom:110%;
	justify-self: center;
	
	opacity:0;

	line-height: 1.25em;

	pointer-events:none;
	transform-origin:center bottom;
	animation:flip var(--time-swim) calc(var(--time-swim) * -.85) infinite;
}

main > section:last-of-type button > span span {
	display:block;
}
main > section:last-of-type button > span span::before {
	content:"($";
}
main > section:last-of-type button > span span::after {
	content:")";
}

main > section:last-of-type button img {
	width:80%;
	height:auto;

	filter:
		saturate( calc( 1 - var(--z) * .25 ) ) 
		blur( calc( 1px * var(--z) * 3 ) )
		brightness( calc( 1 - var(--z) * .625 ) )
		contrast( calc( 1 - var(--z) * .25 ) );

	transition:transform var(--time-transition-dying);
}

/* hover and focus */
main > section:last-of-type :is(button:hover, button:focus) {
	box-shadow:inset var(--shadow-focus);
}

main > section:last-of-type :is(button:hover, button:focus)::after,
main > section:last-of-type button[disabled]::after {
	content:"☠";
	position: absolute;
	bottom:0%;
	font-size:4em;
	line-height:1em;
}

main > section:last-of-type :is(button:hover, button:focus) span {
	opacity:1;
}

/* dying */
main > section:last-of-type button[disabled] {
	animation-play-state: paused, running;
	pointer-events: none;
}

main > section:last-of-type :is(button[disabled]:hover, button[disabled]:focus) {
	box-shadow:none;
}

main > section:last-of-type button[disabled] img {
	filter:
		blur( calc( 1px * var(--z) * 3 ) )
		brightness( calc( 1 - var(--z) * .3125 ) )
		contrast( calc( 1 - var(--z) * .25 ) )
		grayscale( 1 )
		invert(1)
		opacity( .5 );

	transform: rotateX(.5turn);
}

[data-ghost-demo*="sharpGhosts"] main > section:last-of-type button[disabled] img {
	filter:
		brightness( calc( 1 - var(--z) * .3125 ) )
		contrast( calc( 1 - var(--z) * .25 ) )
		grayscale( 1 )
		invert(1)
		opacity( .5 );
}

main > section:last-of-type button[disabled] span {
	display:none;
}

/* death */
main > section:last-of-type button[disabled].death img {
	/* base time * y correction * dept correction  */
	animation: death calc( var(--time-transition-death) * (1 + (var(--y) - .5)) * (var(--z) + 1) ) ease-in forwards;
}