/*
 * Halloween variant of the matfyz theme.
 *
 * This theme inherits everything from the `matfyz` theme (see info.json) and
 * only overrides the color palette and adds some spooky, CSS-only
 * decorations. The base rules, fonts and @font-face declarations all come
 * from matfyz's stylesheet, imported below, so they never need to be copied.
 * The decorations are SVG sprites from ../svg/.
 */

@import url('../../matfyz/css/theme.css');

:root {
	--hw-night:        #160c20;
	--hw-night-2:      #2a1740;
	--hw-purple:       #4c2873;
	--hw-pumpkin:      #f07f1a;
	--hw-pumpkin-dark: #b4500f;
	--hw-ember:        #ffb347;
	--hw-moon:         #fff4cc;
	--hw-bone:         #fbf5e9;
	--hw-cobweb:       #8d8296;

	/* Overrides of matfyz variables; everything else is inherited. */
	--heading-color: var(--hw-purple);
	--link-color: #a8430a;
	--text-color: #1d1424;
	--main-background-color: var(--hw-bone);
	--header-1-bg-color: var(--hw-night-2);
	--header-2-bg-color: var(--hw-pumpkin-dark);
	--link-focus-bg-color: #fde6cf;
	--link-decoration-color: #a8430a;
	--pre-bg-color: #f4ede0;
	--transclusion-link-bg-color: #fff0e077;
	--toc-bg-color: #f4ede0;
	--error-bg-color: #ffd3c9;
	--diff-deletion-bg-color: #ffd3c944;
	--diff-addition-bg-color: #d6efc444;
	--flash-info-bg-color: #ece2f7;
	--footer-bg-color: var(--hw-night-2);
	--sidebar-bg-color: rgba(76, 40, 115, 0.07);
	--border-color-1: #6e6274;
	--border-color-2: #dacdbd;
	--border-color-error: #9b1c1c;
	--border-bottom-color-1: #c4b6a6;
	--alert-tip: #4e8a2e;
	--alert-important: #6b2fa8;
	--alert-warning: #c9620f;
	--alert-caution: #9b1c1c;
}

::selection {
	background-color: #ffb34766;
}

a:hover {
	text-shadow: 0 0 8px rgba(240, 127, 26, 0.45);
}

#moin-page {
	background: var(--hw-bone);
	/* Room for the goo dripping off the header and the pumpkins on the footer. */
	padding-top: 24px;
	padding-bottom: 56px;
}

/* ===== Halloween decorations (CSS-only, no JS) ===== */

/* --- Night sky in the header: stars, twinkling stars and a full moon --- */
header .header-1 {
	/* Lets the moon and stars sit behind the logo and search via z-index < 0. */
	isolation: isolate;
	padding-top: 18px;
	background-image:
		radial-gradient(circle 1px at 6% 20%,  #ffffffaa 100%, transparent),
		radial-gradient(circle 1px at 31% 72%, #ffffff88 100%, transparent),
		radial-gradient(circle 1.4px at 54% 34%, #ffffffaa 100%, transparent),
		radial-gradient(circle 1px at 77% 82%, #ffffff77 100%, transparent),
		radial-gradient(circle 1px at 93% 14%, #ffffff99 100%, transparent);
	background-size: 260px 64px;

	/* The moon fills matfyz's empty middle grid column, so it never sits
	   behind the title or the search box. */
	&::before {
		content: "";
		grid-area: sitename;
		place-self: center;
		z-index: -1;
		/* A percentage gives no min-content width: the moon shrinks before the title wraps. */
		width: min(34px, 100%);
		aspect-ratio: 1;
		border-radius: 50%;
		background:
			radial-gradient(circle at 34% 38%, #e8d9a8 0 3px, transparent 3.5px),
			radial-gradient(circle at 62% 66%, #e8d9a8 0 4px, transparent 4.5px),
			radial-gradient(circle at 68% 30%, #ede1b6 0 2px, transparent 2.5px),
			radial-gradient(circle at 35% 35%, #fffbe8, var(--hw-moon) 60%, #f0dc9a);
		animation: hw-moon-glow 5s ease-in-out infinite alternate;
		pointer-events: none;
	}

	&::after {
		content: "";
		position: absolute;
		z-index: -2;
		inset: 0;
		background-image:
			radial-gradient(circle 1.3px at 18% 40%, #fff 100%, transparent),
			radial-gradient(circle 1px   at 45% 15%, #fff 100%, transparent),
			radial-gradient(circle 1.6px at 70% 60%, #ffe9b0 100%, transparent),
			radial-gradient(circle 1px   at 88% 35%, #fff 100%, transparent);
		background-size: 190px 64px;
		animation: hw-twinkle 2.8s ease-in-out infinite alternate;
		pointer-events: none;
	}
}

@keyframes hw-moon-glow {
	from { box-shadow: 0 0 10px 2px #ffe9a855, 0 0 30px 8px  #ffb34722; }
	to   { box-shadow: 0 0 16px 5px #ffe9a888, 0 0 46px 16px #ffb34738; }
}

@keyframes hw-twinkle {
	from { opacity: 0.2; }
	to   { opacity: 1; }
}

/* --- Pumpkin goo oozing off the bottom of the header --- */
header .header-2 {
	position: relative;

	&::after {
		content: "";
		position: absolute;
		z-index: 2;
		top: 100%;
		left: 0;
		right: 0;
		height: 22px;
		background-color: var(--header-2-bg-color);
		mask: url('../svg/drips.svg') repeat-x 0 0 / 240px 22px;
		transform-origin: top;
		animation: hw-ooze 4.5s ease-in-out infinite alternate;
		pointer-events: none;
	}
}

@keyframes hw-ooze {
	from { scale: 1 0.75; }
	to   { scale: 1 1.1; }
}

/* --- Witch hat sitting on the M of "Matfyz Wiki" --- */
.logo-title {
	position: relative;
}

.logo-title::before {
	content: "";
	position: absolute;
	top: -0.48em;
	left: 10px;
	width: 1.05em;
	height: 1.05em;
	background: url('../svg/witch-hat.svg') no-repeat center / contain;
	rotate: -16deg;
	transform-origin: 50% 80%;
	animation: hw-hat-wobble 3.5s ease-in-out infinite;
	pointer-events: none;
}

@keyframes hw-hat-wobble {
	0%, 100% { rotate: -16deg; }
	50%      { rotate: -7deg; }
}

/* --- Spider abseiling from the header into the right page margin --- */
#moin-header {
	position: relative;
}

#moin-header::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 100%;
	right: 36px;
	width: 28px;
	height: 40px;
	/* The thread stops where the head starts, 20px above the bottom. */
	background:
		url('../svg/spider.svg') no-repeat bottom center / 28px 28px,
		linear-gradient(var(--hw-cobweb), var(--hw-cobweb)) no-repeat top center / 1px calc(100% - 20px);
	transform-origin: top center;
	animation:
		hw-spider-drop 9s ease-in-out infinite,
		hw-spider-swing 2.6s ease-in-out infinite alternate;
	pointer-events: none;
}

/* Only where the page has an empty right margin to dangle into. */
@media (max-width: 1299px) {
	#moin-header::after {
		display: none;
	}
}

@keyframes hw-spider-drop {
	0%, 15%  { height: 40px; }
	45%, 70% { height: 130px; }
	100%     { height: 40px; }
}

@keyframes hw-spider-swing {
	from { rotate: -5deg; }
	to   { rotate: 5deg; }
}

/* --- Starry night sidebar with a ghost floating at the bottom of the view --- */
#moin-sidebar {
	--text-color: #e8dcf4;
	--heading-color: var(--hw-ember);
	--link-color: #f1dcc4;
	--link-decoration-color: #f1dcc488;
	padding-top: 24px;
	/* `color` was resolved on the wrapper, so the override above needs this. */
	color: var(--text-color);
	background:
		radial-gradient(circle 1px   at 20% 12%, #ffffff99 100%, transparent) 0 0 / 150px 170px,
		radial-gradient(circle 1.4px at 74% 48%, #ffffff77 100%, transparent) 0 0 / 150px 170px,
		radial-gradient(circle 1px   at 42% 86%, #ffe9b088 100%, transparent) 0 0 / 150px 170px,
		linear-gradient(var(--hw-night-2), var(--hw-night));

	a:focus {
		text-decoration-color: var(--hw-ember);
	}

	&::after {
		content: "";
		display: block;
		/* Sticks near the bottom of the viewport while the sidebar is in view. */
		position: sticky;
		top: calc(100vh - 110px);
		width: 52px;
		height: 62px;
		margin: 40px auto 0;
		background: url('../svg/ghost.svg') no-repeat center / contain;
		filter: drop-shadow(0 0 8px #d9c8ff88);
		animation: hw-ghost-float 3.2s ease-in-out infinite alternate;
		pointer-events: none;
	}
}

@keyframes hw-ghost-float {
	from { translate: 0 0;     rotate: -4deg; opacity: 0.95; }
	to   { translate: 0 -12px; rotate: 4deg;  opacity: 0.7; }
}

/* --- Cobweb in the top-right corner of every titled box --- */
div.box-titled {
	position: relative;
}

div.box-titled::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 56px;
	height: 56px;
	background: url('../svg/cobweb.svg') no-repeat top right / contain;
	opacity: 0.75;
	pointer-events: none;
}

/* --- Jack-o'-lanterns flickering on top of the footer --- */
#moin-footer {
	position: relative;
	color: var(--header-color);
}

#moin-footer::before {
	content: "";
	position: absolute;
	bottom: 100%;
	right: 28px;
	width: 120px;
	height: 44px;
	margin-bottom: -6px;
	background: url('../svg/pumpkins.svg') no-repeat bottom / contain;
	filter: drop-shadow(0 0 6px #ffa53ca6);
	animation: hw-flicker 3s linear infinite;
	pointer-events: none;
}

@keyframes hw-flicker {
	0%, 100% { filter: drop-shadow(0 0 6px #ffa53ca6) brightness(1); }
	8%       { filter: drop-shadow(0 0 3px #ffa53c66) brightness(0.9); }
	14%      { filter: drop-shadow(0 0 8px #ffa53cc0) brightness(1.08); }
	37%      { filter: drop-shadow(0 0 5px #ffa53c99) brightness(0.97); }
	41%      { filter: drop-shadow(0 0 2px #ffa53c55) brightness(0.86); }
	46%      { filter: drop-shadow(0 0 7px #ffa53cb0) brightness(1.04); }
	72%      { filter: drop-shadow(0 0 9px #ffa53cc8) brightness(1.1); }
	80%      { filter: drop-shadow(0 0 4px #ffa53c77) brightness(0.94); }
}

/* --- Bats now and then crossing the whole window --- */
body::before,
body::after {
	content: "";
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 44px;
	height: 22px;
	/* bat.svg is a two-frame sprite sheet; hw-flap steps between the frames. */
	background: url('../svg/bat.svg') no-repeat 0 0 / 200% 100%;
	/* Parked off-screen until (and between) their flights. */
	translate: -60px 0;
	pointer-events: none;
}

body::before {
	animation:
		hw-flap 0.28s steps(2, jump-none) infinite,
		hw-bat-bob 1.3s ease-in-out infinite alternate,
		hw-bat-flight-1 26s linear 3s infinite;
}

body::after {
	width: 32px;
	height: 16px;
	animation:
		hw-flap 0.22s steps(2, jump-none) infinite,
		hw-bat-bob 0.9s ease-in-out infinite alternate,
		hw-bat-flight-2 41s linear 14s infinite;
}

@keyframes hw-flap {
	to { background-position-x: 100%; }
}

@keyframes hw-bat-bob {
	from { transform: translateY(-8px); }
	to   { transform: translateY(8px); }
}

@keyframes hw-bat-flight-1 {
	0%        { translate: -60px 14vh; }
	18%, 100% { translate: calc(100vw + 60px) 6vh; }
}

@keyframes hw-bat-flight-2 {
	0%        { translate: calc(100vw + 40px) 64vh; }
	14%, 100% { translate: -40px 28vh; }
}

@media (prefers-reduced-motion: reduce) {
	body::before,
	body::after {
		display: none;
	}

	header .header-1::before,
	header .header-1::after,
	header .header-2::after,
	.logo-title::before,
	#moin-header::after,
	#moin-sidebar::after,
	#moin-footer::before {
		animation: none;
	}
}