/*
 * The "Whitelist" menu button (Whitelist app: FrontNavigation/Whitelist, class bbWhitelistNav), on every page.
 * Styled as a spell waiting to be cast:
 *  - always: a band of lilac light circling the button's edge, a breathing aura, glowing lettering with a
 *    passing shine, and glyphs (alchemical signs, Glagolitic letters, runes) floating around it
 *  - on hover: a magic circle ignites behind it (a ring of runes turning one way, a hexagram the other),
 *    the glyphs scatter outward and flare, a shockwave ring pulses out once, and the lettering blazes
 * nav.js adds the glyphs and the magic circle (.bbWl). Pastel arcane purple; a deeper violet on light colour schemes.
 * Anyone who prefers reduced motion gets it still.
 */

/* Only the characters used, so the downloads are tiny (alchemical signs, Glagolitic, runes) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols&family=Noto+Sans+Glagolitic&family=Noto+Sans+Runic&display=swap&text=%20%E1%9A%A0%E1%9A%A2%E1%9A%A6%E1%9A%A8%E1%9A%B1%E1%9A%B2%E1%9A%B7%E1%9A%B9%E1%9A%BA%E1%9A%BE%E1%9B%81%E1%9B%83%E1%9B%87%E1%9B%88%E1%9B%89%E1%9B%8A%E1%9B%8F%E1%9B%92%E1%9B%96%E1%9B%97%E1%9B%9A%E1%9B%9C%E1%9B%9E%E1%9B%9F%E2%9C%A6%E2%B0%80%E2%B0%86%E2%B0%8E%E2%B0%99%F0%9F%9C%81%F0%9F%9C%82%F0%9F%9C%83%F0%9F%9C%84%F0%9F%9C%8D%F0%9F%9C%94%F0%9F%9C%9A');

@property --wl-angle {
	syntax: '<angle>';
	inherits: true;
	initial-value: 0deg;
}

li.bbWhitelistNav {
	/* Pastel arcane purple: lavender light, a pink-lilac edge, near-white highlights */
	--wl-glow: hsl(268 90% 80%);
	--wl-glow-hi: hsl(280 100% 93%);
	--wl-glow-alt: hsl(305 85% 84%);
	--wl-text: hsl(270 100% 88%);
	--wl-glyph-font: 'Noto Sans Symbols', 'Noto Sans Glagolitic', 'Noto Sans Runic', 'Segoe UI Historic', 'Segoe UI Symbol', 'Apple Symbols', serif;
	/* The circling arc: mostly dark, one bright stretch */
	--wl-arc: conic-gradient(from var(--wl-angle),
		transparent 0deg, transparent 200deg,
		color-mix(in srgb, var(--wl-glow) 60%, transparent) 250deg,
		var(--wl-glow-alt) 300deg, var(--wl-glow-hi) 325deg, var(--wl-glow) 345deg,
		transparent 360deg);
	position: relative;
	/* Own stacking layer: the magic circle and glow sit behind the button but in front of the header */
	isolation: isolate;
	animation: bbWlSpin 3.2s linear infinite;
}

/* Light colour scheme: deeper violet so it reads on a pale header */
html[data-ips-scheme-active="light"] li.bbWhitelistNav {
	--wl-glow: hsl(268 70% 62%);
	--wl-glow-hi: hsl(275 85% 78%);
	--wl-glow-alt: hsl(305 60% 66%);
	--wl-text: hsl(268 60% 38%);
}
html[data-ips-scheme-active="light"] li.bbWhitelistNav > a {
	background:
		radial-gradient(120% 140% at 50% 120%, color-mix(in srgb, var(--wl-glow) 25%, transparent), transparent 70%),
		hsl(270 100% 97%) !important;
}

li.bbWhitelistNav > a {
	position: relative;
	isolation: isolate;
	color: var(--wl-text) !important;
	background:
		radial-gradient(120% 140% at 50% 120%, color-mix(in srgb, var(--wl-glow) 30%, transparent), transparent 70%),
		color-mix(in srgb, hsl(268 45% 14%) 75%, transparent) !important;
	box-shadow: 0 0 10px color-mix(in srgb, var(--wl-glow) 25%, transparent);
	animation: bbWlAura 3.6s ease-in-out infinite;
	transition: transform .25s ease, filter .25s ease;
}

li.bbWhitelistNav > a:hover,
li.bbWhitelistNav > a:focus-visible {
	transform: translateY(-1px);
	filter: brightness(1.15);
}

/* The arcane border: a faint lavender rim with the bright arc running round it (a ring cut out with a mask) */
li.bbWhitelistNav > a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: 1.5px;
	border-radius: inherit;
	background: var(--wl-arc), linear-gradient(color-mix(in srgb, var(--wl-glow) 35%, transparent) 0 0);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	pointer-events: none;
}

/* The arc's glow, just outside the button */
li.bbWhitelistNav::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: var(--i-nav--bo-ra, 8px);
	background: var(--wl-arc);
	filter: blur(7px);
	opacity: .75;
	pointer-events: none;
}

/* Gold lettering with a light sweeping across it */
li.bbWhitelistNav .ipsNavBar__label {
	font-weight: 650;
	letter-spacing: .03em;
	background: linear-gradient(100deg, var(--wl-text) 0%, var(--wl-text) 38%, var(--wl-glow-alt) 46%, #fff 50%, var(--wl-glow-alt) 54%, var(--wl-text) 62%, var(--wl-text) 100%);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: bbWlSheen 5s ease-in-out infinite;
	transition: filter .3s ease;
}

/* No icon: the lettering and the glyphs around it carry the button */
li.bbWhitelistNav .ipsNavBar__icon {
	display: none;
}

/* ---------------------------------------------------------------- the layers nav.js adds */

.bbWl {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Floating glyphs: the outer span is placed (and flies outward on hover), the inner one drifts */
.bbWl__glyph {
	position: absolute;
	z-index: 2;
	transform: translate(-50%, -50%);
	font: 400 var(--size, 11px)/1 var(--wl-glyph-font);
	color: var(--wl-glow-hi);
	text-shadow: 0 0 5px var(--wl-glow), 0 0 10px color-mix(in srgb, var(--wl-glow) 50%, transparent);
	transition: transform .7s cubic-bezier(.2, .9, .25, 1.2), filter .4s ease;
}
.bbWl__glyph > span {
	display: block;
	opacity: 0;
	animation: bbWlFloat var(--dur, 6s) ease-in-out var(--delay, 0s) infinite;
}

/* The magic circle behind the button */
.bbWl__sigil {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: -2;
	width: min(calc(100% + 34px), 150px);
	aspect-ratio: 1;
	opacity: 0;
	transform: translate(-50%, -50%) scale(.45) rotate(-30deg);
	transition: opacity .45s ease, transform .8s cubic-bezier(.2, .9, .25, 1.15);
	filter: drop-shadow(0 0 3px var(--wl-glow)) drop-shadow(0 0 8px color-mix(in srgb, var(--wl-glow) 60%, transparent));
}
.bbWl__sigil svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.bbWl__line { fill: none; stroke: var(--wl-glow); stroke-width: 1.4; }
.bbWl__line--thin { stroke-width: .8; stroke: color-mix(in srgb, var(--wl-glow) 75%, transparent); }
.bbWl__node { fill: var(--wl-glow-alt); }
.bbWl__ringText { fill: var(--wl-glow-hi); font: 400 11px var(--wl-glyph-font); }
.bbWl__outer, .bbWl__inner { transform-box: view-box; transform-origin: 100px 100px; }
.bbWl__outer { animation: bbWlTurn 24s linear infinite; }
.bbWl__inner { animation: bbWlTurn 16s linear infinite reverse; }

/* The shockwave ring */
.bbWl__shock {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: var(--i-nav--bo-ra, 8px);
	box-shadow: 0 0 0 2px var(--wl-glow-hi), 0 0 14px var(--wl-glow);
	opacity: 0;
}

/* ---------------------------------------------------------------- hover: the spell is cast */

li.bbWhitelistNav:is(:hover, :focus-within) { animation-duration: 1.2s; }
li.bbWhitelistNav:is(:hover, :focus-within) .ipsNavBar__label {
	filter: drop-shadow(0 0 4px var(--wl-glow)) drop-shadow(0 0 10px color-mix(in srgb, var(--wl-glow) 60%, transparent));
}
li.bbWhitelistNav:is(:hover, :focus-within) .bbWl__sigil {
	opacity: .95;
	transform: translate(-50%, -50%) scale(1) rotate(0deg);
}
li.bbWhitelistNav:is(:hover, :focus-within) .bbWl__shock {
	animation: bbWlShock .8s ease-out;
}
li.bbWhitelistNav:is(:hover, :focus-within) .bbWl__glyph {
	transform: translate(calc(-50% + var(--hx, 0px)), calc(-50% + var(--hy, 0px))) scale(1.3);
	filter: brightness(1.4);
}
li.bbWhitelistNav:is(:hover, :focus-within) .bbWl__glyph > span {
	animation: bbWlFlare 1.6s ease-in-out var(--delay, 0s) infinite;
}

/* The page itself is open: steady glow, no breathing */
li.bbWhitelistNav[data-active] > a {
	animation: none;
	box-shadow: 0 0 14px color-mix(in srgb, var(--wl-glow) 45%, transparent);
}

/* ---------------------------------------------------------------- phones (copies made by nav.js) */

/* In the phone header, beside Sign In: the same button, sized like the header's own buttons */
.ipsMobileNavIcons li.bbWhitelistNav--mobile {
	display: flex;
	align-items: center;
	border-radius: 8px;
	--i-nav--bo-ra: 8px;
	margin-inline: .5em .35em;
}
.ipsMobileNavIcons li.bbWhitelistNav--mobile > a {
	display: inline-flex;
	align-items: center;
	padding: .55em .85em;
	border-radius: inherit;
	font-size: .78rem;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
}
.ipsMobileNavIcons li.bbWhitelistNav--mobile .bbWl__glyph { --size: 9px; }
/* Make room: the site name shortens with "…" rather than running under the button */
.ipsMobileHeader:has(.bbWhitelistNav--mobile) .ipsLogo { min-width: 0; flex-shrink: 1; overflow: hidden; }
.ipsMobileHeader:has(.bbWhitelistNav--mobile) .ipsLogo__text { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.ipsMobileHeader:has(.bbWhitelistNav--mobile) .ipsLogo__name { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ipsMobileHeader:has(.bbWhitelistNav--mobile) .ipsMobileNavIcons { flex-shrink: 0; }
@media (max-width: 400px) {
	.ipsMobileNavIcons li.bbWhitelistNav--mobile .bbWl__lastWord { display: none; }
	.ipsMobileNavIcons li.bbWhitelistNav--mobile > a { padding: .55em .75em; }
}
/* Hidden where the header bar itself is (desktop widths) */
@media (min-width: 980px) {
	.ipsMobileNavIcons li.bbWhitelistNav--mobile { display: none; }
}

/* The Menu drawer's entry: lilac lettering with the shine, and a soft glowing edge */
.ipsOffCanvas li.bbWhitelistNav--drawer > a {
	--wl-glow: hsl(268 90% 80%);
	--wl-glow-hi: hsl(280 100% 93%);
	--wl-glow-alt: hsl(305 85% 84%);
	--wl-text: hsl(270 100% 88%);
	border-radius: 8px;
	background: radial-gradient(120% 140% at 50% 120%, color-mix(in srgb, var(--wl-glow) 22%, transparent), transparent 70%);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wl-glow) 40%, transparent), 0 0 12px color-mix(in srgb, var(--wl-glow) 25%, transparent);
	animation: bbWlAura 3.6s ease-in-out infinite;
}
html[data-ips-scheme-active="light"] .ipsOffCanvas li.bbWhitelistNav--drawer > a {
	--wl-glow: hsl(268 70% 62%);
	--wl-glow-hi: hsl(275 85% 78%);
	--wl-glow-alt: hsl(305 60% 66%);
	--wl-text: hsl(268 60% 38%);
}
.ipsOffCanvas li.bbWhitelistNav--drawer .ipsOffCanvas__icon { color: var(--wl-glow); }
.ipsOffCanvas li.bbWhitelistNav--drawer .ipsOffCanvas__label {
	font-weight: 650;
	background: linear-gradient(100deg, var(--wl-text) 0%, var(--wl-text) 38%, var(--wl-glow-alt) 46%, #fff 50%, var(--wl-glow-alt) 54%, var(--wl-text) 62%, var(--wl-text) 100%);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: bbWlSheen 5s ease-in-out infinite;
}

/* ---------------------------------------------------------------- animations */

@keyframes bbWlSpin { to { --wl-angle: 360deg; } }
@keyframes bbWlTurn { to { transform: rotate(360deg); } }
@keyframes bbWlAura {
	0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--wl-glow) 18%, transparent); }
	50% { box-shadow: 0 0 18px color-mix(in srgb, var(--wl-glow) 40%, transparent), 0 0 34px color-mix(in srgb, var(--wl-glow) 14%, transparent); }
}
@keyframes bbWlSheen {
	0%, 55% { background-position: 100% 0; }
	85%, 100% { background-position: 0 0; }
}
/* A glyph fades in low, rises a little while turning, and fades out */
@keyframes bbWlFloat {
	0% { opacity: 0; transform: translate(0, 5px) rotate(0deg) scale(.7); }
	25% { opacity: .8; }
	70% { opacity: .55; }
	100% { opacity: 0; transform: translate(var(--drift, 0px), -9px) rotate(var(--spin, 0deg)) scale(1); }
}
/* Cast: every glyph burns bright and pulses */
@keyframes bbWlFlare {
	0%, 100% { opacity: .9; transform: scale(1) rotate(0deg); }
	50% { opacity: 1; transform: scale(1.2) rotate(var(--spin, 0deg)); }
}
@keyframes bbWlShock {
	0% { opacity: .9; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.6, 2.2); }
}

@media (prefers-reduced-motion: reduce) {
	li.bbWhitelistNav,
	li.bbWhitelistNav > a,
	li.bbWhitelistNav .ipsNavBar__label,
	.ipsOffCanvas li.bbWhitelistNav--drawer > a,
	.ipsOffCanvas li.bbWhitelistNav--drawer .ipsOffCanvas__label,
	.bbWl__outer, .bbWl__inner,
	li.bbWhitelistNav:is(:hover, :focus-within) .bbWl__shock {
		animation: none;
	}
	li.bbWhitelistNav { --wl-angle: 300deg; }
	li.bbWhitelistNav .ipsNavBar__label { background-position: 50% 0; }
	.bbWl__glyph > span,
	li.bbWhitelistNav:is(:hover, :focus-within) .bbWl__glyph > span { animation: none; opacity: .55; }
	.bbWl__glyph, .bbWl__sigil { transition: opacity .3s ease; }
}