/* Bender — frontend */

.pg-frame {
	position: relative;
	display: block;
	overflow: hidden;
	line-height: 0;
	max-width: 100%;
}

.pg-frame img.pg-lqip {
	width: 100%;
	height: auto;
	display: block;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

/* Con JS attivo la low-res fa da LQIP sfocata finché il canvas non è pronto.
   Senza JS (crawler "semplici", noscript) resta nitida e watermarkata. */
.pg-js .pg-frame:not(.pg-fallback) img.pg-lqip {
	filter: blur(16px) saturate(1.08);
	transform: scale(1.06);
}

.pg-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.45s ease;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.pg-frame.pg-ready .pg-canvas {
	opacity: 1;
}

/* Shimmer di caricamento */
.pg-js .pg-frame:not(.pg-ready):not(.pg-fallback)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%);
	background-size: 250% 100%;
	animation: pg-shimmer 1.4s ease infinite;
	pointer-events: none;
}

@keyframes pg-shimmer {
	from { background-position: 130% 0; }
	to   { background-position: -30% 0; }
}

/* Badge di protezione */
.pg-frame[data-pg-badge].pg-ready::after {
	content: "\00a9 protetta";
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.92);
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(6px);
	padding: 5px 9px;
	border-radius: 999px;
	pointer-events: none;
	opacity: 0;
	animation: pg-badge-in 0.5s ease 0.3s forwards;
}

@keyframes pg-badge-in {
	to { opacity: 1; }
}