/* ProofPulse Pro – extra templates and mobile top position */

/* Template: Glass ---------------------------------------------------- */

.pp-tpl-glass {
	background: color-mix(in srgb, var(--pp-bg) 74%, transparent);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	border: 1px solid color-mix(in srgb, var(--pp-text) 14%, transparent);
}
.pp-tpl-glass .pp-media {
	background: color-mix(in srgb, var(--pp-accent) 22%, transparent);
}

/* Template: Pill ----------------------------------------------------- */

.pp-tpl-pill { border-radius: 999px; }
.pp-tpl-pill .pp-inner { padding: 8px 46px 8px 8px; gap: 12px; }
.pp-tpl-pill .pp-media {
	flex-basis: 48px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
}
.pp-tpl-pill .pp-meta { font-size: 11.5px; }
.pp-tpl-pill .pp-close { top: 50%; right: 12px; transform: translateY(-50%); }
.pp-tpl-pill.pp-size-sm .pp-media { flex-basis: 38px; width: 38px; height: 38px; }
.pp-tpl-pill.pp-size-lg .pp-media { flex-basis: 58px; width: 58px; height: 58px; }

/* Mobile: top position ------------------------------------------------ */

@media (max-width: 640px) {
	.pp-container.pp-mpos-top {
		top: calc(12px + env(safe-area-inset-top, 0px));
		bottom: auto;
	}
	.admin-bar .pp-container.pp-mpos-top { top: 58px; }
	.pp-mpos-top .pp-notice { --pp-shift: -14px; }
}

/* Motion: pulse ring around the image ---------------------------------- */

.pp-motion-pulse.is-visible .pp-media {
	animation: pp-pulse 2.6s ease-out 1s infinite;
}
@keyframes pp-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pp-accent) 45%, transparent); }
	70%, 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--pp-accent) 0%, transparent); }
}

/* Motion: one gentle nudge after appearing ----------------------------- */

.pp-motion-nudge { transform-origin: 50% 100%; }
.pp-motion-nudge.is-visible {
	animation: pp-nudge 0.9s ease-in-out 1.6s 1 both;
}
@keyframes pp-nudge {
	0%, 100% { rotate: 0deg; }
	20% { rotate: -2deg; }
	40% { rotate: 1.6deg; }
	60% { rotate: -1deg; }
	80% { rotate: 0.5deg; }
}

/* Motion: one soft shine across the card ------------------------------- */

.pp-motion-shine::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%);
	background-size: 250% 100%;
	background-position: 150% 0;
	opacity: 0;
}
.pp-motion-shine.is-visible::after {
	animation: pp-shine 1.3s ease-in-out 1.2s 1 both;
}
@keyframes pp-shine {
	from { opacity: 1; background-position: 150% 0; }
	to { opacity: 1; background-position: -50% 0; }
}