/*
Theme Name: Brain Broke Bezoar
Description: Holding page — one giant sign.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: brain-broke-bezoar
*/

:root {
	--bg: #050505;
	--ink: #e9e6df;
	--dim: #8a8780;
	--split-a: #ff1f3d;
	--split-b: #00e5ff;
	/* Sized against both axes so the three-line stack always fits the screen. */
	--size: min(27vw, 25vh);
}

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

html,
body {
	margin: 0;
	height: 100%;
}

body {
	background: var(--bg);
	color: var(--ink);
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

/* Film grain */
body::before {
	content: "";
	position: fixed;
	inset: -50%;
	z-index: 2;
	pointer-events: none;
	opacity: 0.09;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: grain 0.6s steps(4) infinite;
}

/* Scanlines + vignette */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background:
		repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px),
		radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.85) 100%);
}

.sign {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4vh 16px;
	text-align: center;
}

.sign__name {
	margin: 0;
	font-family: "Anton", "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
	font-weight: 400;
	font-size: var(--size);
	line-height: 0.86;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	animation: flicker 7s infinite;
}

.sign__word {
	position: relative;
	display: block;
}

/* Chromatic-split ghost copies that tear apart in bursts */
.sign__word::before,
.sign__word::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	mix-blend-mode: screen;
	opacity: 0;
}

.sign__word::before {
	color: var(--split-a);
	animation: tear-a 4.3s infinite steps(1);
}

.sign__word::after {
	color: var(--split-b);
	animation: tear-b 4.3s infinite steps(1);
}

.sign__word:nth-child(2)::before,
.sign__word:nth-child(2)::after {
	animation-delay: -1.7s;
	animation-duration: 5.9s;
}

.sign__word:nth-child(3)::before,
.sign__word:nth-child(3)::after {
	animation-delay: -3.1s;
	animation-duration: 3.7s;
}

.sign__tag {
	margin: 4vh 0 0;
	font-family: "JetBrains Mono", ui-monospace, "Consolas", monospace;
	font-weight: 200;
	font-size: clamp(0.75rem, 1.4vw, 1.15rem);
	letter-spacing: 0.5em;
	text-transform: uppercase;
	color: var(--dim);
	/* Offset the trailing letter-spacing so the line looks centred */
	padding-left: 0.5em;
}

@keyframes tear-a {
	0%, 100% { opacity: 0; transform: none; clip-path: none; }
	90% { opacity: 0.9; transform: translate(-0.035em, 0.01em); clip-path: inset(10% 0 55% 0); }
	92% { opacity: 0.9; transform: translate(0.05em, 0); clip-path: inset(60% 0 8% 0); }
	94% { opacity: 0.9; transform: translate(-0.02em, -0.01em); clip-path: inset(35% 0 40% 0); }
	96% { opacity: 0; }
}

@keyframes tear-b {
	0%, 100% { opacity: 0; transform: none; clip-path: none; }
	90% { opacity: 0.9; transform: translate(0.035em, -0.01em); clip-path: inset(50% 0 20% 0); }
	92% { opacity: 0.9; transform: translate(-0.05em, 0); clip-path: inset(5% 0 70% 0); }
	94% { opacity: 0.9; transform: translate(0.02em, 0.01em); clip-path: inset(70% 0 2% 0); }
	96% { opacity: 0; }
}

@keyframes flicker {
	0%, 100% { opacity: 1; }
	41% { opacity: 1; }
	42% { opacity: 0.35; }
	43% { opacity: 1; }
	44% { opacity: 0.6; }
	45% { opacity: 1; }
	78% { opacity: 1; }
	78.5% { opacity: 0.2; }
	79% { opacity: 1; }
}

@keyframes grain {
	0% { transform: translate(0, 0); }
	25% { transform: translate(-5%, 3%); }
	50% { transform: translate(4%, -6%); }
	75% { transform: translate(-3%, 5%); }
	100% { transform: translate(2%, -2%); }
}

@media (prefers-reduced-motion: reduce) {
	body::before,
	.sign__name,
	.sign__word::before,
	.sign__word::after {
		animation: none;
	}
}

/* Keep the admin bar from pushing the sign off-centre when logged in */
.admin-bar .sign {
	min-height: calc(100vh - 32px);
	min-height: calc(100dvh - 32px);
}

@media (max-width: 782px) {
	.admin-bar .sign {
		min-height: calc(100vh - 46px);
		min-height: calc(100dvh - 46px);
	}
}