/**
 * Halloween seasonal skin (light touch).
 * Every rule is scoped to html.halloween, which halloween.js adds. Both files
 * are only included when Admin > Configuration > Layout Settings >
 * Halloween Effects is true (see jscript/jscript_zz_halloween.php).
 */

/* ---------- page background ---------- */
html.halloween body {
	background: #1a1220 radial-gradient(ellipse at top, #3a2147 0%, #1a1220 60%) fixed !important;
}
html.halloween .body-bg.shadow-wrp {
	box-shadow: 0 0 30px rgba(255, 120, 0, .35);
	border-top: 4px solid #ff7518;
}

/* ---------- top tab navigation ---------- */
html.halloween #top_nav {
	background: #111 !important;
	border-bottom: 3px solid #ff7518;
}
html.halloween #tab_nav li,
html.halloween #tab_nav li a {
	background-image: none !important;
	background-color: transparent;
}
html.halloween #tab_nav li {
	border-right: 1px solid #333;
}
html.halloween #tab_nav li a {
	color: #ffb347 !important;
}
html.halloween #tab_nav li:hover,
html.halloween #tab_nav li.tab_active {
	background-color: #ff7518 !important;
}
html.halloween #tab_nav li:hover a,
html.halloween #tab_nav li.tab_active a {
	color: #111 !important;
}

/* ---------- sidebox headings ---------- */
html.halloween .sidebox-header-left,
html.halloween h3.leftBoxHeading,
html.halloween h3.rightBoxHeading {
	background: #151515 !important;
	color: #ff8c1a !important;
}
html.halloween .sidebox-header-left {
	border-bottom: 2px solid #ff7518;
}
/* the Categories box has its own ID-level image rule in stylesheet.css */
html.halloween #categories .sidebox-header-left,
html.halloween #categories .sidebox-header-left h3,
html.halloween #vertcategoriescss .sidebox-header-left,
html.halloween #vertcategoriescss .sidebox-header-left h3 {
	background: #151515 !important;
	text-shadow: none;
}
html.halloween #categories .sidebox-header-left,
html.halloween #vertcategoriescss .sidebox-header-left {
	border-bottom: 2px solid #ff7518;
}
html.halloween h3.leftBoxHeading a,
html.halloween h3.rightBoxHeading a {
	color: #ffb347 !important;
}
html.halloween h3.leftBoxHeading::before,
html.halloween h3.rightBoxHeading::before {
	content: "\1F383\00a0"; /* jack-o'-lantern */
}
html.halloween .sideBoxContent {
	border-color: #ffcf9e !important;
}
html.halloween .category-top:hover,
html.halloween .sideBoxContent a:hover {
	color: #ff6a00 !important;
}

/* ---------- center boxes / notices ---------- */
html.halloween .note,
html.halloween .note-mixedcart {
	background: #fff5ea !important;
	border: 2px solid #ff7518 !important;
	box-shadow: inset 0 0 0 1px #222, 0 2px 8px rgba(255, 117, 24, .25);
}
html.halloween h2.centerBoxHeading {
	background: #151515 !important;
	color: #ff8c1a !important;
	border-color: #ff7518 !important;
}
html.halloween .centerBoxWrapper.carousel-box {
	border-color: #ffcf9e;
}
html.halloween #navBreadCrumb {
	background: #fff1e0 !important;
	border-left: 4px solid #ff7518;
}

/* ---------- buttons ---------- */
html.halloween .cssButton,
html.halloween .cssButtonHover {
	background: #ff7518 !important;
	border-color: #111 !important;
	color: #111 !important;
}
html.halloween .cssButton:hover,
html.halloween .cssButtonHover:hover {
	background: #111 !important;
	color: #ff8c1a !important;
}

/* ---------- footer ---------- */
html.halloween #footer {
	border-top: 4px solid #ff7518;
}

/* ================= decorations (built by the JS) ================= */
.hw-layer {
	position: fixed;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 9000;
}

/* bats */
.hw-bat {
	position: absolute;
	left: -80px;
	width: 46px;
	height: 22px;
	fill: #111;
	opacity: .85;
	animation: hw-fly linear infinite;
}
.hw-bat .hw-wing {
	transform-origin: 50% 40%;
	animation: hw-flap .22s ease-in-out infinite alternate;
}
@keyframes hw-fly {
	0%   { transform: translate(0, 0) scale(var(--s, 1)); }
	25%  { transform: translate(30vw, -40px) scale(var(--s, 1)); }
	50%  { transform: translate(60vw, 30px) scale(var(--s, 1)); }
	75%  { transform: translate(90vw, -20px) scale(var(--s, 1)); }
	100% { transform: translate(calc(100vw + 160px), 10px) scale(var(--s, 1)); }
}
@keyframes hw-flap {
	from { transform: scaleY(1); }
	to   { transform: scaleY(.35); }
}

/* blinking eyes */
.hw-eyes {
	position: absolute;
	display: flex;
	gap: 7px;
	padding: 6px 8px;
	border-radius: 14px;
	background: radial-gradient(ellipse, rgba(0, 0, 0, .9) 40%, rgba(0, 0, 0, 0) 75%);
}
.hw-eyes span {
	width: 11px;
	height: 7px;
	border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
	background: #ffd400;
	box-shadow: 0 0 6px 2px rgba(255, 140, 0, .9);
	animation: hw-blink var(--d, 4s) infinite;
	animation-delay: var(--delay, 0s);
}
.hw-eyes {
	animation: hw-look var(--look, 7s) ease-in-out infinite;
}
.hw-eyes.hw-red span {
	background: #ff3b1f;
	box-shadow: 0 0 6px 2px rgba(255, 40, 0, .9);
}
.hw-eyes.hw-green span {
	background: #9dff3b;
	box-shadow: 0 0 6px 2px rgba(80, 255, 0, .8);
}
/* slow blink, then a quick double blink */
@keyframes hw-blink {
	0%, 60%, 70%, 82%, 88%, 100% { transform: scaleY(1); }
	64%, 66%                     { transform: scaleY(.05); }
	84%, 85%                     { transform: scaleY(.05); }
}
/* the pair shifts left and right as if looking around */
@keyframes hw-look {
	0%, 30%, 100% { transform: translateX(0); }
	40%, 55%      { transform: translateX(-4px); }
	65%, 85%      { transform: translateX(4px); }
}
/* eyes that fade in somewhere in the dark, blink, and vanish */
.hw-eyes.hw-lurk {
	opacity: 0;
	transition: opacity .8s;
}
.hw-eyes.hw-lurk.hw-show {
	opacity: 1;
}

/* ---------- pumpkins ---------- */
.hw-pumpkin {
	display: block;
	width: 54px;
	height: 50px;
	overflow: visible;
}
.hw-pumpkin .hw-face {
	fill: #ffd400;
	animation: hw-flicker 1.8s infinite;
}
@keyframes hw-flicker {
	0%, 100% { fill: #ffd400; filter: drop-shadow(0 0 3px #ffae00); }
	20%      { fill: #ffb000; filter: drop-shadow(0 0 1px #ff8c00); }
	45%      { fill: #fff27a; filter: drop-shadow(0 0 5px #ffd400); }
	70%      { fill: #ffc400; filter: drop-shadow(0 0 2px #ff9a00); }
}

/* big pumpkin bouncing in the bottom-left corner */
.hw-jumper {
	position: absolute;
	left: 18px;
	bottom: 8px;
	width: 54px;
	height: 120px;
}
.hw-jumper .hw-pumpkin {
	position: absolute;
	bottom: 6px;
	transform-origin: 50% 100%;
	animation: hw-jump 1.5s cubic-bezier(.3, 0, .5, 1) infinite;
}
.hw-jumper .hw-shadow {
	position: absolute;
	left: 7px;
	bottom: 0;
	width: 40px;
	height: 8px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	animation: hw-shadow 1.5s cubic-bezier(.3, 0, .5, 1) infinite;
}
@keyframes hw-jump {
	0%   { transform: translateY(0) scale(1.15, .8); }   /* squash */
	15%  { transform: translateY(0) scale(.9, 1.12); }   /* spring */
	45%  { transform: translateY(-62px) rotate(-8deg) scale(1); }
	55%  { transform: translateY(-62px) rotate(8deg) scale(1); }
	85%  { transform: translateY(0) scale(.95, 1.05); }
	100% { transform: translateY(0) scale(1.15, .8); }
}
@keyframes hw-shadow {
	0%, 15%, 85%, 100% { transform: scale(1); opacity: .55; }
	45%, 55%           { transform: scale(.5); opacity: .2; }
}

/* small pumpkin hopping back and forth along the top of the menu bar */
#top_nav .hw-hopper {
	position: absolute;
	top: -24px;
	left: 0;
	z-index: 6;
	pointer-events: none;
	animation: hw-walk 16s linear infinite alternate;
}
#top_nav .hw-hopper .hw-pumpkin {
	width: 28px;
	height: 26px;
	transform-origin: 50% 100%;
	animation: hw-hop .55s ease-in-out infinite alternate;
}
@keyframes hw-walk {
	from { left: 0; }
	to   { left: calc(100% - 28px); }
}
@keyframes hw-hop {
	from { transform: translateY(0) scale(1.08, .9); }
	to   { transform: translateY(-14px) scale(1); }
}
/* eyes that peek out of the header */
#headerWrapper .hw-eyes {
	z-index: 5;
	pointer-events: none;
}

@media (max-width: 767px) {
	.hw-bat:nth-child(n+3) { display: none; }
	.hw-eyes.hw-edge, .hw-eyes.hw-lurk { display: none; }
	.hw-jumper { transform: scale(.7); transform-origin: 0 100%; }
}