/* ==========================================================
   Roomcility data en privacy
   Uitleg links, rechts de kaart van Nederland die de pen
   natekent. Animatie start met .is-play via rc-data.js.
   ========================================================== */

.rc-dp {
	--rc-dp-bg: #fff;
	--rc-dp-land: var(--rc-bg);
	--rc-dp-pin-x: 45%;
	--rc-dp-pin-y: 52%;
	--rc-dp-pt: 110px;
	--rc-dp-pb: 120px;
	--rc-dp-pt-m: 72px;
	--rc-dp-pb-m: 80px;

	overflow: hidden;
	padding: var(--rc-dp-pt) 0 var(--rc-dp-pb);
	background: var(--rc-dp-bg);
	color: var(--rc-ink);
}
.rc-dp__wrap {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: 64px;
	align-items: center;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 32px;
	box-sizing: border-box;
}

/* ── Tekst ── */
.rc-dp__hand { margin: 0 0 6px; font-size: 32px; color: var(--rc-ink-2); transform: rotate(-4deg); }
.rc-dp__title { margin: 0; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; color: var(--rc-ink); text-wrap: balance; }
.rc-dp__points { display: flex; flex-direction: column; gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.rc-dp__points li { display: flex; gap: 14px; font-size: 15.5px; line-height: 1.55; color: var(--rc-ink-2); }
.rc-dp__points .rc-ic { --rc-ic-size: 38px; margin-top: 2px; }
.rc-dp__points b { display: block; font-weight: 650; color: var(--rc-ink); }

.rc-dp__go { position: relative; display: inline-block; margin-top: 30px; font-size: 15px; font-weight: 650; color: var(--rc-ink); text-decoration: none; }
.rc-dp__go:hover { color: var(--rc-ink); }
.rc-dp__go .rc-pen { position: absolute; left: -2px; bottom: -9px; width: calc(100% + 6px); height: 12px; --rc-pen-width: 2.2; }
.rc-dp__go .rc-pen path { transition: stroke-dashoffset .45s cubic-bezier(.45, .1, .3, 1); }
.rc-dp__go:hover .rc-pen path,
.rc-dp__go:focus-visible .rc-pen path { stroke-dashoffset: 0; }

/* ── Kaart ── */
.rc-dp__map { position: relative; justify-self: center; width: 320px; aspect-ratio: 220 / 260; }
.rc-dp__map > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rc-dp__land path { fill: var(--rc-dp-land); opacity: 0; transition: opacity .6s .2s; }
.rc-dp.is-play .rc-dp__land path { opacity: 1; }
.rc-dp__line { --rc-pen-width: 1.8; --rc-pen-speed: 2.4s; --rc-pen-delay: .2s; }

.rc-dp__pin {
	position: absolute;
	left: var(--rc-dp-pin-x);
	top: var(--rc-dp-pin-y);
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: -28px 0 0 -28px;
	border-radius: 50%;
	background: var(--rc-grad);
	box-shadow: 0 12px 26px var(--rc-glow);
	opacity: 0;
	transform: scale(.4);
	transition: opacity .3s 1.8s, transform .5s var(--rc-ease) 1.8s;
}
.rc-dp__pin img { width: 34px; height: auto; filter: brightness(0) invert(1); }
.rc-dp.is-play .rc-dp__pin { opacity: 1; transform: none; }
.rc-dp__pin::after {
	content: "";
	position: absolute;
	inset: -10px;
	border: 2px solid var(--rc-accent);
	border-radius: 50%;
	opacity: 0;
}
.rc-dp.is-play .rc-dp__pin::after { animation: rc-dp-pulse 2.4s 2.4s infinite; }
@keyframes rc-dp-pulse { 0% { transform: scale(.8); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } }

.rc-dp__note {
	position: absolute;
	left: 92%;
	top: 52%;
	font-family: var(--rc-hand);
	font-size: 25px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--rc-pen);
	white-space: nowrap;
	transform: rotate(-5deg);
	opacity: 0;
	transition: opacity .4s 2.2s;
}
.rc-dp.is-play .rc-dp__note { opacity: 1; }

/* ── Tablet en mobiel ── */
@media (max-width: 1100px) {
	.rc-dp { padding: var(--rc-dp-pt-m) 0 var(--rc-dp-pb-m); }
	.rc-dp__wrap { grid-template-columns: 1fr; gap: 40px; padding: 0 20px; }
	.rc-dp__title { font-size: 30px; }
	.rc-dp__map { width: 260px; margin-bottom: 70px; }
	.rc-dp__note { left: 50%; top: auto; bottom: -70px; font-size: 20px; text-align: center; transform: translateX(-50%) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
	.rc-dp__land path,
	.rc-dp__pin,
	.rc-dp__note { opacity: 1; transform: none; transition: none; }
	.rc-dp__note { transform: rotate(-5deg); }
	.rc-dp.is-play .rc-dp__pin::after { animation: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1100px) {
	.rc-dp__note { transform: translateX(-50%) rotate(-4deg); }
}