/* Donor Perks: username effects
----------------------------------------
   Colour slots (set per member by core/name_fx.php, defaults below are the originals):
   --ink       main text colour (Glitch/Neon: the username colour, CRT: phosphor green)
   --ink-2/3   accent colours
   --ink-glow  main colour, see-through (glows)
   --ink-soft  main colour, dark and see-through (backgrounds)
   Sizes are the original effects' pixel values converted to em, so they scale with the text.
   The board's own font is kept so names fit in lines of text.
   New effect: add a ".dperk-fx-<name>" block here and register it in core/name_fx.php. */

.dperk-fx {
	--ink: currentColor;
	--ink-2: #ff4fd8;
	--ink-3: #4ff8ff;
	position: relative;
	display: inline-block;
}

/* 02 Glitchcore: RGB channel split with sliced jumps */
.dperk-fx-glitch {
	letter-spacing: .06em;
	color: var(--ink);
}

.dperk-fx-glitch::before,
.dperk-fx-glitch::after {
	content: attr(data-text);
	content: attr(data-text) / ""; /* not read out twice by screen readers, where supported */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	white-space: nowrap;
	pointer-events: none;
}

.dperk-fx-glitch::before {
	color: var(--ink-2);
	clip-path: inset(0 0 55% 0);
	animation: dperk-fx-glitch-a 2.6s steps(1) infinite;
}

.dperk-fx-glitch::after {
	color: var(--ink-3);
	clip-path: inset(45% 0 0 0);
	animation: dperk-fx-glitch-b 2.6s steps(1) infinite;
}

@keyframes dperk-fx-glitch-a {
	0%, 12%, 20%, 55%, 100% { transform: translate(0); opacity: 0; }
	13% { transform: translate(-.167em, -.067em); opacity: .9; }
	16% { transform: translate(.133em, .033em); opacity: .9; }
	48% { transform: translate(-.1em, .067em); opacity: .9; }
	51% { transform: translate(.067em, -.033em); opacity: .9; }
}

@keyframes dperk-fx-glitch-b {
	0%, 14%, 22%, 60%, 100% { transform: translate(0); opacity: 0; }
	15% { transform: translate(.167em, .067em); opacity: .9; }
	18% { transform: translate(-.133em, -.033em); opacity: .9; }
	52% { transform: translate(.1em, -.067em); opacity: .9; }
	56% { transform: translate(-.067em, .033em); opacity: .9; }
}

/* 04 Neon-Haus: buzzing neon sign with unstable tube flicker */
.dperk-fx-neon {
	letter-spacing: .14em;
	color: var(--ink);
	animation: dperk-fx-neon 3.2s linear infinite;
}

@keyframes dperk-fx-neon {
	0%, 18%, 21%, 24%, 100% {
		opacity: 1;
		text-shadow:
			0 0 .125em var(--ink),
			0 0 .344em var(--ink-2),
			0 0 .75em var(--ink-2),
			0 0 1.5em var(--ink-2);
	}
	19%, 22%, 62% {
		opacity: .35;
		text-shadow: none;
	}
	63%, 64.5% {
		opacity: .6;
		text-shadow: 0 0 .125em var(--ink-2);
	}
}

/* 20 Phosphor: CRT terminal, green glow, rolling scanlines, tube flicker */
.dperk-fx-crt {
	--ink: #4dff88;
	--ink-glow: rgba(77, 255, 136, .8);
	--ink-soft: rgba(19, 64, 34, .18);
	letter-spacing: .1em;
	padding: .15em .45em;
	color: var(--ink);
	text-shadow: 0 0 .27em var(--ink-glow);
	background: var(--ink-soft);
	border-radius: .15em;
	animation: dperk-fx-crt-flicker 3.4s steps(1) infinite;
}

.dperk-fx-crt::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: inherit;
	pointer-events: none;
	background: repeating-linear-gradient(0deg, transparent 0 .077em, rgba(0, 0, 0, .38) .077em .154em);
	animation: dperk-fx-crt-roll 6s linear infinite;
}

@keyframes dperk-fx-crt-flicker {
	0%, 6%, 100% { opacity: 1; }
	3% { opacity: .82; }
	4.5% { opacity: .95; transform: translateY(.04em); }
	70% { opacity: .9; }
	71% { opacity: 1; transform: none; }
}

@keyframes dperk-fx-crt-roll {
	to { background-position: 0 1.85em; }
}

/* ---- From text-effects.colorion.co (originals: 28–34px; px values converted to em) ----
   "color: … !important" where the original sets its own text colour: phpBB puts the
   username colour inline on the link, which would otherwise win. */

/* 67 Live: LED dot-matrix sign with a light sweep */
.dperk-fx-live {
	letter-spacing: .18em;
	color: color-mix(in srgb, var(--ink-2) 22%, transparent) !important;
	text-shadow: 0 0 1px color-mix(in srgb, var(--ink-2) 35%, transparent);
}

.dperk-fx-live::before,
.dperk-fx-live::after {
	content: attr(data-text);
	content: attr(data-text) / "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	white-space: nowrap;
	pointer-events: none;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

.dperk-fx-live::before {
	background: radial-gradient(circle closest-side, #fff 0 28%, var(--ink-2) 34% 62%, transparent 68%) 0 0 / .132em .132em;
	-webkit-background-clip: text;
	background-clip: text;
	filter: drop-shadow(0 0 .18em color-mix(in srgb, var(--ink-2) 70%, transparent)) drop-shadow(0 0 .47em color-mix(in srgb, var(--ink-2) 35%, transparent));
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 42%, transparent 68%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 42%, transparent 68%);
	-webkit-mask-size: 240% 100%;
	mask-size: 240% 100%;
	-webkit-mask-position: 120% 0;
	mask-position: 120% 0;
	animation: dperk-fx-live 2.1s linear infinite;
}

.dperk-fx-live::after {
	background: radial-gradient(circle closest-side, color-mix(in srgb, var(--ink-2) 55%, transparent) 0 55%, transparent 62%) 0 0 / .132em .132em;
	-webkit-background-clip: text;
	background-clip: text;
	opacity: .45;
}

@keyframes dperk-fx-live {
	to { -webkit-mask-position: -120% 0; mask-position: -120% 0; }
}

/* 49 Thermal: heat-map camera colours drifting through the letters */
.dperk-fx-thermal {
	letter-spacing: .08em;
	color: transparent !important;
	background:
		radial-gradient(circle at 20% 50%, #fff26d 0 8%, transparent 24%),
		radial-gradient(circle at 70% 40%, #ff4f8b 0 12%, transparent 28%),
		radial-gradient(circle at 44% 78%, var(--ink-3) 0 14%, transparent 32%),
		linear-gradient(90deg, #2d7dff, #36f0b2, #ffcf4a, #ff4f8b);
	background-size: 130% 130%, 150% 150%, 140% 140%, 260% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	animation: dperk-fx-thermal 3.5s ease-in-out infinite alternate;
}

@keyframes dperk-fx-thermal {
	0% { background-position: 0 0, 100% 20%, 40% 100%, 100% 0; filter: saturate(1); }
	100% { background-position: 100% 90%, 0 60%, 80% 0, -100% 0; filter: saturate(1.35); }
}

/* 36 Vapor: drifting blurred colour trails */
.dperk-fx-vapor {
	letter-spacing: .16em;
	color: var(--ink);
	text-shadow: 0 0 .375em color-mix(in srgb, var(--ink) 45%, transparent);
	animation: dperk-fx-vapor-main 2.8s ease-in-out infinite;
}

.dperk-fx-vapor::before,
.dperk-fx-vapor::after {
	content: attr(data-text);
	content: attr(data-text) / "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	white-space: nowrap;
	pointer-events: none;
	filter: blur(.0625em);
	opacity: .62;
}

.dperk-fx-vapor::before {
	color: var(--ink-2);
	animation: dperk-fx-vapor-a 2.8s ease-in-out infinite;
}

.dperk-fx-vapor::after {
	color: var(--ink-3);
	animation: dperk-fx-vapor-b 2.8s ease-in-out infinite;
}

@keyframes dperk-fx-vapor-main {
	0%, 100% { transform: translateX(-.094em); }
	50% { transform: translateX(.094em); }
}

@keyframes dperk-fx-vapor-a {
	0%, 100% { transform: translate(-.31em, .19em) scaleX(1.08); opacity: .22; }
	50% { transform: translate(-.56em, -.125em) scaleX(1.22); opacity: .58; }
}

@keyframes dperk-fx-vapor-b {
	0%, 100% { transform: translate(.31em, -.156em) scaleX(1.08); opacity: .2; }
	50% { transform: translate(.56em, .156em) scaleX(1.2); opacity: .56; }
}

/* 35 Draft: blueprint outline on a moving grid */
.dperk-fx-draft {
	letter-spacing: .1em;
	color: transparent !important;
	padding: .15em .45em;
	-webkit-text-stroke: 1px color-mix(in srgb, var(--ink-3) 80%, var(--ink));
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--ink-3) 22%, transparent) 1px, transparent 1px),
		linear-gradient(0deg, color-mix(in srgb, var(--ink-3) 18%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--ink-3) 42%, transparent), transparent 35% 65%, color-mix(in srgb, var(--ink-3) 42%, transparent));
	background-size: .43em .43em, .43em .43em, 240% 100%;
	background-position: 0 0, 0 0, 100% 0;
	border: 1px solid color-mix(in srgb, var(--ink-3) 42%, transparent);
	box-shadow: inset 0 0 .64em color-mix(in srgb, var(--ink-3) 18%, transparent);
	animation: dperk-fx-draft 4s linear infinite;
}

@keyframes dperk-fx-draft {
	to { background-position: .86em 0, 0 .86em, -100% 0; }
}

/* 31 Hologram: floating projection with split and scan lines */
.dperk-fx-hologram {
	letter-spacing: .12em;
	color: color-mix(in srgb, var(--ink-3) 72%, var(--ink)) !important;
	text-shadow: 0 0 .21em color-mix(in srgb, var(--ink-3) 60%, transparent), 0 0 .79em color-mix(in srgb, var(--ink-3) 45%, transparent);
	isolation: isolate;
	animation: dperk-fx-hologram-float 3.8s ease-in-out infinite;
}

.dperk-fx-hologram::before,
.dperk-fx-hologram::after {
	content: attr(data-text);
	content: attr(data-text) / "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	white-space: nowrap;
	pointer-events: none;
}

.dperk-fx-hologram::before {
	color: var(--ink-2);
	clip-path: inset(0 0 52% 0);
	opacity: .58;
	animation: dperk-fx-hologram-split 2.8s steps(1) infinite;
}

.dperk-fx-hologram::after {
	color: transparent;
	background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 70%, transparent) 0 .036em, transparent .036em .143em);
	-webkit-background-clip: text;
	background-clip: text;
	opacity: .48;
	animation: dperk-fx-hologram-lines 1.2s linear infinite;
}

@keyframes dperk-fx-hologram-float {
	0%, 100% { transform: translateY(.07em) skewX(0deg); filter: brightness(1); }
	50% { transform: translateY(-.14em) skewX(-3deg); filter: brightness(1.35); }
}

@keyframes dperk-fx-hologram-split {
	0%, 14%, 40%, 72%, 100% { transform: translateX(0); opacity: .22; }
	15% { transform: translateX(-.18em); opacity: .8; }
	17% { transform: translateX(.14em); opacity: .6; }
	74% { transform: translateX(.11em); opacity: .7; }
}

@keyframes dperk-fx-hologram-lines {
	to { background-position: 0 .43em; }
}

/* 29 Shadow: a sundial shadow circling the letters */
.dperk-fx-shadow {
	letter-spacing: .1em;
	color: var(--ink);
	animation: dperk-fx-shadow 5s linear infinite;
}

@keyframes dperk-fx-shadow {
	0%, 100% { text-shadow: .125em 0 var(--ink-2), .25em 0 color-mix(in srgb, var(--ink-2) 55%, transparent), .375em 0 color-mix(in srgb, var(--ink-2) 25%, transparent); }
	12.5% { text-shadow: .0875em .0875em var(--ink-2), .175em .175em color-mix(in srgb, var(--ink-2) 55%, transparent), .2625em .2625em color-mix(in srgb, var(--ink-2) 25%, transparent); }
	25% { text-shadow: 0 .125em var(--ink-2), 0 .25em color-mix(in srgb, var(--ink-2) 55%, transparent), 0 .375em color-mix(in srgb, var(--ink-2) 25%, transparent); }
	37.5% { text-shadow: -.0875em .0875em var(--ink-2), -.175em .175em color-mix(in srgb, var(--ink-2) 55%, transparent), -.2625em .2625em color-mix(in srgb, var(--ink-2) 25%, transparent); }
	50% { text-shadow: -.125em 0 var(--ink-2), -.25em 0 color-mix(in srgb, var(--ink-2) 55%, transparent), -.375em 0 color-mix(in srgb, var(--ink-2) 25%, transparent); }
	62.5% { text-shadow: -.0875em -.0875em var(--ink-2), -.175em -.175em color-mix(in srgb, var(--ink-2) 55%, transparent), -.2625em -.2625em color-mix(in srgb, var(--ink-2) 25%, transparent); }
	75% { text-shadow: 0 -.125em var(--ink-2), 0 -.25em color-mix(in srgb, var(--ink-2) 55%, transparent), 0 -.375em color-mix(in srgb, var(--ink-2) 25%, transparent); }
	87.5% { text-shadow: .0875em -.0875em var(--ink-2), .175em -.175em color-mix(in srgb, var(--ink-2) 55%, transparent), .2625em -.2625em color-mix(in srgb, var(--ink-2) 25%, transparent); }
}

/* 13 Echo: copies ripple outward and fade */
.dperk-fx-echo {
	letter-spacing: .12em;
	color: var(--ink);
}

.dperk-fx-echo::before,
.dperk-fx-echo::after {
	content: attr(data-text);
	content: attr(data-text) / "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	white-space: nowrap;
	pointer-events: none;
	animation: dperk-fx-echo 2s ease-out infinite;
}

.dperk-fx-echo::before {
	color: var(--ink-2);
}

.dperk-fx-echo::after {
	color: var(--ink-3);
	animation-delay: 1s;
}

@keyframes dperk-fx-echo {
	0% { opacity: .8; transform: scale(1); filter: blur(0); }
	100% { opacity: 0; transform: scale(1.9); filter: blur(.094em); }
}

/* 12 Ember: glowing coal with rising flame */
.dperk-fx-ember {
	letter-spacing: .1em;
	color: var(--ink, #ffd9a0);
	animation: dperk-fx-ember 1.7s ease-in-out infinite alternate;
}

@keyframes dperk-fx-ember {
	0% { text-shadow: 0 -.0625em .1875em #ffab40, 0 -.1875em .4375em #ff6d00, 0 -.375em .875em #dd2c00, 0 -.625em 1.375em rgba(213, 0, 0, .55); }
	100% { text-shadow: 0 -.094em .25em #ffc46b, 0 -.281em .625em #ff8f1f, 0 -.5625em 1.1875em #ff3d00, 0 -.9375em 1.875em rgba(213, 0, 0, .8); }
}

/* Members who asked their system for less motion get the colours without the animation */
@media (prefers-reduced-motion: reduce) {
	.dperk-fx,
	.dperk-fx::before,
	.dperk-fx::after {
		animation: none !important;
	}

	.dperk-fx-glitch::before,
	.dperk-fx-glitch::after,
	.dperk-fx-vapor::before,
	.dperk-fx-vapor::after,
	.dperk-fx-echo::before,
	.dperk-fx-echo::after {
		display: none;
	}
}

/* UCP effect picker (Edit profile) */
/* Equal columns (as many as fit), so the choices line up instead of wrapping raggedly */
.dperk-fx-choices {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
	gap: .55em 1.5em;
	align-items: center;
}

/* Radio, effect name and preview stay together on one line, names and previews in their own columns */
.dperk-fx-choices label {
	display: grid;
	grid-template-columns: auto 5.6em auto;
	/* Keep the columns at their own size: stretched, the spare width moved the radio and name
	   of options with a short or no preview (e.g. None) to the right */
	justify-content: start;
	justify-items: start;
	align-items: center;
	column-gap: .4em;
	margin: 0;
	padding-right: 0;
	white-space: nowrap;
}

.dperk-fx-choices .dperk-fx-preview {
	font-weight: bold;
	justify-self: start;
}

.dperk-fx-slot input[type="color"] {
	width: 3em;
	height: 1.8em;
	padding: 0;
	vertical-align: middle;
}