/*
 * Claprocker Halloween 2026 – Gruseleffekte (Stile)
 * Gehört zu halloween-fun.js. Ohne das Skript passiert nichts Sichtbares.
 */

/* Ebene für alles, was durchs Bild fliegt oder hängt. Fängt keine Klicks ab. */
html.cr-theme-halloween #hw-fun {
	position: fixed;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 99990;
}

/* ---------- Dezente Dekoration am Seitenrand ---------- */
html.cr-theme-halloween #hw-decorations {
	position: fixed;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 99970;
}

html.cr-theme-halloween #hw-decorations > span {
	position: fixed;
	display: block;
	pointer-events: none;
	user-select: none;
}

html.cr-theme-halloween #hw-decorations svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Spinnennetze in den oberen Ecken, jeweils mit kleiner Spinne. */
html.cr-theme-halloween #hw-decorations .hw-web {
	top: 0;
	width: clamp(120px, 16vw, 190px);
	color: rgba(239, 230, 210, 0.68);
	opacity: 0.48;
	filter: drop-shadow(0 0 5px rgba(242, 138, 31, 0.22));
}

html.cr-theme-halloween #hw-decorations .hw-web-left {
	left: 0;
}

html.cr-theme-halloween #hw-decorations .hw-web-right {
	right: 0;
	transform: scaleX(-1);
}

/* Kleine Geister bleiben bewusst halbtransparent und am Rand. */
html.cr-theme-halloween #hw-decorations .hw-decor-ghost {
	width: clamp(42px, 5vw, 68px);
	opacity: 0.2;
	filter: drop-shadow(0 0 12px rgba(239, 230, 210, 0.42));
	animation: hw-decor-float 6s ease-in-out infinite;
}

html.cr-theme-halloween #hw-decorations .hw-decor-ghost-one {
	left: 1.2vw;
	top: 38vh;
}

html.cr-theme-halloween #hw-decorations .hw-decor-ghost-two {
	right: 1.5vw;
	top: 59vh;
	animation-delay: -3s;
}

@keyframes hw-decor-float {
	0%, 100% { transform: translateY(0) rotate(-2deg); }
	50% { transform: translateY(-14px) rotate(2deg); }
}

/* Zwei kleine Kürbisse unten rechts ergänzen den anklickbaren Kürbis links. */
html.cr-theme-halloween #hw-decorations .hw-decor-pumpkin {
	bottom: 10px;
	opacity: 0.82;
	filter: drop-shadow(0 0 9px rgba(242, 138, 31, 0.5));
	animation: hw-decor-pumpkin-glow 3.8s ease-in-out infinite;
}

html.cr-theme-halloween #hw-decorations .hw-decor-pumpkin-one {
	right: 16px;
	width: 58px;
}

html.cr-theme-halloween #hw-decorations .hw-decor-pumpkin-two {
	right: 76px;
	bottom: 7px;
	width: 39px;
	animation-delay: -1.7s;
}

@keyframes hw-decor-pumpkin-glow {
	0%, 100% { opacity: 0.75; transform: translateY(0); }
	50% { opacity: 0.95; transform: translateY(-3px); }
}

/* ---------- Fledermäuse ---------- */
html.cr-theme-halloween #hw-fun .hw-bat {
	position: absolute;
	left: 0;
	top: 0;
	color: #07040c;
	filter: drop-shadow(0 0 3px rgba(242, 138, 31, 0.85));
}

html.cr-theme-halloween #hw-fun .hw-bat svg,
html.cr-theme-halloween #hw-fun .hw-spider svg,
html.cr-theme-halloween #hw-fun .hw-ghost svg {
	display: block;
}

html.cr-theme-halloween #hw-fun .hw-wing {
	transform-origin: 30px 12px;
	animation: hw-flap 0.22s ease-in-out infinite alternate;
}

@keyframes hw-flap {
	to { transform: scaleY(0.4); }
}

/* ---------- Spinne am Faden ---------- */
html.cr-theme-halloween #hw-fun .hw-spider {
	position: absolute;
	top: 0;
	width: 40px;
	height: 40px;
	color: #07040c;
	cursor: pointer;
	pointer-events: auto;
	filter: drop-shadow(0 0 3px rgba(242, 138, 31, 0.85));
}

html.cr-theme-halloween #hw-fun .hw-spider::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: calc(100% - 14px);
	width: 1px;
	height: 100vh;
	background: rgba(239, 230, 210, 0.6);
}

/* ---------- Geist ---------- */
html.cr-theme-halloween #hw-fun .hw-ghost {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	filter: drop-shadow(0 0 8px rgba(239, 230, 210, 0.5));
}

/* ---------- Kürbis unten links ---------- */
html.cr-theme-halloween #hw-pumpkin {
	position: fixed;
	left: 14px;
	bottom: 14px;
	z-index: 99990;
}

html.cr-theme-halloween body #hw-pumpkin .hw-pumpkin-btn,
html.cr-theme-halloween body #hw-pumpkin .hw-pumpkin-btn:hover,
html.cr-theme-halloween body #hw-pumpkin .hw-pumpkin-btn:focus {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	line-height: 0;
	cursor: pointer;
	filter: drop-shadow(0 0 10px rgba(242, 138, 31, 0.6));
}

html.cr-theme-halloween #hw-pumpkin .hw-pumpkin-btn svg {
	display: block;
}

html.cr-theme-halloween #hw-pumpkin .hw-face {
	animation: hw-glow 3.2s ease-in-out infinite;
}

@keyframes hw-glow {
	0%, 100% { opacity: 1; }
	45% { opacity: 0.8; }
	55% { opacity: 0.95; }
	70% { opacity: 0.75; }
}

html.cr-theme-halloween #hw-pumpkin .hw-bubble {
	position: absolute;
	left: 6px;
	bottom: 100%;
	margin-bottom: 10px;
	width: max-content;
	max-width: min(240px, 70vw);
	padding: 0.55em 0.85em;
	background: #251a35;
	color: #efe6d2;
	border: 2px solid #f28a1f;
	border-radius: 12px 12px 12px 2px;
	font: 600 0.95rem/1.35 "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}

html.cr-theme-halloween #hw-pumpkin .hw-bubble.is-on {
	opacity: 1;
	transform: none;
}

/* ---------- Rücksicht ---------- */
@media (prefers-reduced-motion: reduce) {
	html.cr-theme-halloween #hw-fun .hw-wing,
	html.cr-theme-halloween #hw-pumpkin .hw-face,
	html.cr-theme-halloween #hw-decorations .hw-decor-ghost,
	html.cr-theme-halloween #hw-decorations .hw-decor-pumpkin {
		animation: none;
	}

	html.cr-theme-halloween #hw-pumpkin .hw-bubble {
		transition: none;
	}
}

@media (max-width: 767px) {
	html.cr-theme-halloween #hw-decorations .hw-web {
		width: 118px;
		opacity: 0.38;
	}

	html.cr-theme-halloween #hw-decorations .hw-decor-ghost {
		width: 40px;
		opacity: 0.16;
	}

	html.cr-theme-halloween #hw-decorations .hw-decor-pumpkin-one {
		right: 9px;
		width: 47px;
	}

	html.cr-theme-halloween #hw-decorations .hw-decor-pumpkin-two {
		display: none;
	}
}

@media (max-width: 480px) {
	html.cr-theme-halloween #hw-decorations .hw-web-right,
	html.cr-theme-halloween #hw-decorations .hw-decor-ghost-two {
		display: none;
	}
}

@media print {
	html.cr-theme-halloween #hw-fun,
	html.cr-theme-halloween #hw-pumpkin,
	html.cr-theme-halloween #hw-decorations {
		display: none !important;
	}
}