/*
 * The AngloAgency credit in a site's footer: "Website by" and the lockup,
 * quiet until pointed at. Hover lights it to full colour with a soft glow
 * and a few motes of light (credit.js). The logo itself never moves.
 */
.aa-credit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	vertical-align: middle;
	line-height: 1;
}
.aa-credit__by {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: .7;
}
.aa-credit__link {
	position: relative;
	display: block;
	line-height: 0;
	text-decoration: none;
	border-radius: 4px;
}
.aa-credit__link img {
	position: relative;
	z-index: 1;
	display: block;
	width: auto;
	height: 28px;
	max-width: none;
	transition: opacity .4s ease, filter .4s ease;
}
.aa-credit__link .aa-credit__quiet { opacity: .62; }
/* The lit logo sits exactly over the quiet one. The selector matches the
   weight of ".aa-credit__link img" above, so the absolute position holds. */
.aa-credit__link .aa-credit__lit { position: absolute; top: 0; left: 0; opacity: 0; }
.aa-credit__link:hover .aa-credit__quiet,
.aa-credit__link:focus-visible .aa-credit__quiet { opacity: 0; }
.aa-credit__link:hover .aa-credit__lit,
.aa-credit__link:focus-visible .aa-credit__lit { opacity: 1; }
.aa-credit--dark .aa-credit__link:hover .aa-credit__lit,
.aa-credit--dark .aa-credit__link:focus-visible .aa-credit__lit { filter: brightness(1.12) drop-shadow(0 0 10px rgba(255, 255, 255, .35)); }
.aa-credit--light .aa-credit__link:hover .aa-credit__lit,
.aa-credit--light .aa-credit__link:focus-visible .aa-credit__lit { filter: drop-shadow(0 0 8px rgba(22, 41, 79, .22)); }

/* A soft halo behind the logo, faded in on hover. */
.aa-credit__link::before {
	content: "";
	position: absolute;
	left: -40%;
	right: -40%;
	top: -90%;
	bottom: -90%;
	z-index: 0;
	pointer-events: none;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, .2), rgba(200, 16, 46, .1) 55%, transparent);
	opacity: 0;
	transition: opacity .5s ease;
}
.aa-credit--light .aa-credit__link::before { background: radial-gradient(closest-side, rgba(200, 16, 46, .12), rgba(22, 41, 79, .06) 55%, transparent); }
.aa-credit__link:hover::before,
.aa-credit__link:focus-visible::before { opacity: 1; }
.aa-credit__link:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

/* The motes' canvas, wider than the logo so they can drift clear of it. */
.aa-credit__motes {
	position: absolute;
	left: -70px;
	right: -70px;
	top: -60px;
	bottom: -30px;
	z-index: 2;
	width: calc(100% + 140px);
	height: calc(100% + 90px);
	pointer-events: none;
}

/* The fallback line, for themes that place no credit of their own. */
.aa-credit-fallback {
	margin: 0;
	padding: 18px 16px;
	text-align: center;
}