/* Public biolink page. Colours come from the profile through --accent, --text,
   --dim (background darkening) and --blur. */

/* No body background: it would paint over #bg and #particles, which sit at a
   negative z-index (html is already black). */
body {
	color: var(--text);
	overflow-x: hidden;
}

/* Small text in the accent colour: brightened if the accent is too dark to
   read on the page (see readableOnBlack in profile.ejs). */
.accent {
	color: var(--accent-bright, var(--accent));
}

/* Fonts the owner can pick. --font-display is the name and buttons. */
.font-heading { --font-display: var(--font-heading); }
.font-pixel   { --font-display: var(--font-pixel); --font-body: "Pixelify Sans", monospace; }
.font-mono    { --font-display: var(--font-mono); --font-body: var(--font-mono); }
.font-sans    { --font-display: "Chakra Petch", sans-serif; }

body {
	font-family: var(--font-body);
}

/* ------------------------------------------------ background */

#bg {
	position: fixed;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

#bg video,
#bg .img,
#bg .default {
	position: absolute;
	inset: calc(var(--blur) * -2);
	width: calc(100% + var(--blur) * 4);
	height: calc(100% + var(--blur) * 4);
	object-fit: cover;
	background-size: cover;
	background-position: center;
	filter: blur(var(--blur));
}

#bg .default {
	background:
		radial-gradient(ellipse at 50% 110%, rgba(var(--accent-rgb), 0.35), transparent 60%),
		repeating-linear-gradient(to right, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 48px),
		repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 48px),
		#000;
}

#bg .shade {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--dim));
}

#particles {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
}

/* ------------------------------------------------ enter screen */

#enter {
	position: fixed;
	inset: 0;
	z-index: 900;
	background-color: #000;
	cursor: pointer;
}

#enter h1 {
	font-family: var(--font-display, var(--font-heading));
	position: fixed;
	left: 0;
	right: 0;
	top: 28vh;
	margin: 0;
	padding: 0 5vw;
	text-align: center;
	font-family: var(--font-display);
	font-size: clamp(1.6em, 4vw, 3.2em);
	line-height: 1.3;
	color: #fff;
}

#enter .enter {
	position: fixed;
	top: 52vh;
	width: 100%;
	text-align: center;
	font-family: var(--font-display);
	font-size: 1.1em;
	letter-spacing: 4px;
	color: var(--accent-bright, var(--accent));
	text-shadow: 0 0 10px var(--accent-bright, var(--accent));
	animation: 1.2s enterBlink steps(2) infinite;
}

#enter.ready {
	animation: 1.7s enterHeat cubic-bezier(.82, .28, .93, .3) forwards;
}

#enter.ready h1 {
	animation: 1.7s typeHeat cubic-bezier(.82, .28, .93, .3) forwards;
}

#enter.ready .enter {
	display: none;
}

#enter.destroyed {
	transition: 1.2s;
	opacity: 0;
	pointer-events: none;
}

/* Blinks, but never so far that it can't be read. */
@keyframes enterBlink {
	0% { opacity: 1; }
	100% { opacity: 0.55; }
}

/* The screen warms up while the intro types, and the text glows but stays
   white, so it can be read all the way through. (profile.js sets the
   length to fit the text.) */
@keyframes enterHeat {
	0% { background-color: #000; }
	100% { background-color: #555; }
}

@keyframes typeHeat {
	0% { text-shadow: 0 0 0 #fff; color: #fff; }
	100% { text-shadow: 0 0 40px #fff, 0 0 12px #fff, 0 2px 4px #000; color: #fff; }
}

/* ------------------------------------------------ header */

#headerstatus {
	color: var(--accent-bright, var(--accent));
	text-shadow: 0 0 6px var(--accent);
}

#musicknob {
	margin-right: 0;
	border-right: 0;
}

/* Volume slider next to MUSIC. */
.volknob {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: default;
}

.volknob span {
	color: #888;
}

.volknob input {
	-webkit-appearance: none;
	appearance: none;
	width: 80px;
	height: 4px;
	margin: 0;
	background: linear-gradient(to right, var(--accent) var(--fill, 50%), #444 var(--fill, 50%));
	cursor: pointer;
}

.volknob input::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 8px;
	height: 14px;
	background: #fff;
	border: 0;
}

.volknob input::-moz-range-thumb {
	width: 8px;
	height: 14px;
	background: #fff;
	border: 0;
	border-radius: 0;
}

#musicknob[aria-pressed="true"] {
	color: var(--accent-bright, var(--accent));
	border-color: var(--accent-bright, var(--accent));
}

/* ------------------------------------------------ shared bits */

.name {
	font-family: var(--font-display);
	margin: 0;
	line-height: 1.2;
	word-break: break-word;
	text-shadow: 3px 6px #000, 0 -1px #000, 0 1px #000, -1px 0 #000, 1px 0 #000, -1px -1px #000, 1px 1px #000, -1px 1px #000, 1px -1px #000;
}

.glow .name {
	text-shadow: 3px 6px #000, 0 0 12px var(--accent), 0 0 32px var(--accent), 0 -1px #000, 0 1px #000, -1px 0 #000, 1px 0 #000;
}

/* Badges: a pill of coloured icons, with a tooltip on each. */
.badges {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 0.7em;
	padding: 5px 8px;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.layout-card .badges {
	justify-content: center;
}

.badge {
	position: relative;
	display: inline-flex;
	outline: none;
}

.badge i {
	display: block;
	width: 20px;
	height: 20px;
	background: var(--c);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	filter: drop-shadow(0 0 4px var(--c));
}

/* A badge with an uploaded picture instead of an icon. */
.badge i.pic {
	background: var(--pic) center / contain no-repeat;
	-webkit-mask-image: none;
	mask-image: none;
	filter: drop-shadow(0 0 3px var(--c));
}

.badge .tip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	z-index: 20;
	width: max-content;
	max-width: 200px;
	padding: 6px 9px;
	transform: translate(-50%, 4px);
	background: #000;
	border: 1px solid var(--c);
	color: #ddd;
	font-family: var(--font-body);
	font-size: 12px;
	line-height: 1.35;
	letter-spacing: 0;
	text-align: center;
	text-shadow: none;
	opacity: 0;
	pointer-events: none;
	transition: 0.15s;
}

.badge .tip b {
	color: var(--c);
	font-weight: 600;
}

.badge:hover .tip,
.badge:focus .tip {
	opacity: 1;
	transform: translate(-50%, 0);
}

.meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.4em;
	margin-top: 0.8em;
	font-family: var(--font-display);
	font-size: 0.72em;
	letter-spacing: 1px;
	color: #bbb;
	text-shadow: 1px 2px #000;
}

.meta .handle {
	color: var(--accent-bright, var(--accent));
}

.bio {
	max-width: 40em;
	margin: 1.4em auto;
	font-size: 1.1em;
	line-height: 1.5;
	white-space: pre-line;
}

.bio.typing::after {
	content: "_";
	color: var(--accent);
	animation: 1s blink steps(2) infinite;
}

.links {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 520px;
	margin: 1em auto;
}

.links .homebutton {
	display: block;
	width: 100%;
	font-family: var(--font-display);
	font-size: 1.05em;
	font-weight: 400;
	color: var(--accent);
	border-color: var(--accent);
	box-shadow: 0 6px var(--accent), 0 0 32px rgba(var(--accent-rgb), 0.3);
	margin: 0.45em 0 0.9em;
	padding: 0.55em 0.9em;
	word-break: break-word;
}

.links .homebutton:hover {
	background-color: var(--accent);
	color: #000;
}

.links .homebutton:active {
	box-shadow: 0 2px var(--accent), 0 0 32px rgba(var(--accent-rgb), 0.3);
}

.links .homebutton.white {
	color: #fff;
	border-color: #fff;
	box-shadow: 0 6px #fff, 0 0 32px rgba(255, 255, 255, 0.2);
}

.links .homebutton.white:hover {
	background-color: #fff;
	color: #000;
}

.socials {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 1.4em auto 0.6em;
}

/* Socials can sit under the name instead of under the links. */
.socials.under-name {
	justify-content: flex-start;
	gap: 8px;
	margin: 0.8em 0 0;
}

.layout-card .socials.under-name {
	justify-content: center;
}

.socials.under-name .social {
	width: 36px;
	height: 36px;
}

.socials.under-name .social img {
	width: 17px;
	height: 17px;
}

.social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid #fff;
	cursor: pointer;
	transition: 0.15s;
}

.social img {
	width: 20px;
	height: 20px;
	filter: invert(1);
}

.social:hover {
	background: var(--accent);
	border-color: var(--accent);
	box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.6);
	transform: translateY(-2px);
}

.social:hover img {
	filter: none;
}

.madewith {
	padding: 1.5em 1em 2.5em;
	text-align: center;
	font-family: var(--font-heading);
	font-size: 0.65em;
	letter-spacing: 2px;
	color: #777;
}

.madewith img {
	width: 20px;
	height: 20px;
	margin-right: 8px;
	vertical-align: -6px;
	border-radius: 50%;
	object-fit: cover;
}

.madewith a:hover {
	color: #fff;
}

/* ------------------------------------------------ wallpaper layout (like Mochi's home) */

#wallpaper {
	position: relative;
	height: 70vh;
	min-height: 420px;
}

#art {
	position: absolute;
	left: 10vw;
	bottom: 0;
	width: 280px;
	height: 280px;
	object-fit: cover;
	border: 1px solid #fff;
	border-bottom: 0;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

.identity {
	position: absolute;
	left: calc(10vw + 320px);
	right: 5vw;
	bottom: 60px;
}

.identity.no-art {
	left: 10vw;
}

/* Only the name card (no bio box): it fills the screen. */
.no-pane #wallpaper {
	height: calc(100vh - 4.5em);
}

/* "Center the name card": picture and name side by side in the middle. */
.center-card #wallpaper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	padding: 60px 5vw 20px;
}

.center-card #art {
	position: static;
	flex: none;
	border-bottom: 1px solid #fff;
	box-shadow: 0 6px var(--accent), 0 0 40px rgba(0, 0, 0, 0.6);
}

.center-card .identity,
.center-card .identity.no-art {
	position: static;
	min-width: 0;
	max-width: 46vw;
}

.center-card .identity.no-art {
	max-width: 90vw;
	text-align: center;
}

.center-card .identity.no-art .meta,
.center-card .identity.no-art .socials.under-name {
	justify-content: center;
}

.layout-wallpaper .name {
	font-size: clamp(2em, 4vw, 3.6em);
}

.layout-wallpaper .pane,
.layout-wallpaper .no-box {
	padding-top: 1.5em;
	padding-bottom: 2em;
}

/* Without the black box, text needs a shadow to stay readable. */
.no-box {
	text-shadow: 0 1px 3px #000, 0 0 12px rgba(0, 0, 0, 0.8);
}

.card.no-box {
	border-color: transparent;
	box-shadow: none;
	backdrop-filter: none;
}

.layout-wallpaper .seperator {
	background-image: repeating-linear-gradient(-45deg, var(--accent) 0 2px, transparent 2px 10px);
}

/* ------------------------------------------------ card layout */

.cardwrap {
	min-height: calc(100vh - 5em);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 16px 0;
}

.card {
	width: 100%;
	max-width: 560px;
	padding: 2.2em 2em 1.8em;
	text-align: center;
	border: 1px solid #fff;
	box-shadow: 0 8px var(--accent), 0 0 60px rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(6px);
}

.card .avatar {
	width: 128px;
	height: 128px;
	object-fit: cover;
	border: 1px solid #fff;
	box-shadow: 0 6px var(--accent);
	margin-bottom: 1.2em;
}

.layout-card .name {
	font-size: clamp(1.6em, 5vw, 2.4em);
}

.layout-card .meta {
	justify-content: center;
}

/* ------------------------------------------------ toast */

#toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 950;
	transform: translate(-50%, 20px);
	padding: 0.5em 1em;
	background: var(--accent);
	color: #000;
	font-family: var(--font-display);
	font-size: 0.8em;
	letter-spacing: 1px;
	opacity: 0;
	pointer-events: none;
	transition: 0.2s;
}

#toast.show {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (max-width: 800px) {
	.socials.under-name {
		justify-content: center;
	}

	#wallpaper,
	.no-pane #wallpaper {
		height: auto;
		min-height: 0;
		padding: 90px 5vw 30px;
		text-align: center;
	}

	#art {
		position: static;
		width: 180px;
		height: 180px;
		border-bottom: 1px solid #fff;
		box-shadow: 0 6px var(--accent);
		margin-bottom: 1.4em;
	}

	.identity,
	.identity.no-art {
		position: static;
	}

	.layout-wallpaper .meta {
		justify-content: center;
	}

	/* Centered name card on a phone: picture above the name, in the middle. */
	.center-card #wallpaper {
		flex-direction: column;
		gap: 0;
	}

	.center-card.no-pane #wallpaper {
		min-height: calc(100vh - 4.5em);
	}

	.center-card .identity,
	.center-card .identity.no-art {
		max-width: none;
		text-align: center;
	}

	.card {
		padding: 1.8em 1.1em 1.4em;
	}
}