/**
 * DS Halloween — decorative overlay.
 * Everything lives inside #dsh-root, a fixed layer that never receives
 * pointer events, so the store underneath keeps working exactly the same.
 */

#dsh-root {
	position: fixed;
	inset: 0;
	z-index: 2147482000; /* Above Woodmart, below the DS Cotizador panel. */
	overflow: hidden;
	pointer-events: none;
	contain: strict;
	-webkit-user-select: none;
	user-select: none;
	--dsh-top: 0px;
	--dsh-bottom: 0px;
	--dsh-drop: 110px;
}

#dsh-root,
#dsh-root * {
	pointer-events: none !important;
	box-sizing: border-box;
}

#dsh-root svg {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	overflow: visible;
}

#dsh-root.dsh-paused * {
	animation-play-state: paused !important;
}

/* Side cart / mobile menu open: step the corner decoration out of the way. */
#dsh-root.dsh-quiet .dsh-web,
#dsh-root.dsh-quiet .dsh-spider,
#dsh-root.dsh-quiet .dsh-pumpkin {
	opacity: 0 !important;
}

/* ---------- Spider webs ---------- */

.dsh-web {
	position: absolute;
	width: 170px;
	height: 170px;
	color: #8d93a3;
	opacity: .6;
	filter: drop-shadow(0 0 1px rgba(255, 255, 255, .7));
	transition: opacity .4s ease;
	animation: dsh-sway 9s ease-in-out infinite alternate;
}

.dsh-web path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.1;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.dsh-web--tl { top: var(--dsh-top); left: 0; transform-origin: 0 0; }
.dsh-web--tr { top: var(--dsh-top); right: 0; transform-origin: 100% 0; }
.dsh-web--bl,
.dsh-web--br {
	bottom: var(--dsh-bottom);
	width: 110px;
	height: 110px;
	opacity: .45;
}
.dsh-web--bl { left: 0; transform-origin: 0 100%; }
.dsh-web--br { right: 0; transform-origin: 100% 100%; }
.dsh-web--tr svg { transform: scaleX(-1); }
.dsh-web--bl svg { transform: scaleY(-1); }
.dsh-web--br svg { transform: scale(-1, -1); }

@keyframes dsh-sway {
	from { transform: rotate(-1.2deg); }
	to { transform: rotate(1.2deg); }
}

/* ---------- Spider ---------- */

.dsh-spider {
	position: absolute;
	top: var(--dsh-top);
	right: 58px;
	width: 26px;
	height: 160px;
	transition: opacity .4s ease;
}

.dsh-spider-thread {
	position: absolute;
	top: 0;
	left: 12.5px;
	width: 1px;
	height: var(--dsh-drop);
	background: #8d93a3;
	transform-origin: 50% 0;
	transform: scaleY(0);
	animation: dsh-thread 15s ease-in-out 3s infinite;
}

.dsh-spider-bug {
	position: absolute;
	top: 0;
	left: 0;
	width: 26px;
	height: 23px;
	opacity: 0;
	animation: dsh-drop 15s ease-in-out 3s infinite;
}

@keyframes dsh-thread {
	0% { transform: scaleY(0); }
	14%, 30% { transform: scaleY(1); }
	44%, 100% { transform: scaleY(0); }
}

@keyframes dsh-drop {
	0% { opacity: 0; transform: translateY(-36px); }
	3% { opacity: 1; }
	14% { transform: translateY(calc(var(--dsh-drop) - 7px)) rotate(0); }
	18% { transform: translateY(calc(var(--dsh-drop) - 12px)) rotate(8deg); }
	22% { transform: translateY(calc(var(--dsh-drop) - 7px)) rotate(-6deg); }
	30% { transform: translateY(calc(var(--dsh-drop) - 7px)) rotate(0); }
	41% { opacity: 1; }
	44%, 100% { opacity: 0; transform: translateY(-36px); }
}

/* ---------- Ghost that follows the cursor ---------- */

.dsh-ghost {
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 63px;
	opacity: 0;
	transition: opacity .35s ease;
	will-change: transform;
}

.dsh-ghost.is-visible { opacity: .93; }
.dsh-ghost.is-visible.is-faint { opacity: .2; }

.dsh-ghost-bob {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 5px 10px rgba(91, 72, 160, .28));
	animation: dsh-bob 2.4s ease-in-out infinite;
}

@keyframes dsh-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

.dsh-ghost-body { fill: #fff; stroke: #d6d1ec; stroke-width: 1.5; }

/* ---------- Inicio: bats ---------- */

.dsh-bat {
	position: absolute;
	top: var(--y);
	left: 0;
	width: 54px;
	height: 30px;
	animation: dsh-fly var(--dur) linear var(--delay) both;
}

.dsh-bat--rtl { animation-name: dsh-fly-rtl; }

.dsh-bat-wave {
	width: 100%;
	height: 100%;
	animation: dsh-wave 1.6s ease-in-out infinite alternate;
}

.dsh-bat-wing {
	transform-box: view-box;
	animation: dsh-flap .26s ease-in-out infinite alternate;
}

.dsh-bat-wing--l { transform-origin: 34px 21px; }
.dsh-bat-wing--r { transform-origin: 46px 21px; }

@keyframes dsh-fly {
	from { transform: translateX(-90px) scale(var(--s)); }
	to { transform: translateX(calc(100vw + 90px)) scale(var(--s)); }
}

@keyframes dsh-fly-rtl {
	from { transform: translateX(calc(100vw + 90px)) scale(var(--s)); }
	to { transform: translateX(-90px) scale(var(--s)); }
}

@keyframes dsh-wave {
	from { transform: translateY(-18px); }
	to { transform: translateY(18px); }
}

@keyframes dsh-flap {
	to { transform: scaleY(.3); }
}

/* ---------- Tienda: pumpkins and candy ---------- */

.dsh-pumpkin {
	position: absolute;
	bottom: var(--dsh-bottom);
	width: 74px;
	height: 66px;
	transform: translateY(110%);
	transform-origin: 50% 100%;
	transition: opacity .4s ease;
	animation: dsh-peek 16s ease-in-out 1.5s infinite;
}

.dsh-pumpkin--l { left: 3%; }
.dsh-pumpkin--r { right: 12%; animation-delay: 9.5s; }

@keyframes dsh-peek {
	0%, 100% { transform: translateY(110%) rotate(0); }
	6% { transform: translateY(36%) rotate(-6deg); }
	9% { transform: translateY(36%) rotate(5deg); }
	12% { transform: translateY(36%) rotate(-3deg); }
	15%, 22% { transform: translateY(36%) rotate(0); }
	28% { transform: translateY(110%) rotate(0); }
}

.dsh-candy {
	position: absolute;
	top: 0;
	left: var(--x);
	width: 26px;
	height: 18px;
	opacity: .92;
	animation: dsh-fall var(--dur) cubic-bezier(.35, .1, .6, 1) var(--delay) both;
}

.dsh-candy--corn { width: 16px; height: 19px; }

@keyframes dsh-fall {
	from { transform: translateY(-40px) rotate(0); }
	to { transform: translateY(calc(100vh + 40px)) rotate(var(--rot)); }
}

/* ---------- Producto: skeletons rising from the ground ---------- */

.dsh-grave {
	position: absolute;
	bottom: var(--dsh-bottom);
	width: 90px;
	height: 160px;
	transform-origin: 0 100%;
}

.dsh-grave--right { transform-origin: 100% 100%; }
.dsh-grave--flip .dsh-skel svg { transform: scaleX(-1); }

.dsh-skel-clip {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	height: 140px;
	overflow: hidden;
}

.dsh-skel {
	width: 90px;
	height: 140px;
	transform: translateY(105%);
	animation: dsh-skel-rise 5.6s cubic-bezier(.3, .7, .3, 1) var(--delay) both;
}

@keyframes dsh-skel-rise {
	0%, 14% { transform: translateY(105%); }
	32% { transform: translateY(-3%); }
	37%, 78% { transform: translateY(0); }
	100% { transform: translateY(105%); }
}

.dsh-skel-wave {
	transform-box: view-box;
	transform-origin: 26px 72px;
	animation: dsh-arm .5s ease-in-out infinite alternate;
}

.dsh-skel-head {
	transform-box: view-box;
	transform-origin: 45px 62px;
	animation: dsh-nod 1.1s ease-in-out infinite alternate;
}

@keyframes dsh-arm {
	from { transform: rotate(-14deg); }
	to { transform: rotate(12deg); }
}

@keyframes dsh-nod {
	from { transform: rotate(-5deg); }
	to { transform: rotate(5deg); }
}

.dsh-skel .dsh-bo { fill: none; stroke: #4a4060; stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; }
.dsh-skel .dsh-bb { fill: none; stroke: #fdfaf1; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.dsh-skel .dsh-bone { fill: #fdfaf1; stroke: #4a4060; stroke-width: 2.2; }

.dsh-mound {
	position: absolute;
	bottom: 0;
	left: -15px;
	width: 120px;
	height: 30px;
	opacity: 0;
	transform-origin: 50% 100%;
	animation: dsh-mound 5.6s ease-out var(--delay) both;
}

@keyframes dsh-mound {
	0% { opacity: 0; transform: scale(.2, 0); }
	10%, 90% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(.6, .2); }
}

.dsh-clod {
	position: absolute;
	bottom: 14px;
	left: 42px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #7a5537;
	opacity: 0;
	animation: dsh-clod 1.1s ease-out calc(var(--delay) + .75s) both;
}

@keyframes dsh-clod {
	0% { opacity: 0; transform: translate(0, 0); }
	5%, 60% { opacity: 1; }
	60% { transform: translate(var(--dx), var(--dy)); }
	100% { opacity: 0; transform: translate(calc(var(--dx) * 1.3), 10px); }
}

/* ---------- Carrito / general: little ghosts floating up ---------- */

.dsh-mini {
	position: absolute;
	bottom: -80px;
	left: var(--x);
	width: 38px;
	height: 43px;
	opacity: 0;
	animation: dsh-rise var(--dur) ease-in var(--delay) both;
}

.dsh-mini > div {
	width: 100%;
	height: 100%;
	animation: dsh-drift 2.2s ease-in-out infinite alternate;
}

@keyframes dsh-rise {
	0% { opacity: 0; transform: translateY(0); }
	10%, 85% { opacity: .85; }
	100% { opacity: 0; transform: translateY(calc(-100vh - 120px)); }
}

@keyframes dsh-drift {
	from { transform: translateX(-14px) rotate(-6deg); }
	to { transform: translateX(14px) rotate(6deg); }
}

/* ---------- Storm: random lightning ---------- */

.dsh-storm,
.dsh-flash {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.dsh-storm { background: #0b1030; }

.dsh-flash {
	background: radial-gradient(ellipse 70% 90% at var(--dsh-x, 50%) 0, rgba(255, 255, 255, .95), rgba(225, 232, 255, .7) 45%, rgba(190, 200, 255, .45));
}

.dsh-bolt {
	position: absolute;
	top: var(--dsh-top);
	left: var(--dsh-x, 50%);
	width: 120px;
	height: 48vh;
	margin-left: -60px;
	opacity: 0;
	filter: drop-shadow(0 0 6px rgba(150, 170, 255, .95)) drop-shadow(0 0 16px rgba(120, 140, 255, .7));
}

.dsh-bolt path {
	fill: none;
	stroke: #fff;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.dsh-bolt path + path { stroke-width: 1.6; }

#dsh-root.dsh-lightning .dsh-storm { animation: dsh-storm 1.4s ease-out both; }
#dsh-root.dsh-lightning .dsh-flash { animation: dsh-flash 1.4s linear both; }
#dsh-root.dsh-lightning .dsh-bolt { animation: dsh-bolt 1.4s linear both; }

/* Two flashes (at ~170ms and ~340ms), then the sky settles. */
@keyframes dsh-storm {
	0% { opacity: 0; }
	8% { opacity: .22; }
	70% { opacity: .16; }
	100% { opacity: 0; }
}

@keyframes dsh-flash {
	0%, 10% { opacity: 0; }
	12% { opacity: .42; }
	17% { opacity: .06; }
	24% { opacity: .3; }
	34%, 100% { opacity: 0; }
}

@keyframes dsh-bolt {
	0%, 10% { opacity: 0; }
	12% { opacity: 1; }
	17% { opacity: .2; }
	24% { opacity: .9; }
	36%, 100% { opacity: 0; }
}

/* ---------- Phones ---------- */

@media (max-width: 768px) {
	#dsh-root { --dsh-drop: 70px; }
	.dsh-web { width: 100px; height: 100px; }
	.dsh-web--bl,
	.dsh-web--br { width: 64px; height: 64px; }
	.dsh-spider { right: 34px; transform: scale(.8); transform-origin: 50% 0; }
	.dsh-ghost { width: 42px; height: 47px; }
	.dsh-bat { width: 38px; height: 21px; }
	.dsh-pumpkin { width: 54px; height: 48px; }
	.dsh-grave { transform: scale(.68); }
	.dsh-mini { width: 30px; height: 34px; }
	.dsh-bolt { width: 80px; height: 40vh; margin-left: -40px; }
}

@media (prefers-reduced-motion: reduce) {
	#dsh-root * { animation: none !important; }
}

@media print {
	#dsh-root { display: none !important; }
}