/* Vuursteenmijn Winterpopup */
.vsm-wp[hidden] { display: none !important; }

.vsm-wp {
	/* kleuren en letters van vuursteenmijn.nl */
	--vsm-night: #1d1a2b;
	--vsm-night-2: #2d2742;
	--vsm-paper: #fff;
	--vsm-ink: #222;
	--vsm-text: #666;
	--vsm-excursie: #baa91f;
	--vsm-excursie-dark: #9a8b14;
	--vsm-informatie: #009bae;
	--vsm-blauw: #009fe3;
	--vsm-geel: #ffd500;
	--vsm-groen: #95c11f;
	--vsm-lila: #a69dcd;
	--vsm-sans: "Pragati Narrow", Lato, "Arial Narrow", sans-serif;
	--vsm-serif: "Brygada 1918", Georgia, serif;
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: grid;
	place-items: center;
	padding: 16px;
	font-family: var(--vsm-sans);
	line-height: 1.5;
}

.vsm-wp__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(14, 11, 22, .72);
	opacity: 0;
	transition: opacity .5s ease;
}
.vsm-wp.is-open .vsm-wp__backdrop { opacity: 1; }

.vsm-wp__card {
	position: relative;
	width: min(560px, 100%);
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	overflow: auto;
	background: var(--vsm-paper);
	color: var(--vsm-text);
	border-radius: 0;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
	outline: none;
	/* start: dichtgevouwen in het midden, de zwerm "opent" hem */
	clip-path: circle(0% at 50% 50%);
	transform: scale(.85);
	opacity: 0;
}
.vsm-wp.is-open .vsm-wp__card {
	clip-path: circle(120% at 50% 50%);
	transform: none;
	opacity: 1;
	transition: clip-path 1.4s cubic-bezier(.2, .8, .2, 1), transform 1.4s cubic-bezier(.2, .8, .2, 1), opacity .4s ease;
}

.vsm-wp__x {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 0;
	background: rgba(20, 16, 30, .6);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.vsm-wp__x:hover, .vsm-wp__x:focus-visible { background: rgba(20, 16, 30, .85); }

.vsm-wp__band {
	height: 8px;
	background: linear-gradient(90deg,
		var(--vsm-blauw) 0 25%, var(--vsm-geel) 25% 50%,
		var(--vsm-groen) 50% 75%, var(--vsm-lila) 75% 100%);
}

.vsm-wp__art {
	position: relative;
	height: 180px;
	background: radial-gradient(ellipse at 50% 120%, var(--vsm-night-2), var(--vsm-night) 70%);
	line-height: 0;
	overflow: hidden;
}
.vsm-wp__ceiling { position: absolute; top: 0; left: 0; width: 100%; height: 46px; z-index: 1; }
.vsm-wp__scene { position: absolute; left: 50%; top: 0; height: 100%; width: auto; transform: translateX(-50%); }

.vsm-wp__sleeper { transform-box: fill-box; transform-origin: 50% 0; animation: vsm-sway 5s ease-in-out infinite; }
.vsm-wp__zzz text { opacity: 0; animation: vsm-z 3.6s ease-in-out infinite; }
.vsm-wp__zzz text:nth-child(2) { animation-delay: .6s; }
.vsm-wp__zzz text:nth-child(3) { animation-delay: 1.2s; }
@keyframes vsm-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes vsm-z { 0% { opacity: 0; transform: translateY(4px); } 30%, 60% { opacity: .9; } 100% { opacity: 0; transform: translateY(-6px); } }

/* ---------- easter eggs ---------- */
.vsm-wp__card { position: relative; }
.vsm-wp__sleeper { cursor: default; }
.vsm-wp__sleeper.is-poked { animation: vsm-poke .55s ease-in-out; }
@keyframes vsm-poke {
	0%, 100% { transform: rotate(0); }
	20% { transform: rotate(9deg); }
	45% { transform: rotate(-7deg); }
	70% { transform: rotate(4deg); }
}
.vsm-wp__eyes-open { opacity: 0; transition: opacity .2s; }
.vsm-wp.is-awake .vsm-wp__eyes-open { opacity: 1; }
.vsm-wp.is-awake .vsm-wp__eyes-shut, .vsm-wp.is-awake .vsm-wp__zzz { opacity: 0; }

.vsm-wp__bubble {
	position: absolute;
	z-index: 3;
	top: 62px;
	left: calc(50% + 34px);
	max-width: min(230px, calc(50% - 50px));
	padding: 8px 12px 6px;
	background: #fff;
	color: var(--vsm-ink);
	border: 2px solid var(--vsm-ink);
	box-shadow: 3px 3px 0 rgba(0, 0, 0, .25);
	font-family: var(--vsm-sans);
	font-size: 16px;
	line-height: 1.3;
	pointer-events: none;
	opacity: 0;
	transform: translateY(6px) scale(.96);
	transform-origin: 0 50%;
	transition: opacity .25s ease, transform .25s ease;
}
.vsm-wp__bubble::before {
	content: "";
	position: absolute;
	left: -10px;
	top: 12px;
	border: 8px solid transparent;
	border-right-color: var(--vsm-ink);
	border-left: 0;
}
.vsm-wp__bubble.is-in { opacity: 1; transform: none; }
.vsm-wp__bubble.is-long {
	top: 156px;
	left: 16px;
	right: 16px;
	max-width: none;
	text-align: center;
	transform-origin: 50% 0;
}
.vsm-wp__bubble.is-long::before {
	left: calc(50% - 8px);
	top: -10px;
	border: 8px solid transparent;
	border-bottom-color: var(--vsm-ink);
	border-top: 0;
}

.vsm-wp__body { padding: 22px 28px 28px; font-size: 17px; }
.vsm-wp__body p { margin: 0 0 .8em; }
.vsm-wp__body strong { color: var(--vsm-ink); }
.vsm-wp__mijn { font-family: var(--vsm-serif); font-style: italic; font-weight: 400; }

/* zoals de menu-items bovenaan de site: bolletje + "Mijn Excursie" */
.vsm-wp__kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 .4em !important;
	font-size: 15px;
	color: var(--vsm-ink);
}
.vsm-wp__dot {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: linear-gradient(var(--vsm-excursie) 50%, color-mix(in srgb, var(--vsm-excursie) 55%, #fff) 50%);
	flex: none;
}
.vsm-wp__title {
	margin: 0 0 .6em;
	font-family: var(--vsm-sans);
	font-size: clamp(24px, 4.6vw, 30px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--vsm-ink);
	text-wrap: balance;
}
.vsm-wp__title .vsm-wp__mijn { font-weight: 400; }

/* zoals de kolommen onderaan de site: gekleurde kop + lichte tint */
.vsm-wp__museum {
	margin: 1em 0;
	padding: 14px 16px;
	border-radius: 0;
	border-top: 6px solid var(--vsm-informatie);
	background: rgba(0, 155, 174, .12);
}
.vsm-wp__museum p:last-child, .vsm-wp__text p:last-child { margin-bottom: 0; }
.vsm-wp__text { margin: 0 0 .8em; }
.vsm-wp__body a { color: var(--vsm-informatie); }
.vsm-wp__adres { font-weight: 700; color: var(--vsm-ink); }

.vsm-wp__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin-top: 1.2em;
}
.vsm-wp__optout {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	color: var(--vsm-text);
	cursor: pointer;
	user-select: none;
}
.vsm-wp__optout input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--vsm-excursie-dark);
	cursor: pointer;
}
.vsm-wp__btn {
	display: inline-block;
	padding: 11px 30px 9px;
	border: 0;
	border-radius: 0;
	background: var(--vsm-excursie);
	color: var(--vsm-ink);
	font-family: var(--vsm-sans);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .06em;
	cursor: pointer;
}
.vsm-wp__btn:hover, .vsm-wp__btn:focus-visible { background: var(--vsm-excursie-dark); color: #fff; }
.vsm-wp__btn:focus-visible, .vsm-wp__x:focus-visible, .vsm-wp__optout input:focus-visible { outline: 3px solid var(--vsm-informatie); outline-offset: 2px; }

html.vsm-wp-lock, html.vsm-wp-lock body { overflow: hidden !important; }

/* ---------- de zwerm ---------- */
.vsm-swarm {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	pointer-events: none;
	overflow: hidden;
}
.vsm-bat {
	position: absolute;
	left: 0;
	top: 0;
	will-change: transform;
}
.vsm-bat svg { display: block; width: 100%; height: auto; overflow: visible; }
.vsm-bat .w { transform-box: fill-box; animation: var(--flap, .16s) ease-in-out infinite alternate; }
.vsm-bat .wl { transform-origin: 100% 55%; animation-name: vsm-flap-l; }
.vsm-bat .wr { transform-origin: 0% 55%; animation-name: vsm-flap-r; }
@keyframes vsm-flap-l { from { transform: rotate(-22deg); } to { transform: rotate(34deg) scaleY(.65); } }
@keyframes vsm-flap-r { from { transform: rotate(22deg); } to { transform: rotate(-34deg) scaleY(.65); } }

@media (max-width: 480px) {
	.vsm-wp { padding: 10px; }
	.vsm-wp__body { padding: 18px 18px 22px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.vsm-wp.is-open .vsm-wp__card { transition: opacity .3s ease; }
	.vsm-wp__sleeper, .vsm-wp__zzz text { animation: none; }
	.vsm-wp__zzz text { opacity: .8; }
}