/* Хеллоуин (js/halloween.js; на форуме — те же правила в mircs_theme.less). Работает только при html.is-halloween,
   класс ставит скрипт с 24 октября по 2 ноября. Префикс hw-. Палитра: оранжевый #ff7a18, фиолетовый #a64dff, слизь #8cff3a. */

/* шапку не трогаем: она липкая (sticky) — это и так позиционированный блок, украшения (absolute) крепятся к ней */

/* неоновая слизь по нижнему краю шапки */
html.is-halloween .hw-slime {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 2;
	height: 26px;
	pointer-events: none;
	filter: drop-shadow(0 0 6px rgba(166, 77, 255, .7)) drop-shadow(0 0 14px rgba(255, 122, 24, .35));
}

html.is-halloween .hw-slime svg {
	display: block;
	width: 100%;
	height: 100%;
}

html.is-halloween .hw-slime g {
	animation: hw-slime-hue 6s linear infinite;
}

@keyframes hw-slime-hue {
	50% { filter: hue-rotate(40deg) brightness(1.15); }
}

/* паутина неоновая, капли росы светятся */
html.is-halloween .hw-web {
	position: absolute;
	top: 0;
	z-index: 1;
	width: 96px;
	height: 96px;
	color: rgba(200, 160, 255, .35);
	pointer-events: none;
	filter: drop-shadow(0 0 3px rgba(166, 77, 255, .6));
}

html.is-halloween .hw-web svg {
	display: block;
	width: 100%;
	height: 100%;
}

html.is-halloween .hw-dew circle {
	fill: #8cff3a;
	filter: drop-shadow(0 0 3px #8cff3a);
	animation: hw-dew 2.6s ease-in-out infinite;
}

html.is-halloween .hw-dew circle:nth-child(2) { animation-delay: .7s; }
html.is-halloween .hw-dew circle:nth-child(3) { animation-delay: 1.3s; }
html.is-halloween .hw-dew circle:nth-child(4) { animation-delay: 1.9s; }

@keyframes hw-dew {
	50% { opacity: .35; }
}

html.is-halloween .hw-web--left { left: 0; }

html.is-halloween .hw-web--right {
	right: 0;
	transform: scaleX(-1);
}

/* тыква у логотипа — мерцает, как свеча внутри */
html.is-halloween .hw-pumpkin {
	display: inline-block;
	margin-left: 6px;
	font-size: 22px;
	line-height: 1;
	vertical-align: middle;
	animation: hw-candle 2.4s steps(1) infinite, hw-bob 3s ease-in-out infinite;
}

@keyframes hw-candle {
	0% { filter: drop-shadow(0 0 8px rgba(255, 122, 24, .9)); }
	23% { filter: drop-shadow(0 0 14px rgba(255, 170, 40, 1)); }
	31% { filter: drop-shadow(0 0 6px rgba(255, 122, 24, .7)); }
	57% { filter: drop-shadow(0 0 16px rgba(255, 140, 30, 1)); }
	78% { filter: drop-shadow(0 0 9px rgba(255, 122, 24, .85)); }
}

@keyframes hw-bob {
	50% { transform: translateY(-2px) rotate(-6deg); }
}

/* кнопка «Пополнить» — тыквенный перелив */
html.is-halloween .hw-cta {
	background: linear-gradient(110deg, #ff7a18 0%, #a64dff 45%, #ff7a18 70%, #ffd23f 100%) !important;
	background-size: 250% 100% !important;
	color: #fff !important;
	box-shadow: 0 0 18px rgba(255, 122, 24, .45), 0 0 26px rgba(166, 77, 255, .25) !important;
	animation: hw-cta 4s linear infinite;
}

@keyframes hw-cta {
	to { background-position: -250% 0; }
}

/* паук на нити под шапкой, справа */
html.is-halloween .hw-spider {
	position: absolute;
	top: 100%;
	right: 9%;
	z-index: 5;
	width: 24px;
	color: #120d16;
	pointer-events: none;
	transform-origin: 50% -60px;
	animation: hw-sway 5s ease-in-out infinite;
	filter: drop-shadow(0 0 3px rgba(140, 255, 58, .55));
}

html.is-halloween .hw-spider svg {
	display: block;
	width: 24px;
	height: 24px;
}

html.is-halloween .hw-spider__thread {
	display: block;
	width: 1px;
	height: 52px;
	margin: 0 auto -2px;
	background: linear-gradient(rgba(255, 255, 255, 0), rgba(200, 160, 255, .7));
}

@keyframes hw-sway {
	0%, 100% { transform: rotate(-7deg) translateY(0); }
	50% { transform: rotate(7deg) translateY(8px); }
}

/* туман у нижнего края экрана */
.hw-fog {
	position: fixed;
	left: -20%;
	right: -20%;
	bottom: -40px;
	z-index: 1030;
	height: 170px;
	pointer-events: none;
	opacity: .5;
	background:
		radial-gradient(40% 60% at 20% 100%, rgba(166, 77, 255, .28), transparent 70%),
		radial-gradient(35% 55% at 55% 100%, rgba(140, 255, 58, .14), transparent 70%),
		radial-gradient(40% 60% at 85% 100%, rgba(255, 122, 24, .2), transparent 70%);
	animation: hw-fog 18s ease-in-out infinite alternate;
}

@keyframes hw-fog {
	to { transform: translateX(8%); }
}

/* летучие мыши */
.hw-sky {
	position: fixed;
	inset: 0;
	z-index: 1035;
	overflow: hidden;
	pointer-events: none;
}

.hw-bat {
	position: absolute;
	left: -70px;
	width: var(--hw-size, 30px);
	color: #120d16;
	filter: drop-shadow(0 0 4px rgba(166, 77, 255, .8));
	animation: hw-fly 7s linear forwards;
}

.hw-bat svg {
	display: block;
	width: 100%;
	animation: hw-flap .2s ease-in-out infinite alternate;
	transform-origin: 50% 40%;
}

.hw-bat--rtl {
	left: auto;
	right: -70px;
	animation-name: hw-fly-rtl;
}

@keyframes hw-fly {
	0% { transform: translate(0, 0); }
	25% { transform: translate(28vw, -22px); }
	50% { transform: translate(55vw, 16px); }
	75% { transform: translate(82vw, -12px); }
	100% { transform: translate(calc(100vw + 140px), 6px); }
}

@keyframes hw-fly-rtl {
	0% { transform: translate(0, 0) scaleX(-1); }
	25% { transform: translate(-28vw, 18px) scaleX(-1); }
	50% { transform: translate(-55vw, -14px) scaleX(-1); }
	75% { transform: translate(-82vw, 12px) scaleX(-1); }
	100% { transform: translate(calc(-100vw - 140px), -6px) scaleX(-1); }
}

@keyframes hw-flap {
	from { transform: scaleY(1); }
	to { transform: scaleY(.4); }
}

/* призрак */
.hw-ghost {
	position: fixed;
	left: 28px;
	bottom: -120px;
	z-index: 1036;
	width: 74px;
	height: 90px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: bottom .9s cubic-bezier(.3, 1.4, .5, 1);
	filter: drop-shadow(0 0 14px rgba(200, 160, 255, .8));
}

.hw-ghost.is-out {
	bottom: 10px;
	animation: hw-float 2.4s ease-in-out infinite;
}

.hw-ghost svg {
	display: block;
	width: 100%;
	height: 100%;
}

.hw-ghost__body {
	fill: #f4ecff;
}

.hw-ghost__pupil {
	transition: transform .12s linear;
}

.hw-ghost__boo {
	position: absolute;
	left: 70%;
	top: -10px;
	padding: 4px 10px;
	border-radius: 12px 12px 12px 2px;
	background: #ff7a18;
	color: #1b1030;
	font: 900 16px/1.2 Montserrat, sans-serif;
	opacity: 0;
	transform: scale(.5);
	transition: opacity .15s ease, transform .2s cubic-bezier(.3, 1.6, .5, 1);
	pointer-events: none;
}

.hw-ghost.is-boo .hw-ghost__boo {
	opacity: 1;
	transform: scale(1);
}

@keyframes hw-float {
	50% { transform: translateY(-8px) rotate(-3deg); }
}

/* охота на тыквы */
.hw-hunt {
	position: absolute;
	z-index: 1029;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 22px;
	line-height: 30px;
	cursor: pointer;
	filter: drop-shadow(0 0 8px rgba(255, 122, 24, .9));
	transition: transform .2s ease, opacity .4s ease;
	animation: hw-bob 3s ease-in-out infinite;
}

.hw-hunt:hover {
	transform: scale(1.35);
}

.hw-hunt.is-found {
	opacity: 0;
	transform: scale(2.2) rotate(20deg);
}

.hw-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	z-index: 10060;
	padding: 10px 18px;
	border: 1px solid rgba(255, 122, 24, .5);
	border-radius: 999px;
	background: linear-gradient(110deg, #2a1640, #1b1030);
	box-shadow: 0 0 22px rgba(166, 77, 255, .45);
	color: #fff;
	font: 700 14px/1.3 Montserrat, sans-serif;
	transform: translateX(-50%);
	animation: hw-toast-in .35s cubic-bezier(.3, 1.6, .5, 1);
	transition: opacity .5s ease;
}

.hw-toast b {
	color: #ffb35c;
}

.hw-toast.is-out {
	opacity: 0;
}

@keyframes hw-toast-in {
	from { transform: translate(-50%, 20px); opacity: 0; }
}

@media (max-width: 991px) {
	html.is-halloween .hw-web {
		width: 60px;
		height: 60px;
	}

	html.is-halloween .hw-spider {
		right: 22%;
	}

	html.is-halloween .hw-slime {
		height: 20px;
	}

	.hw-fog {
		height: 110px;
	}

	/* над нижней панелью вкладок сайта */
	body:has(.hdr-tabs) .hw-toast {
		bottom: calc(86px + env(safe-area-inset-bottom));
	}
}

@media (prefers-reduced-motion: reduce) {
	html.is-halloween .hw-pumpkin,
	html.is-halloween .hw-spider,
	html.is-halloween .hw-slime g,
	html.is-halloween .hw-dew circle,
	html.is-halloween .hw-cta,
	.hw-hunt {
		animation: none;
	}
}