/* ================== ================== ================== ================== */
/* ================== Themes */
/* ================== ================== ================== ================== */
@media (hover: hover) {
	html[class*="theme--"][class*="theme--"] {
		background-attachment: fixed;
	}
}

.theme--ethan {
	--theme-shade: var(--ethan-shade);
	--theme-glare: var(--ethan-glare);
}

.theme--justina {
	--theme-shade: var(--justina-shade);
	--theme-glare: var(--justina-glare);
}

.theme--jordan {
	--theme-shade: var(--jordan-shade);
	--theme-glare: var(--jordan-glare);
}

.theme--gorzon {
	--theme-shade: var(--gorzon-shade);
	--theme-glare: var(--gorzon-glare);
}
/* ================== ================== ================== ================== */
/* ================== Background patterns */
/* ================== ================== ================== ================== */
html.theme--ethan body {
	background:
		linear-gradient(atan(-.5), var(--c1) 33%,
			var(--c2) 33.5% 66.5%,
			var(--c1) 67%) 0/var(--s) var(--s);
}

html.theme--justina body {
	background:
		conic-gradient(from 30deg at 80%,
			var(--c1) 60deg, var(--c2) 0 120deg, #0000 0),
		conic-gradient(from -30deg,
			var(--c2) 120deg, var(--c1) 0 240deg,
			var(--c2) 0 300deg, var(--c1) 0);
	background-size: calc(3*var(--s)/2) var(--s);
}

html.theme--jordan body {
	--_g: var(--c2) 90deg, #0000 90.5deg;
	background:
		conic-gradient(from -45deg, var(--_g)),
		conic-gradient(from 135deg, var(--_g)) calc(var(--s)/2) 0,
		var(--c1);
	background-size: var(--s) var(--s)
}

html.theme--gorzon body {
	background:
		conic-gradient(var(--c2) atan(2), var(--c1) 0 calc(180deg - atan(2)),
			var(--c2) 0 180deg, var(--c1) 0 calc(180deg + atan(2)),
			var(--c2) 0 calc(360deg - atan(2)), var(--c1) 0);
	background-size: calc(2*var(--s)) var(--s);
}

/* ================== ================== ================== ================== */
/* ================== Base */
/* ================== ================== ================== ================== */
:focus {
	outline: none;
}

:focus-visible {
	outline-width: var(--thickness-base);
	outline-style: solid;
	outline-color: currentColor;
	outline-offset: var(--thickness-base);
}

html {
	font-size: var(--font-size-base-percentage);
}

html,
body {
	color: var(--theme-glare);
	font-family: var(--font-sans);
	font-weight: var(--font-weight-base);
	line-height: var(--line-height-base);
}

body {
	font-size: var(--font-size-base);
	display: flex;
	flex-direction: column;
}

main {
	flex-grow: 1;
}

h1 {
	font-size: 2rem;
}

h2 {
	font-size: 1.5rem;
}

p {
	margin: 0;
}

.live {
	display: inline-block;
	animation: wiggle 1s var(--ease-in-out) infinite alternate;
	padding-inline: var(--space-near);
	transform: rotate(6deg);
	border-radius: var(--border-radius-base);
	margin-block: var(--space-n-near);
}

@keyframes wiggle {
	100% {
		transform: rotate(-6deg);
	}
}

.section-wrapper {
	display: block;
	padding-inline: var(--space-away);
	padding-block: var(--space-away);
	position: relative;
}

.section-wrapper + .section-wrapper {
	border-block-start: var(--thickness-base) solid var(--theme-glare-edge);
	box-shadow: 0 var(--thickness-n-base) var(--theme-shade-edge);
}

.section {
	display: block;
	margin-inline: auto;
	max-inline-size: 35rem;
}

.section-wrapper {
	padding-block: calc(var(--space-away) * 4);
}

/* ================== ================== ================== ================== */
/* ================== Font size */
/* ================== ================== ================== ================== */
.font-size-min {
	font-size: var(--font-size-min);
}

.font-size-small {
	font-size: var(--font-size-small);
}

.font-size-base {
	font-size: var(--font-size-base);
}

/* ================== ================== ================== ================== */
/* ================== Variants */
/* ================== ================== ================== ================== */
.solid,
.outline {
	background-color: var(--bg);
	color: var(--fg);
	border-color: var(--oc);
	border-width: var(--thickness-base);
	border-style: solid;
	background-origin: border-box; /* Extend background under transparent border */
}

.solid {
	--bg: var(--theme-glare);
	--fg: var(--theme-shade);
	--oc: transparent;
}

.outline {
	--bg: var(--theme-glare-skrim);
	--fg: var(--theme-glare);
	--oc: var(--theme-glare);
	background-clip: padding-box; /* Prevent transparent border from overlapping with transparent background-image */
}

/* ================== ================== ================== ================== */
/* ================== Button */
/* ================== ================== ================== ================== */
.button {
	-webkit-touch-callout: none;
	display: inline-flex;
	padding: var(--space-near);
	background-color: var(--bg);
	color: var(--fg);
	border: var(--thickness-base) solid var(--oc);
	text-decoration: none;
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	justify-content: center;
	align-items: center;
	gap: var(--space-near);
	text-align: start;
	border-radius: var(--border-radius-base);
	box-shadow: var(--theme-shadow-base);
	transition: transform var(--theme-transition-duration) var(--theme-transition-timing);
}

.button svg {
	inline-size: 1.5em;
	block-size: auto;
	flex-shrink: 0;
}

.button:focus-visible {
	outline-offset: calc(var(--thickness-n-base) * 3);
}

.button:active {
	transform: scale(.98);
}

/* ================== ================== ================== ================== */
/* ================== Switcher */
/* ================== ================== ================== ================== */
.switcher {
	--switcher-viewport: 40rem;
	--switcher-gap: 2rem;
	--switcher-threshold: calc(var(--switcher-viewport) - var(--switcher-gap));
	display: flex;
	flex-wrap: wrap;
	gap: var(--switcher-gap);
}

.switcher > * {
	flex-grow: 1;
	flex-basis: calc((var(--switcher-threshold) - 100%) * 999);
	min-inline-size: 0;
}

/* ================== ================== ================== ================== */
/* ================== Stack */
/* ================== ================== ================== ================== */
.stack {
	--flow: var(--space-away);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.stack > * {
	margin-block-start: 0;
}

.stack > * + * {
	margin-block-start: var(--flow);
}

/* ================== ================== ================== ================== */
/* ================== Swap */
/* ================== ================== ================== ================== */
.swap {
	--swap-gap: var(--space-near);
	display: flex;
	flex-wrap: wrap;
	gap: var(--swap-gap);
	flex-basis: 100%;
}

.swap > * {
	flex-grow: 1;
	flex-shrink: 1;
	min-inline-size: fit-content;
	inline-size: calc(50% - var(--swap-gap));
}

.swap > *:first-of-type {
	inline-size: calc(50% - var(--swap-gap));
}

.swap > :nth-last-child(n+3),
.swap > :nth-last-child(n+3) ~ * {
	flex-basis: 100%;
}

/* ================== ================== ================== ================== */
/* ================== Cool pics */
/* ================== ================== ================== ================== */
.jordans-cool-pics-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-away);
}

.jordans-cool-pics-grid img {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--border-radius-base);
	box-shadow: var(--theme-shadow-base);
}

.jordans-cool-pics-grid img:nth-child(2n) {
	grid-column: span 2;
	align-self: end;
}

.jordans-cool-pics-grid img:nth-child(3n) {
	grid-column: span 1;
}

.jordans-cool-pics-grid img:nth-child(5n) {
	grid-column: span 2;
}

.jordans-cool-pics-grid img:nth-child(7n) {
	grid-column: span 1;
}

.jordans-cool-pics-grid img:nth-child(11n) {
	grid-column: span 2;
}

/* ================== ================== ================== ================== */
/* ================== Links */
/* ================== ================== ================== ================== */
a:not(.button) {
	text-decoration-skip-ink: auto;
	text-decoration: underline;
	color: var(--theme-glare-max);
	text-decoration-color: var(--theme-glare);
	text-decoration-thickness: var(--thickness-base);
	text-underline-offset: var(--thickness-base);
	font-weight: var(--font-weight-bold);
	-webkit-box-decoration-break: slice;
	box-decoration-break: slice;
}

/* ================== ================== ================== ================== */
/* ================== Music */
/* ================== ================== ================== ================== */
button[data-state="paused"] [data-icon="play"] {
	display: none;
}

button[data-state="playing"] [data-icon="pause"] {
	display: none;
}

/* ================== ================== ================== ================== */
/* ================== Back to top */
/* ================== ================== ================== ================== */
.back-to-top {
	position: fixed;
	inset-inline-end: var(--space-away);
	inset-block-end: var(--space-away);
	z-index: 10;
}

body:has(.back-to-top) footer .section {
	padding-inline-end: calc(var(--space-away) * 4);
}

/* ================== ================== ================== ================== */
/* ================== Nav */
/* ================== ================== ================== ================== */
.section-wrapper--nav {
	padding-block: var(--space-away);
}

/* ================== ================== ================== ================== */
/* ================== Footer */
/* ================== ================== ================== ================== */
.section-wrapper--footer {
	padding-block: var(--space-away);
}

.footer__icons .footer__a {
	color: currentColor;
	display: inline-flex;
	flex-shrink: 0;
}

.footer__icons .footer__a svg {
	inline-size: 1.5em;
	block-size: auto;
	flex-shrink: 0;
}

.footer__icons {
	display: flex;
	flex-direction: row;
	gap: var(--space-near);
}

#hitCounter {
	display: flex;
	flex-direction: row;
	gap: var(--thickness-base);
	font-weight: var(--font-weight-bold);
	font-family: var(--font-mono);
}

#hitCounter div {
	display: flex;
	min-block-size: calc(2 * var(--space-away));
	min-inline-size: var(--space-away);
	flex-shrink: 0;
	min-block-size: calc(var(--space-away) * 2);
	justify-content: center;
	align-items: center;
}

/* ================== ================== ================== ================== */
/* ================== Cluster */
/* ================== ================== ================== ================== */
.cluster {
	--cluster-gap: var(--space-near);
	display: flex;
	flex-wrap: wrap;
	gap: var(--cluster-gap);
	justify-content: start;
	align-items: center;
}

/* ================== ================== ================== ================== */
/* ================== Psuedo element text */
/* ================== ================== ================== ================== */
.new::after {
	content: "NEW";
	display: inline-block;
	transform: rotate(-6deg);
	border-radius: var(--border-radius-base);
	margin-block: var(--space-n-near);
	translate: 0 var(--space-n-near);
	font-size: var(--font-size-min);
	color: var(--theme-glare);
}

/* ================== ================== ================== ================== */
/* ================== Alert bar */
/* ================== ================== ================== ================== */
.section-wrapper--alert-bar {
	padding-block: 0;
}

.alert-bar {
	display: flex;
	align-items: center;
	justify-content: start;
	flex-wrap: wrap;
	font-size: var(--font-size-small);
	font-family: var(--font-mono);
	font-weight: var(--font-weight-bold);
	column-gap: var(--space-near);
}

.countdown__time {
	scale: 0;
	transition: scale var(--theme-transition-duration) var(--theme-transition-timing);
}

.countdown__time[data-visible="true"] {
	scale: 1;
}