/* ccf halloween 2026: decorations only. Every rule sits under body.ccf-hw, which halloween.js adds until 1 Nov. */
.ccf-hw .ccf-hw-host { position: relative; }
.ccf-hw .ccf-hw-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }

.ccf-hw .ccf-hw-bar { color: inherit; text-decoration: none; }
.ccf-hw .ccf-hw-bar:hover { text-decoration: underline; }

/* cobweb corners */
.ccf-hw .ccf-hw-web { position: absolute; top: 0; left: 0; width: 150px; height: 150px; color: rgba(255, 255, 255, .38); }
.ccf-hw .ccf-hw-web--r { left: auto; right: 0; transform: scaleX(-1); }
.ccf-hw .ccf-hw-web svg { display: block; width: 100%; height: 100%; }
.ccf-hw .ccf-hw-light .ccf-hw-web { color: rgba(43, 27, 36, .2); }

/* hanging spiders: the thread starts above the edge so the bob never shows a gap */
.ccf-hw .ccf-hw-spider { position: absolute; top: 0; width: 44px; height: calc(var(--len) + 40px); margin-left: -22px; transform-origin: 50% 0; animation: ccf-hw-bob 3.2s ease-in-out infinite alternate; }
.ccf-hw .ccf-hw-spider::before { content: ""; position: absolute; left: 50%; top: -20px; width: 1px; height: calc(var(--len) + 20px); background: rgba(255, 255, 255, .6); }
.ccf-hw .ccf-hw-light .ccf-hw-spider::before { background: rgba(43, 27, 36, .35); }
.ccf-hw .ccf-hw-spider svg { position: absolute; left: 0; top: calc(var(--len) - 8px); width: 44px; height: 40px; }
@keyframes ccf-hw-bob { from { transform: translateY(-8px) rotate(-3deg); } to { transform: translateY(10px) rotate(3deg); } }

/* sparkles */
.ccf-hw .ccf-hw-spark { position: absolute; width: var(--s); height: var(--s); background: var(--c); opacity: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: ccf-hw-spark var(--t) ease-in-out var(--d) infinite; }
@keyframes ccf-hw-spark {
	0% { opacity: 0; transform: translateY(0) scale(.4); }
	30% { opacity: .9; transform: translateY(-20px) scale(1); }
	70% { opacity: .6; transform: translateY(-50px) scale(.8); }
	100% { opacity: 0; transform: translateY(-80px) scale(.3); }
}

/* bats: cross the hero, then wait off screen for the rest of the loop */
.ccf-hw .ccf-hw-bat { position: absolute; left: 0; top: var(--y); width: 64px; filter: drop-shadow(0 0 6px rgba(242, 140, 40, .8)); animation: ccf-hw-fly 22s linear var(--d) infinite both; }
.ccf-hw .ccf-hw-bat svg { display: block; width: 100%; transform-origin: 50% 40%; animation: ccf-hw-flap .22s ease-in-out infinite alternate; }
@keyframes ccf-hw-flap { to { transform: scaleY(.45); } }
@keyframes ccf-hw-fly {
	0% { transform: translate(-80px, 0); }
	8% { transform: translate(25vw, -18px); }
	16% { transform: translate(50vw, 10px); }
	24% { transform: translate(75vw, -14px); }
	32%, 100% { transform: translate(105vw, -30px); }
}

/* the "Boo!" section */
.ccf-hw .ccf-hw-boo { background: linear-gradient(180deg, #FFF0E3 0%, #FFE6F3 100%) !important; }
.ccf-hw .ccf-hw-boo-word { display: inline-block; color: #C2560C; }
.ccf-hw .ccf-hw-wiggle { animation: ccf-hw-wiggle .9s ease-in-out 2; }
@keyframes ccf-hw-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg) scale(1.08); } 75% { transform: rotate(6deg) scale(1.08); } }

@media (max-width: 767px) {
	.ccf-hw .ccf-hw-web { width: 90px; height: 90px; }
	.ccf-hw .ccf-hw-extra { display: none; }
	.ccf-hw .ccf-hw-bat { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.ccf-hw .ccf-hw-spider, .ccf-hw .ccf-hw-wiggle { animation: none; }
	.ccf-hw .ccf-hw-spark, .ccf-hw .ccf-hw-bat { display: none; }
}