/* Spooky Halloween Sale — palette
   midnight  #1c0f24   deep plum night
   bruise    #3a1748   banner glow
   pumpkin   #ff7a1a   the sale
   candle    #ffd27a   coupon code, warm light
   ecto      #e9f1ff   ghost
*/

/* ---------- Banner ---------- */
.shs-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 99995;
	background:
		radial-gradient(ellipse 60% 140% at 50% 0%, #3a1748 0%, transparent 70%),
		#1c0f24;
	color: #f6eefc;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.3;
	border-bottom: 3px solid #ff7a1a;
	box-shadow: 0 6px 24px rgba(255, 122, 26, .28);
	text-align: center;
}
.shs-banner * { box-sizing: border-box; }
body.admin-bar .shs-banner { top: 32px; }
@media (max-width: 782px) { body.admin-bar .shs-banner { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .shs-banner { top: 0; } }
#shs-spacer { display: block; width: 100%; }

.shs-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 52px 10px 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 16px;
}

.shs-pumpkin {
	display: inline-block;
	font-size: 28px;
	animation: shs-bob 2.6s ease-in-out infinite;
}

.shs-text { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }

.shs-title {
	font-family: "Creepster", Impact, "Arial Black", sans-serif;
	font-size: 27px;
	letter-spacing: 1.5px;
	color: #ff7a1a;
	text-shadow: 0 0 10px rgba(255, 122, 26, .65), 0 2px 0 #1c0f24;
}

.shs-off {
	display: inline-block;
	background: #ff7a1a;
	color: #1c0f24;
	font-weight: 800;
	font-size: 16px;
	padding: 3px 12px;
	border-radius: 999px;
	animation: shs-pulse 1.8s ease-in-out infinite;
}

.shs-timer {
	font-size: 14px;
	font-weight: 700;
	color: #ffd27a;
}

/* Copy-code button: reset whatever the theme gives <button> */
.shs-banner .shs-code {
	all: unset;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 6px 5px 12px;
	border: 2px dashed #ffd27a;
	border-radius: 10px;
	background: rgba(255, 210, 122, .08);
	color: #fff;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	transition: background .2s, transform .2s;
}
.shs-banner .shs-code:hover { background: rgba(255, 210, 122, .18); transform: translateY(-1px); }
.shs-banner .shs-code:focus-visible { outline: 3px solid #ffd27a; outline-offset: 3px; }
.shs-code-label { font-size: 12px; color: #d9c6e6; }
.shs-code-value { font-weight: 800; font-size: 16px; letter-spacing: 2px; color: #ffd27a; }
.shs-copy-state {
	background: #ffd27a;
	color: #1c0f24;
	font-weight: 700;
	font-size: 12px;
	padding: 4px 9px;
	border-radius: 6px;
	min-width: 52px;
	text-align: center;
	transition: background .2s;
}
.shs-code.is-copied .shs-copy-state { background: #e9f1ff; }

/* Grab Now (banner + floating) */
a.shs-grab,
.shs-banner a.shs-grab {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 999px;
	background: linear-gradient(180deg, #ff9640 0%, #ff7a1a 55%, #e55f00 100%) !important;
	color: #fff !important;
	text-decoration: none !important;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-weight: 800;
	font-size: 15px;
	line-height: 1;
	letter-spacing: .3px;
	box-shadow: 0 4px 0 #a33f00, 0 0 18px rgba(255, 122, 26, .55);
	transition: transform .15s, box-shadow .15s;
	animation: shs-breathe 2.4s ease-in-out infinite;
}
a.shs-grab:hover { transform: translateY(-2px); }
a.shs-grab:active { transform: translateY(2px); box-shadow: 0 1px 0 #a33f00; }
a.shs-grab:focus-visible { outline: 3px solid #ffd27a; outline-offset: 3px; }
a.shs-grab.shs-haunted { animation: shs-shake .55s ease-in-out 2, shs-ring 1.1s ease-out; }

.shs-banner .shs-close {
	all: unset;
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	line-height: 30px;
	text-align: center;
	font-size: 24px;
	color: #d9c6e6;
	cursor: pointer;
	border-radius: 50%;
}
.shs-banner .shs-close:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.shs-banner .shs-close:focus-visible { outline: 2px solid #ffd27a; }

/* Floating Grab Now (appears when banner is scrolled away) */
#shs-float {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 99996;
	transform: translateY(160%);
	transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
}
#shs-float.is-visible { transform: translateY(0); }

/* Sound toggle */
#shs-sound {
	all: unset;
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: 99996;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #1c0f24;
	border: 2px solid #ff7a1a;
	box-shadow: 0 0 14px rgba(255, 122, 26, .45);
	font-size: 20px;
	line-height: 42px;
	text-align: center;
	cursor: pointer;
}
#shs-sound:focus-visible { outline: 3px solid #ffd27a; outline-offset: 3px; }

/* ---------- Effects layer ---------- */
#shs-fx {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 99990;
	overflow: hidden;
}

.shs-bat {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--s, 40px);
	color: #2b0f3c;
	filter: drop-shadow(0 0 5px rgba(255, 122, 26, .7));
	animation: shs-batfly var(--d, 14s) linear var(--delay, 0s) infinite;
}
.shs-bat--rtl { animation-direction: reverse; }
.shs-bat svg {
	display: block;
	width: 100%;
	height: auto;
	animation: shs-flap .22s ease-in-out infinite alternate;
}

.shs-web {
	position: absolute;
	top: 0;
	width: 150px;
	color: rgba(160, 150, 180, .55);
}
.shs-web--left { left: 0; }
.shs-web--right { right: 0; transform: scaleX(-1); }
.shs-web svg { display: block; width: 100%; height: auto; }

.shs-spider {
	position: absolute;
	top: -220px;
	right: 16%;
	width: 30px;
	animation: shs-drop 8s ease-in-out infinite;
}
.shs-thread { width: 1px; height: 224px; margin: 0 auto; background: rgba(170, 160, 190, .7); }
.shs-spider svg { display: block; width: 30px; height: 30px; margin-top: -4px; animation: shs-wiggle 1.4s ease-in-out infinite; }

.shs-fog {
	position: absolute;
	left: 0;
	bottom: -30px;
	width: 200%;
	height: 170px;
	background:
		radial-gradient(ellipse 22% 65% at 20% 100%, rgba(200, 185, 235, .30), transparent 70%),
		radial-gradient(ellipse 26% 75% at 50% 100%, rgba(215, 205, 245, .24), transparent 70%),
		radial-gradient(ellipse 20% 60% at 80% 100%, rgba(200, 185, 235, .28), transparent 70%);
	background-size: 50% 100%;
	background-repeat: repeat-x;
	animation: shs-fog 45s linear infinite;
}
.shs-fog--2 { bottom: -55px; opacity: .7; animation-duration: 70s; animation-direction: reverse; }

/* Ghost */
#shs-ghost {
	position: fixed;
	left: 0;
	top: 0;
	width: 72px;
	z-index: 100000;
	pointer-events: none;
	opacity: 0;
	transition: opacity .4s;
	will-change: transform;
}
.shs-ghost-body {
	position: relative;
	transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .5s;
	filter: drop-shadow(0 0 4px rgba(0, 0, 0, .95)) drop-shadow(0 0 16px rgba(15, 0, 25, .95)) drop-shadow(0 0 34px rgba(70, 0, 100, .7));
}
.shs-ghost-aura {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 240%;
	height: 240%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(8, 0, 14, .85) 0%, rgba(30, 0, 45, .55) 35%, rgba(30, 0, 45, 0) 68%);
	animation: shs-aura 1.6s ease-in-out infinite;
	pointer-events: none;
}
.shs-ghost-body svg { position: relative; }
.shs-eye-glow { opacity: .55; transition: opacity .2s; }
#shs-ghost.is-boo .shs-eye-glow { opacity: 1; }
.shs-wisp {
	position: fixed;
	z-index: 99999;
	width: 46px;
	height: 46px;
	margin: -23px 0 0 -23px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle, rgba(15, 0, 25, .7) 0%, rgba(50, 0, 70, .35) 45%, rgba(50, 0, 70, 0) 70%);
}
.shs-ghost-body svg { display: block; width: 100%; height: auto; animation: shs-float 1.2s ease-in-out infinite; }
#shs-ghost.is-boo .shs-ghost-body { transform: scale(1.4); }
#shs-ghost.is-vanish .shs-ghost-body { transform: scale(.1); opacity: 0; }

.shs-ghost-say {
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translate(-50%, 6px) scale(.6);
	opacity: 0;
	background: #e9f1ff;
	color: #1c0f24;
	font: 800 13px/1 system-ui, -apple-system, sans-serif;
	padding: 7px 11px;
	border-radius: 12px;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
	transition: .25s;
}
#shs-ghost.say-below .shs-ghost-say { bottom: auto; top: 100%; }
#shs-ghost.is-boo .shs-ghost-say { opacity: 1; transform: translate(-50%, -4px) scale(1); }
#shs-ghost.say-below.is-boo .shs-ghost-say { transform: translate(-50%, 10px) scale(1); }

/* Darkness around the edges */
.shs-vignette {
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 160px 40px rgba(12, 0, 22, .6);
	animation: shs-flicker 6s steps(1) infinite;
}

/* Lightning + lights-dim overlays */
.shs-flash, .shs-dim {
	position: fixed;
	inset: 0;
	pointer-events: none;
	opacity: 0;
}
.shs-flash { z-index: 99991; background: #eef0ff; mix-blend-mode: screen; }
.shs-dim { z-index: 99992; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .15), rgba(0, 0, 0, .7)); transition: opacity .35s; }
.shs-dim.is-on { opacity: 1; }

/* Eyes watching from the dark */
.shs-eyes {
	position: absolute;
	display: flex;
	gap: 12px;
	opacity: 0;
	animation: shs-eyes 4.5s ease-in-out forwards;
}
.shs-eyes i {
	display: block;
	width: 13px;
	height: 7px;
	border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
	background: #ff3b1f;
	box-shadow: 0 0 8px 2px rgba(255, 40, 10, .85), 0 0 22px 6px rgba(255, 40, 10, .35);
	animation: shs-blink 4.5s ease-in-out forwards;
}
.shs-eyes i:first-child { transform: rotate(12deg); }
.shs-eyes i:last-child { transform: rotate(-12deg); }

/* Candy burst particles */
.shs-candy {
	position: fixed;
	z-index: 100001;
	pointer-events: none;
	font-size: 20px;
	line-height: 1;
	transform: translate(-50%, -50%);
}

/* ---------- Keyframes ---------- */
@keyframes shs-aura { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .9; } 50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } }
@keyframes shs-flicker { 0%, 100% { opacity: 1; } 42% { opacity: .82; } 44% { opacity: 1; } 71% { opacity: .9; } 72% { opacity: 1; } }
@keyframes shs-eyes { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes shs-blink { 0%, 30%, 34%, 62%, 66%, 100% { scale: 1 1; } 32%, 64% { scale: 1 .1; } }
@keyframes shs-bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-4px) rotate(6deg); } }
@keyframes shs-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes shs-breathe { 0%, 100% { box-shadow: 0 4px 0 #a33f00, 0 0 12px rgba(255, 122, 26, .4); } 50% { box-shadow: 0 4px 0 #a33f00, 0 0 26px rgba(255, 122, 26, .85); } }
@keyframes shs-shake {
	0%, 100% { transform: rotate(0) scale(1); }
	20% { transform: rotate(-7deg) scale(1.1); }
	40% { transform: rotate(7deg) scale(1.1); }
	60% { transform: rotate(-4deg) scale(1.05); }
	80% { transform: rotate(4deg) scale(1.05); }
}
@keyframes shs-ring { 0% { box-shadow: 0 0 0 0 rgba(233, 241, 255, .95); } 100% { box-shadow: 0 0 0 22px rgba(233, 241, 255, 0); } }
@keyframes shs-batfly {
	0%   { transform: translate(-90px, var(--y0)); }
	25%  { transform: translate(25vw, calc(var(--y0) - 50px)); }
	50%  { transform: translate(50vw, calc(var(--y0) + 30px)); }
	75%  { transform: translate(75vw, calc(var(--y1) - 40px)); }
	100% { transform: translate(110vw, var(--y1)); }
}
@keyframes shs-flap { from { transform: scaleY(1); } to { transform: scaleY(.3); } }
@keyframes shs-drop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(190px); } 50% { transform: translateY(175px); } 60% { transform: translateY(185px); } }
@keyframes shs-wiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes shs-fog { to { transform: translateX(-50%); } }
@keyframes shs-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }

/* ---------- Responsive / accessibility ---------- */
@media (max-width: 640px) {
	.shs-vignette { box-shadow: inset 0 0 90px 20px rgba(12, 0, 22, .55); }
	.shs-inner { gap: 8px 10px; padding: 8px 42px 8px 10px; }
	.shs-title { font-size: 22px; }
	.shs-pumpkin { font-size: 22px; }
	.shs-timer { width: 100%; }
	.shs-web { width: 80px; }
	a.shs-grab { padding: 9px 16px; font-size: 14px; }
	#shs-sound { width: 40px; height: 40px; line-height: 36px; font-size: 17px; left: 12px; bottom: 12px; }
	#shs-float { right: 12px; bottom: 12px; }
	#shs-ghost { width: 56px; }
}

@media (prefers-reduced-motion: reduce) {
	.shs-pumpkin, .shs-off, a.shs-grab, .shs-spider, .shs-spider svg, .shs-fog, .shs-ghost-body svg { animation: none !important; }
	.shs-bat, .shs-spider, #shs-ghost, .shs-eyes, .shs-flash, .shs-wisp { display: none !important; }
	.shs-vignette { animation: none !important; }
}

@media print {
	.shs-banner, #shs-spacer, #shs-fx, #shs-float, #shs-sound, #shs-ghost, .shs-flash, .shs-dim { display: none !important; }
}