/* --- 404 Not Found --- */
.nf-wrap {
	padding: 64px 16px;
}

/* “Onda interrotta” senza toccare il file immagine: due sezioni tagliate e sfalsate */
.broken-wave {
	position: relative;
	width: 160px; /* regola a piacere */
	filter: drop-shadow(0 12px 24px rgba(0,0,0,.25));
}

	.broken-wave img {
		width: 100%;
		height: auto;
		display: block;
		opacity: 0; /* nascondo l'originale, uso i cloni via ::before/::after */
	}

	/* parte alta */
	.broken-wave::before,
	.broken-wave::after {
		content: "";
		position: absolute;
		inset: 0;
		background: url("Images/logo-slim-min.webp") center/contain no-repeat;
	}

	/* taglio la parte alta e la sposto leggermente */
	.broken-wave::before {
		/* “taglio” con clip-path: metà superiore con bordo frastagliato */
		clip-path: polygon(0% 0%, 100% 0%, 100% 46%, 75% 50%, 60% 48%, 40% 52%, 25% 49%, 0% 52%);
		transform: translate(-4px, -3px) rotate(-1deg);
		filter: drop-shadow(-2px 3px 0 rgba(255,255,255,.12));
	}

	/* taglio la parte bassa e la sposto nel verso opposto */
	.broken-wave::after {
		clip-path: polygon(0% 52%, 25% 49%, 40% 52%, 60% 48%, 75% 50%, 100% 46%, 100% 100%, 0% 100%);
		transform: translate(4px, 3px) rotate(1deg);
		filter: drop-shadow(2px 3px 0 rgba(0,0,0,.08));
	}

/* opzionale: micro-animazione “glitch” */
@media (prefers-reduced-motion: no-preference) {
	.broken-wave::before,
	.broken-wave::after {
		transition: transform .2s ease;
	}

	.broken-wave:hover::before {
		transform: translate(-6px,-4px) rotate(-1.5deg);
	}

	.broken-wave:hover::after {
		transform: translate(6px, 4px) rotate(1.5deg);
	}
}