/* ====================================
	EXTEND
==================================== */

@layer extend {

/* =============
	SETTINGS
============= */

@font-face {
	font-family: "Overpass";
	font-weight: 100 900;
	font-style: normal;
	font-display: block;
	src:
		url("./fonts/Overpass-VariableFont_wght.woff2") format("woff2");
}
@font-face {
	font-family: "Overpass";
	font-weight: 100 900;
	font-style: italic;
	font-display: block;
	src:
		url("./fonts/Overpass-Italic-VariableFont_wght.woff2") format("woff2");
}

/* THEMES */

:root {
	--fore-colour: black;
	--back-colour: #89cff0;
	--hot-colour: #180070;
	--cold-colour: #6f003f;
}
@media (prefers-color-scheme: dark) {
	:root {
		--fore-colour: white;
		--back-colour: #181818;
		--hot-colour: #f070f0;
		--cold-colour: #f0c0f0;
	}
}

/* VARIABLES */

:root {
	--main-column-max-inline-size: 60ch;
}
body {
	font-family: "Overpass", sans-serif;
	image-rendering: pixelated;
}

/* ==============
	STRUCTURE
============== */

#banner {
	padding-block: 0;
	background-color: var(--back-colour);
	border-block-end-width: 1px;
	& [rel~="index"] {
		text-decoration-line: underline;
		text-decoration-thickness: 0.1em;
		text-decoration-style: solid;
		text-decoration-color: var(--fore-colour);
		text-underline-offset: 0.1em;
		font-size: 3.2em;
		font-weight: bold;
		color: color-mix(var(--fore-colour), var(--hot-colour));
	}
}

/* ============
	CONTENT
============ */

/* GENERAL */

a {
	color: var(--hot-colour);
	&:is(:visited, :active) {
		color: var(--cold-colour);
	}
	&:visited:active {
		color: var(--hot-colour);
	}
}

/* CONTROLS */

summary {
	color: var(--hot-colour);
}
[open] > summary {
	color: var(--cold-colour);
}
.text-input, select {
	border-width: 2px;
	border-color: color-mix(var(--fore-colour), var(--back-colour));
	border-radius: 1lh;
}
select {
	padding-block-start: 0.35em;
	padding-block-end: 0.15em;
}

/* ITEMS */

#items {
	gap: 3px;
	& > li {
		gap: unset;
		@media (min-width: 600px) {
			grid-template-columns: auto max-content;
			gap: 16px;
		}
		padding-block: 4px;
		padding-inline: 10px;
		&:not(:last-child) {
			border-block-end: 1px solid color-mix(var(--fore-colour) 35%, var(--back-colour));
		}
	}
	& a {
		text-underline-offset: 0.15em;
	}
}
.rating {
	color: var(--hot-colour);
}
.metadata {
	font-weight: normal;
	white-space: pre;
	font-size: 0.8em;
	color: color-mix(var(--fore-colour), var(--back-colour) 25%);
}

/* REVIEWS */

dl {
	display: grid;
	grid-template-columns: max-content auto;
	margin-block: 0;
	& > div {
		display: grid;
		grid-column: span 2;
		grid-template-columns: subgrid;
		column-gap: 1ch;
	}
	& dt {
		text-align: end;
		font-variant-caps: all-small-caps;
		font-weight: bold;
	}
	& dd {
		margin-inline-start: 0;
	}
}

/* ==========
	KIRBY
========== */

/* SMALL */

#banner [rel~="index"]::before,
#index-header::after,
#controls-container::before,
#index-footer::before,
#review-container > header::after,
summary::before {
	--frame: 0;
	content: "";
	block-size: var(--size);
	inline-size: auto;
	aspect-ratio: 1;
	background-image: url("./kirby-frames.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position-x: left calc(-1 * var(--frame) * var(--size));
}

#banner [rel~="index"]::before {
	--size: 64px;
	display: inline-block;
	vertical-align: -6px;
	margin-inline-end: 0.2em;
	animation-name: asleep;
	animation-direction: alternate;
	animation-duration: 3s;
	animation-delay: 0s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
#banner [rel~="index"]:hover::before {
	--wakeup-delay: 1s;
	animation-name: YOU-WOKE-HIM, awake;
	animation-duration: var(--wakeup-delay), 3s;
	animation-delay: 0s, var(--wakeup-delay);
	animation-direction: normal;
	animation-iteration-count: 1, infinite;
}
#index-header::after,
#controls-container::before,
#index-footer::before,
#review-container > header::after {
	--size: 32px;
	display: block;
	margin-inline: auto;
}
summary::before {
	--frame: 4;
	--size: 32px;
	display: inline-block;
	margin-inline-end: 0.2em;
	vertical-align: -0.4em;
}
[open] > summary::before {
	--frame: 5;
}
@keyframes asleep {
	0%,		40%		{ --frame: 0; }
	40.1%,	50%		{ --frame: 1; }
	50.1%,	60%		{ --frame: 2; }
	60.1%,	100%	{ --frame: 3; }
}
@keyframes YOU-WOKE-HIM {
	0%				{ --frame: 4; }
	15%,	100%	{ --frame: 5; }
}
@keyframes awake {
	0%,		30%		{ --frame: 7; }
	30.1%,	35%		{ --frame: 6; }
	35.1%,	92.5%	{ --frame: 7; }
	95%				{ --frame: 6; }
	97.5%			{ --frame: 7; }
	100%			{ --frame: 6; }
}

/*
	unfucking some spacing after replacing
	padding/border/margin with kirby spacer
*/

#index-header {
	margin-block-end: 0;
	padding-block-end: 0;
	border: unset;
}
#controls-container {
	padding-block-start: 0;
	border: unset;
	&::before {
		margin-block-end: var(--gap-size);
	}
}
#index-footer {
	padding-block-start: 0;
	border: unset;
	&::before {
		margin-block-end: var(--gap-size);
	}
}
#review-container > header {
	padding-block-end: 0;
	border: unset;
}

/* BIG */

body {
	--main-padding-inline: 16px;
	--shadow-inline-size: 256px;
	--kirby-colour-overlay: color-mix(transparent 20%, var(--back-colour));
	--shadow-outer-stop: calc(
		var(--main-column-max-inline-size) / 2
		+ var(--main-padding-inline)
		+ var(--shadow-inline-size)
	);
	--shadow-inner-stop: calc(
		var(--main-column-max-inline-size) / 2
		+ var(--main-padding-inline)
	);
	background-image:
		linear-gradient(
			to right,
			transparent calc(50% - var(--shadow-outer-stop)),
			var(--back-colour) calc(50% - var(--shadow-inner-stop)) calc(50% + var(--shadow-inner-stop)),
			transparent calc(50% + var(--shadow-outer-stop))
		),
		linear-gradient(
			to right,
			var(--kirby-colour-overlay),
			var(--kirby-colour-overlay)
		),
		url("./kirby-background.png");
	background-position: top center;
	background-size: 100%, 100%, 192px;
}

/* ===================== END EXTEND */ }