/* Shared "Onderdeel van ..." credit badge: a decorative sparkle with the credit centered on it.
   Colours are themeable per placement via --ppc-credit-sparkle-color and --ppc-credit-text-color.
   The consumer positions the badge; this file only styles its internals. */
/* The sparkle variant renders the FULL star artwork (viewBox -3 -5 467 468); consumers that want
   the 1440-design corner crop position the box partly off their edge and clip with overflow. */
.ppc-credit-badge {
	position: relative;
	display: grid;
	place-items: center;
	width: 467px;
	height: 468px;
	/* The box itself is inert; only the star-shaped blur layer (clip-path doubles as the hit
	   area) and the credit text catch the pointer, so :hover fires on the star, not the square. */
	pointer-events: none;
	transform-origin: center;
	transition: transform 0.3s ease;
}

/* On hover the whole graphic enlarges, rotates, and fills within the shape. */
.ppc-credit-badge:hover {
	transform: scale(1.06) rotate(6deg);
}

/* Frosted-glass fill of the sparkle. backdrop-filter is unreliable inside an SVG <foreignObject>
   (and won't render on the same element as clip-path in Chromium), so this is a real HTML element:
   the parent carries the clip-path, ::before carries the blur. Sized to the 327x291 viewBox so the
   path() coordinates line up 1:1 with the drawn <svg> on top. */
.ppc-credit-badge__blur {
	/* Absolutely placed so its origin sits at svg user (0,0): the viewBox starts at (-3,-5),
	   so user (0,0) = box pixel (3,5). The path() coords then line up 1:1 with the drawn svg. */
	position: absolute;
	left: 3px;
	top: 5px;
	width: 455px;
	height: 453px;
	pointer-events: auto;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	transition: background-color 0.3s ease;
	clip-path: path("M176.902 4.00024C176.902 4.00024 210.404 124.037 271.586 161.639C332.769 199.239 455 174.902 455 174.902C455 174.902 334.963 208.405 297.361 269.586L295.641 272.5C260.513 334.562 284.091 453 284.091 453C284.091 453 251.631 336.683 192.256 297.183L189.414 295.361C128.314 257.812 6.33207 282.025 6 282.091C6.37759 281.986 122.382 249.535 161.817 190.256L163.639 187.414C201.24 126.231 176.902 4.00024 176.902 4.00024Z");
}

.ppc-credit-badge__blur::before {
	content: "";
	position: absolute;
	inset: 0;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.ppc-credit-badge__sparkle {
	grid-area: 1 / 1;
	width: 467px;
	height: 468px;
	color: var(--ppc-credit-sparkle-color, #ffffff);
}

.ppc-credit-badge:hover .ppc-credit-badge__blur {
	background-color: var(--ppc-credit-sparkle-color, #ffffff);
}

.ppc-credit-badge__text {
	/* Centered on the sparkle's crossing point: svg user (~230,228) = box px (233,233) of 467x468. */
	position: absolute;
	left: 49.9%;
	top: 49.8%;
	z-index: 2;
	margin: 0;
	transform: translate(-50%, -50%) rotate(-21deg);
	transform-origin: center;
	text-align: center;
	white-space: nowrap;
	pointer-events: auto;
	font-family: var(--ppc-font-sans);
	font-style: italic;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--ppc-credit-text-color, var(--ppc-color-credit-text));
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* DIJA shape variant (pakketten): a symmetric 4-point star, larger square viewBox, with the credit
   centred on it rather than on the hero sparkle's lower crossing point. */
.ppc-credit-badge--dija {
	width: 385.061px;
	height: 385.061px;
}

.ppc-credit-badge--dija .ppc-credit-badge__sparkle {
	width: 397.067px;
	height: 397.067px;
}

.ppc-credit-badge--dija .ppc-credit-badge__text {
	left: 50%;
	top: 48.5%;
	font-size: 10.291px;
	transform: translate(-50%, -50%) rotate(-21.46deg);
}

/* Invisible hit layer for the dija star (it has no blur layer): the clip-path is the star's
   outer silhouette, so only the star itself catches the pointer. Aligned to the svg, which is
   397.067 centered in the 385.061 badge box (offset -6px each side). */
.ppc-credit-badge--dija .ppc-credit-badge__hit {
	position: absolute;
	left: -6px;
	top: -6px;
	width: 397.067px;
	height: 397.067px;
	pointer-events: auto;
	clip-path: path("M151.711 3.43056C151.711 3.43056 180.442 106.374 232.911 138.621C285.382 170.867 390.206 149.995 390.206 149.995C390.206 149.995 287.263 178.727 255.016 231.196L253.541 233.695C223.415 286.919 243.636 388.491 243.636 388.491C243.636 388.491 215.798 288.738 164.879 254.863L162.441 253.3C110.042 221.098 5.43053 241.863 5.14575 241.92C5.46957 241.83 104.954 214 138.774 163.163L140.336 160.725C172.582 108.255 151.711 3.43056 151.711 3.43056Z");
}

.ppc-credit-badge__prefix {
	display: block;
}

.ppc-credit-badge__name {
	font-style: normal;
	font-weight: var(--ppc-font-weight-semibold);
	color: inherit;
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.ppc-credit-badge,
	.ppc-credit-badge__blur {
		transition: none;
	}

	.ppc-credit-badge:hover {
		transform: none;
	}
}