.puie-link-preview-layer {
	--puie-link-preview-radius: 12px;
	--puie-link-preview-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	--puie-link-preview-bg: #e8e8ea;
	--puie-link-preview-z: 100000;
	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--puie-link-preview-z);
	overflow: hidden;
	pointer-events: none;
	border-radius: var(--puie-link-preview-radius);
	background-color: var(--puie-link-preview-bg);
	box-shadow: var(--puie-link-preview-shadow);
	opacity: 0;
	visibility: hidden;
	transform: scale(0.2);
	transform-origin: 50% 100%;
}

.puie-link-preview-layer.puie-is-visible {
	visibility: visible;
	animation: puie-link-preview-in 720ms linear forwards;
}

.puie-link-preview-layer.puie-is-hiding {
	visibility: visible;
	animation: puie-link-preview-out 160ms ease forwards;
}

.puie-link-preview-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}

.puie-link-preview-layer.puie-is-loaded .puie-link-preview-image {
	opacity: 1;
}

.puie-link-preview-layer.puie-is-error .puie-link-preview-image {
	opacity: 0;
}

@keyframes puie-link-preview-in {
	0% {
		opacity: 0;
		transform: scale(0.2);
	}

	38% {
		opacity: 1;
		transform: scale(1.08);
	}

	68% {
		opacity: 1;
		transform: scale(0.96);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes puie-link-preview-out {
	from {
		opacity: 1;
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(0.35);
	}
}

@media (prefers-reduced-motion: reduce) {
	.puie-link-preview-layer,
	.puie-link-preview-layer.puie-is-visible,
	.puie-link-preview-layer.puie-is-hiding {
		animation: none;
		transform: none;
	}

	.puie-link-preview-layer.puie-is-visible {
		opacity: 1;
		visibility: visible;
	}

	.puie-link-preview-layer.puie-is-hiding {
		opacity: 0;
		visibility: hidden;
	}
}