/*
 * Badgyver seasonal logo: Halloween.
 *
 * The normal logo stays as it is; the season is drawn around it:
 *   - a pumpkin-orange glow that flickers like a candle,
 *   - two bats circling the logo, flapping their wings,
 *   - a spider that drops on its thread and climbs back up.
 * Everything is absolutely positioned and pointer-events: none, so the
 * header layout and the logo link are untouched. Loaded only while the
 * season is active (see BGL_Seasons).
 */

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

/* Candle-like glow on the skull itself. */
.bgl-season-halloween .whb-header .site-logo img {
	animation: bgl-hw-glow 3.2s ease-in-out infinite;
	will-change: filter;
}

@keyframes bgl-hw-glow {
	0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 122, 24, .55)) drop-shadow(0 0 10px rgba(255, 90, 0, .25)); }
	18%      { filter: drop-shadow(0 0 5px rgba(255, 140, 40, .85)) drop-shadow(0 0 16px rgba(255, 100, 0, .45)); }
	22%      { filter: drop-shadow(0 0 2px rgba(255, 122, 24, .45)) drop-shadow(0 0 8px rgba(255, 90, 0, .2)); }
	55%      { filter: drop-shadow(0 0 6px rgba(255, 150, 50, .9)) drop-shadow(0 0 20px rgba(255, 110, 0, .5)); }
	60%      { filter: drop-shadow(0 0 4px rgba(255, 122, 24, .65)) drop-shadow(0 0 12px rgba(255, 90, 0, .3)); }
}

/* Two bats: the logo wrapper's pseudo-elements. */
.bgl-season-halloween .whb-header .site-logo::before,
.bgl-season-halloween .whb-header .site-logo::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 9px;
	margin: -4.5px 0 0 -9px;
	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 64 32'%3E%3Cpath fill='%23ff7a18' d='M32 9c1.6-3.4 3.4-5.6 3.4-5.6l.9 3.6c2.7-.8 4.6.2 5.5 2 4.2-3.6 12-4.6 20.7-1.7-4.9 2-8 5.9-8.9 10.8-2.9-1.9-6.1-1.9-8.2.2-1-2.9-3.8-4-6.1-3-1.9 1.9-3.1 4.9-3.8 8.7h-7c-.7-3.8-1.9-6.8-3.8-8.7-2.3-1-5.1.1-6.1 3-2.1-2.1-5.3-2.1-8.2-.2C9.5 13.2 6.4 9.3 1.5 7.3 10.2 4.4 18 5.4 22.2 9c.9-1.8 2.8-2.8 5.5-2l.9-3.6S30.4 5.6 32 9z'/%3E%3C/svg%3E");
	filter: drop-shadow(0 0 3px rgba(255, 122, 24, .6));
}

.bgl-season-halloween .whb-header .site-logo::before {
	animation: bgl-hw-bat-a 7s linear infinite;
}

.bgl-season-halloween .whb-header .site-logo::after {
	width: 13px;
	height: 6.5px;
	margin: -3.25px 0 0 -6.5px;
	opacity: .85;
	animation: bgl-hw-bat-b 9s linear infinite;
	animation-delay: -3s;
}

/* Bat A: a wide loop round the logo; scaleY alternates for the wing beat. */
@keyframes bgl-hw-bat-a {
	0%    { transform: translate(-46px, -6px)  scaleY(1); }
	6%    { transform: translate(-38px, -22px) scaleY(.35); }
	12%   { transform: translate(-22px, -30px) scaleY(1); }
	18%   { transform: translate(0, -33px)     scaleY(.35); }
	24%   { transform: translate(22px, -30px)  scaleY(1); }
	30%   { transform: translate(38px, -22px)  scaleY(.35); }
	36%   { transform: translate(46px, -6px)   scaleY(1); }
	42%   { transform: translate(42px, 10px)   scaleY(.35); }
	48%   { transform: translate(30px, 20px)   scaleY(1); }
	54%   { transform: translate(12px, 25px)   scaleY(.35); }
	60%   { transform: translate(-8px, 26px)   scaleY(1); }
	66%   { transform: translate(-26px, 22px)  scaleY(.35); }
	72%   { transform: translate(-40px, 12px)  scaleY(1); }
	78%   { transform: translate(-48px, 0)     scaleY(.35); }
	84%   { transform: translate(-50px, -8px)  scaleY(1); }
	92%   { transform: translate(-49px, -9px)  scaleY(.35); }
	100%  { transform: translate(-46px, -6px)  scaleY(1); }
}

/* Bat B: smaller, the other way round, closer to the logo. */
@keyframes bgl-hw-bat-b {
	0%    { transform: translate(34px, -20px)  scaleY(1); }
	8%    { transform: translate(14px, -28px)  scaleY(.35); }
	16%   { transform: translate(-10px, -27px) scaleY(1); }
	24%   { transform: translate(-28px, -16px) scaleY(.35); }
	32%   { transform: translate(-36px, 2px)   scaleY(1); }
	40%   { transform: translate(-30px, 18px)  scaleY(.35); }
	48%   { transform: translate(-12px, 24px)  scaleY(1); }
	56%   { transform: translate(10px, 23px)   scaleY(.35); }
	64%   { transform: translate(28px, 14px)   scaleY(1); }
	72%   { transform: translate(37px, -2px)   scaleY(.35); }
	80%   { transform: translate(38px, -12px)  scaleY(1); }
	90%   { transform: translate(36px, -18px)  scaleY(.35); }
	100%  { transform: translate(34px, -20px)  scaleY(1); }
}

/* Spider on its thread: the link's pseudo-elements. */
.bgl-season-halloween .whb-header .site-logo .wd-logo {
	position: relative;
}

.bgl-season-halloween .whb-header .site-logo .wd-logo::before {
	content: "";
	position: absolute;
	top: -24px;
	right: -9px;
	width: 1px;
	height: 0;
	pointer-events: none;
	z-index: 2;
	background: linear-gradient(rgba(200, 205, 212, 0), rgba(200, 205, 212, .7));
	animation: bgl-hw-thread 6s ease-in-out infinite;
}

.bgl-season-halloween .whb-header .site-logo .wd-logo::after {
	content: "";
	position: absolute;
	top: -26px;
	right: -14px;
	width: 11px;
	height: 11px;
	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 32 32'%3E%3Cg stroke='%23c8cdd4' stroke-width='1.6' fill='none' stroke-linecap='round'%3E%3Cpath d='M12 14 5 9 2 12M12 16H3l-2 3M12 18l-6 4-1 5M20 14l7-5 3 3M20 16h9l2 3M20 18l6 4 1 5'/%3E%3C/g%3E%3Cellipse cx='16' cy='17' rx='5' ry='6' fill='%23141414' stroke='%23c8cdd4' stroke-width='1.2'/%3E%3Ccircle cx='16' cy='10.5' r='3.4' fill='%23141414' stroke='%23c8cdd4' stroke-width='1.2'/%3E%3Ccircle cx='14.8' cy='10.2' r='.9' fill='%23ff7a18'/%3E%3Ccircle cx='17.2' cy='10.2' r='.9' fill='%23ff7a18'/%3E%3C/svg%3E");
	animation: bgl-hw-spider 6s ease-in-out infinite;
}

@keyframes bgl-hw-thread {
	0%, 15%   { height: 0; }
	45%, 62%  { height: 30px; }
	50%       { height: 28px; }
	56%       { height: 31px; }
	90%, 100% { height: 0; }
}

@keyframes bgl-hw-spider {
	0%, 15%   { transform: translateY(0) rotate(0deg); opacity: 0; }
	18%       { opacity: 1; }
	45%       { transform: translateY(30px) rotate(-6deg); }
	50%       { transform: translateY(28px) rotate(5deg); }
	56%       { transform: translateY(31px) rotate(-3deg); }
	62%       { transform: translateY(30px) rotate(0deg); }
	88%       { opacity: 1; }
	90%, 100% { transform: translateY(0) rotate(0deg); opacity: 0; }
}

/* The owner wants the seasonal logo animated for every visitor, including
   those whose system asks for reduced motion: the movement is small, slow
   and has no flashing, so no reduced-motion override is applied. */