/* ==========================================================
   پرشین تیک — بهینه‌سازی تصاویر (فرانت)
   ========================================================== */

.ptik-img-wrap {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--ptik-ph-bg, #f0f0f0);
	width: 100%;
}

/* رنگ placeholder فقط تا قبل از لود می‌ماند. بعد از آن از پیکسل شفاف و ماسک قالب دیده می‌شد. */
.ptik-img-wrap.ptik-has-alpha,
.ptik-img-wrap.is-loaded {
	background: transparent;
}

.ptik-img-wrap picture {
	display: block;
}

.ptik-img-wrap img {
	display: block;
	max-width: 100%;
	height: auto;
}

.ptik-img-wrap.ptik-lazy--fade-up img,
.ptik-img-wrap.ptik-lazy--scale-fade img,
.ptik-img-wrap.ptik-lazy--fade img {
	opacity: 0;
	transition: opacity 0.5s ease, transform 0.6s ease, filter 0.6s ease;
}

.ptik-img-wrap.is-loaded img {
	opacity: 1;
}

.ptik-img-wrap.ptik-lazy--fade-up img {
	transform: translateY(24px);
}

.ptik-img-wrap.ptik-lazy--fade-up.is-loaded img {
	transform: translateY(0);
}

.ptik-img-wrap.ptik-lazy--scale-fade img {
	transform: scale(0.92);
}

.ptik-img-wrap.ptik-lazy--scale-fade.is-loaded img {
	transform: scale(1);
}

/* قاب placeholder برای blur نیست؛ وگرنه کنار عکس‌های باریک‌تر از ستون یک کادر خاکستری می‌ماند. */
.ptik-img-wrap.ptik-lazy--blur {
	display: inline-block;
	width: auto;
	max-width: 100%;
	background: transparent;
	vertical-align: middle;
	line-height: 0;
}

.ptik-img-wrap.ptik-lazy--blur:has(img.aligncenter) {
	display: table;
	margin-right: auto;
	margin-left: auto;
}

/* مثل progressively: محو ۳۰px، بعد از دیده شدن ۰٫۵ ثانیه از ۲۰px تا واضح. */
.ptik-img-wrap.ptik-lazy--blur img {
	opacity: 1;
	filter: blur(30px);
	transform: scale(1.1) translateZ(0);
}

.ptik-img-wrap.ptik-lazy--blur.is-loaded img {
	transform: scale(1) translateZ(0);
	animation: ptik-lazy-blur 0.5s both;
}

@keyframes ptik-lazy-blur {
	0% { filter: blur(20px); }
	100% { filter: blur(0); }
}

/* ---------- لودرها ---------- */

.ptik-img-loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	pointer-events: none;
}

.ptik-img-wrap.is-loaded .ptik-img-loader {
	display: none;
}

/* پیش‌فرض — نوار چرخان */
.ptik-img-loader--default {
	width: 36px;
	height: 36px;
	border: 3px solid rgba(0, 0, 0, 0.08);
	border-top-color: var(--ptik-loader-color, #ccc);
	border-radius: 50%;
	animation: ptik-spin 0.8s linear infinite;
}

@keyframes ptik-spin {
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* چهار نقطه */
.ptik-img-loader--dots {
	width: 32px;
	height: 32px;
	aspect-ratio: 1;
	--_g: no-repeat radial-gradient(farthest-side, var(--ptik-loader-color, #ccc) 90%, transparent);
	background: var(--_g), var(--_g), var(--_g), var(--_g);
	background-size: 40% 40%;
	animation: ptik-dots 1s infinite;
}

@keyframes ptik-dots {
	0%   { background-position: 0 0, 100% 0, 100% 100%, 0 100%; }
	40%,
	50%  { background-position: 100% 100%, 100% 0, 0 0, 0 100%; }
	90%,
	100% { background-position: 100% 100%, 0 100%, 0 0, 100% 0; }
}

/* دایره */
.ptik-img-loader--circle {
	width: 36px;
	height: 36px;
	padding: 6px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--ptik-loader-color, #ccc);
	--_m: conic-gradient(transparent 10%, #000), linear-gradient(#000 0 0) content-box;
	-webkit-mask: var(--_m);
	mask: var(--_m);
	-webkit-mask-composite: source-out;
	mask-composite: subtract;
	animation: ptik-circle-spin 1s infinite linear;
}

@keyframes ptik-circle-spin {
	to { transform: translate(-50%, -50%) rotate(1turn); }
}