/*
 * Badgyver seasonal logo: Black Friday.
 *
 * A sale tag with a "%" hanging from the right-hand bone and swinging, gold
 * sparks popping around the logo, and a red-and-gold pulsing glow. Loaded
 * only in season (from the end of Halloween to Cyber Monday).
 */

.bgl-season-blackfriday .whb-header .site-logo {
	position: relative;
	overflow: visible;
	isolation: isolate;
}

.bgl-season-blackfriday .whb-header .site-logo .wd-logo {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.bgl-season-blackfriday .whb-header .site-logo img {
	animation: bgl-bf-glow 2.4s ease-in-out infinite;
}

@keyframes bgl-bf-glow {
	0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 60, 60, .55)) drop-shadow(0 0 10px rgba(255, 196, 61, .2)); }
	50%      { filter: drop-shadow(0 0 5px rgba(255, 196, 61, .9)) drop-shadow(0 0 16px rgba(255, 60, 60, .45)); }
}

/* Sale tag hanging from the right-hand bone. */
.bgl-season-blackfriday .whb-header .site-logo .wd-logo::after {
	content: "";
	position: absolute;
	right: -18%;
	top: 52%;
	width: 30%;
	aspect-ratio: 26 / 34;
	pointer-events: none;
	z-index: 2;
	transform-origin: 50% 4%;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 34'%3E%3Cpath fill='none' stroke='%23c8cdd4' stroke-width='1.2' d='M13 1v7'/%3E%3Cpath fill='%23e63946' d='M6 8h14l4 5v18a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V13z'/%3E%3Ccircle cx='13' cy='12' r='1.8' fill='%23141414'/%3E%3Cg fill='none' stroke='%23ffd166' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='8.6' cy='19.5' r='2.3'/%3E%3Ccircle cx='17.4' cy='27' r='2.3'/%3E%3Cpath d='M18 18l-10 10.5'/%3E%3C/g%3E%3C/svg%3E");
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
	animation: bgl-bf-tag 2.8s ease-in-out infinite;
}

@keyframes bgl-bf-tag {
	0%, 100% { transform: rotate(14deg); }
	50%      { transform: rotate(-14deg); }
}

/* Gold sparks popping on either side. */
.bgl-season-blackfriday .whb-header .site-logo::before,
.bgl-season-blackfriday .whb-header .site-logo::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 11px;
	height: 11px;
	margin: -5.5px 0 0 -5.5px;
	pointer-events: none;
	z-index: 2;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffd166' d='M10 0l2.2 7.8L20 10l-7.8 2.2L10 20l-2.2-7.8L0 10l7.8-2.2z'/%3E%3C/svg%3E");
	filter: drop-shadow(0 0 3px rgba(255, 209, 102, .8));
}

.bgl-season-blackfriday .whb-header .site-logo::before {
	animation: bgl-bf-spark-a 2.6s ease-out infinite;
}

.bgl-season-blackfriday .whb-header .site-logo::after {
	animation: bgl-bf-spark-b 3.1s ease-out infinite;
	animation-delay: -1.3s;
}

@keyframes bgl-bf-spark-a {
	0%   { transform: translate(-30px, 6px) scale(0) rotate(0deg); opacity: 0; }
	15%  { transform: translate(-36px, -6px) scale(1) rotate(45deg); opacity: 1; }
	45%  { transform: translate(-44px, -20px) scale(.6) rotate(90deg); opacity: 0; }
	100% { transform: translate(-44px, -20px) scale(0); opacity: 0; }
}

@keyframes bgl-bf-spark-b {
	0%   { transform: translate(-6px, -22px) scale(0) rotate(0deg); opacity: 0; }
	15%  { transform: translate(-2px, -28px) scale(.9) rotate(45deg); opacity: 1; }
	45%  { transform: translate(4px, -38px) scale(.5) rotate(90deg); opacity: 0; }
	100% { transform: translate(4px, -38px) scale(0); opacity: 0; }
}