/* =========================================================
   Instagram CTA Card — icta.css  (v1.1.0)
   ========================================================= */

.icta-card-wrap{
	position:relative;
	width:100%;
	padding:5% 9% 9% 7%;            /* فضا برای آیکون‌های بیرون‌زده */
	box-sizing:border-box;
}

/* ---------------------------------------------------------
   کارت + بوردر سه‌بعدیِ برجسته
   --------------------------------------------------------- */
.icta-card{
	--icta-rim:7px;                 /* ضخامت لبه */
	--icta-rim-color:#141417;       /* رنگ لبه */
	--icta-rim-hi:rgba(255,255,255,0.12);  /* هایلایت لبه */
	--icta-drop:rgba(0,0,0,0.55);   /* رنگ سایه‌ی افتان */
	--icta-drop-y:34px;
	--icta-drop-blur:70px;

	position:relative;
	margin:0 auto;
	box-sizing:border-box;
	overflow:visible;
	isolation:isolate;
	transform:translateZ(0);
	/* بک‌گراند «صفحه» کارت — با کنترل استایل قابل‌تغییر */
	background:linear-gradient(150deg,#2f2f34 0%,#202024 48%,#141417 100%);

	/* لبه‌ی سه‌بعدی: حلقه‌ی توپُر تیره + یک خطِ نازکِ روشن روی آن + براقیِ داخلی */
	box-shadow:
		0 var(--icta-drop-y) var(--icta-drop-blur) var(--icta-drop),
		0 0 0 var(--icta-rim) var(--icta-rim-color),
		0 0 0 calc(var(--icta-rim) + 1.5px) var(--icta-rim-hi),
		inset 0 3px 2px rgba(255,255,255,0.16),
		inset 0 1px 0 rgba(255,255,255,0.22),
		inset 0 -6px 14px rgba(0,0,0,0.55);
}

/* هایلایت شیشه‌ایِ لبه‌ی بالایی */
.icta-card::before{
	content:"";
	position:absolute;
	inset:0;
	border-radius:inherit;
	padding:1.5px;
	background:linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 42%);
	-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;
	        mask-composite:exclude;
	opacity:1;
	pointer-events:none;
	z-index:2;
}

/* نور نرمِ لبه‌ی پایینی (حسِ ضخامتِ سه‌بعدی) */
.icta-card::after{
	content:"";
	position:absolute;
	left:8%;
	right:8%;
	bottom:-2px;
	height:14px;
	border-radius:50%;
	background:radial-gradient(50% 100% at 50% 0%, rgba(255,255,255,0.10), rgba(255,255,255,0) 70%);
	filter:blur(3px);
	pointer-events:none;
	z-index:0;
}

/* ---------------------------------------------------------
   ساختار داخلی
   --------------------------------------------------------- */
.icta-inner{
	position:relative;
	z-index:3;
	display:flex;
	flex-direction:row;
	align-items:center;
	gap:28px;
}

/* آواتار + رینگ کونیکِ اینستاگرام */
.icta-avatar-wrap{
	--r1:#f9ce34; --r2:#ee2a7b; --r3:#6228d7; --r4:#ee2a7b; --ring-angle:210deg;
	position:relative;
	flex:0 0 auto;
	width:150px;
	height:150px;
	border-radius:50%;
	padding:6px;
	box-sizing:border-box;
	display:flex;
	background:conic-gradient(from var(--ring-angle), var(--r1), var(--r2), var(--r3), var(--r4), var(--r1));
	box-shadow:0 8px 26px rgba(238,42,123,0.30);
}
.icta-avatar{
	width:100%;height:100%;
	border-radius:50%;
	overflow:hidden;
	background:#fff;
	box-sizing:border-box;
}
.icta-avatar img{ width:100%;height:100%;object-fit:cover;border-radius:50%;display:block; }

.icta-content{ min-width:0; }
.icta-username{ margin:0 0 12px; color:#fff; line-height:1.1; }
.icta-desc{ margin:0 0 20px; color:#c7c7cc; }

/* دکمه */
.icta-button-wrap{ display:flex; justify-content:flex-start; }
.icta-button{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	text-decoration:none; cursor:pointer; border:0 solid transparent; line-height:1;
	transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
	will-change:transform;
}
.icta-button .icta-btn-icon{ display:inline-flex; }
.icta-button .icta-btn-icon svg{ width:1em; height:1em; fill:currentColor; }
.icta-btn-anim-lift:hover{ transform:translateY(-4px); }
.icta-btn-anim-grow:hover{ transform:scale(1.06); }
.icta-btn-anim-shine{ position:relative; overflow:hidden; }
.icta-btn-anim-shine::after{
	content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
	background:linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
	transform:skewX(-20deg); transition:left .6s ease;
}
.icta-btn-anim-shine:hover::after{ left:140%; }

/* =========================================================
   آیکون‌های شناور سه‌بعدی
   ========================================================= */
.icta-icons{
	position:absolute;
	inset:0;
	z-index:4;
	pointer-events:none;
	perspective:900px;              /* عمقِ سه‌بعدی برای تیلت */
	transform-style:preserve-3d;
}
.icta-icon{
	position:absolute;
	width:80px;
	transform:translate3d(0,0,0);   /* JS: پارالاکس + تیلت اینجا */
	transition:transform .12s ease-out;
	transform-style:preserve-3d;
	will-change:transform;
	pointer-events:auto;
}
.icta-icon-float{
	transform-origin:center;
	animation-duration:4s;
	animation-timing-function:ease-in-out;
	animation-iteration-count:infinite;
}
.icta-icon-inner{
	--icta-rot:0deg;
	--icta-glow:rgba(230,44,150,0.6);
	--icta-glow-size:24px;
	--icta-shadow:rgba(0,0,0,0.45);
	transform:rotate(var(--icta-rot));
	transition:transform .35s cubic-bezier(.34,1.56,.64,1), filter .35s ease;
	filter:
		drop-shadow(0 12px 16px var(--icta-shadow))
		drop-shadow(0 0 var(--icta-glow-size) var(--icta-glow));
}
.icta-icon img{ width:100%; height:auto; display:block; }
.icta-icon-link{ display:block; }

/* انیمیشن‌های پیوسته */
.icta-float-none{ animation:none; }
@keyframes icta-float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
@keyframes icta-sway{ 0%,100%{ transform:rotate(-5deg);} 50%{ transform:rotate(5deg);} }
@keyframes icta-spin{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }
@keyframes icta-pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.08);} }
.icta-float-float{ animation-name:icta-float; }
.icta-float-sway{ animation-name:icta-sway; }
.icta-float-spin{ animation-name:icta-spin; animation-timing-function:linear; }
.icta-float-pulse{ animation-name:icta-pulse; }

/* هاورِ هر آیکون */
.icta-hover-pop:hover{ transform:rotate(var(--icta-rot)) scale(1.18);
	filter:drop-shadow(0 18px 22px var(--icta-shadow)) drop-shadow(0 0 calc(var(--icta-glow-size)*1.9) var(--icta-glow)); }
.icta-hover-spin:hover{ transform:rotate(calc(var(--icta-rot) + 360deg)) scale(1.1); }
.icta-hover-wobble:hover{ animation:icta-wobble .6s ease; }
.icta-hover-bounce:hover{ animation:icta-bounce .6s ease; }
.icta-hover-tilt3d{ transform-style:preserve-3d; }
.icta-hover-tilt3d:hover{ transform:rotate(var(--icta-rot)) perspective(500px) rotateX(18deg) rotateY(-18deg) scale(1.12); }
@keyframes icta-wobble{
	0%,100%{ transform:rotate(var(--icta-rot)); }
	20%{ transform:rotate(calc(var(--icta-rot) - 14deg)); }
	40%{ transform:rotate(calc(var(--icta-rot) + 12deg)); }
	60%{ transform:rotate(calc(var(--icta-rot) - 8deg)); }
	80%{ transform:rotate(calc(var(--icta-rot) + 4deg)); }
}
@keyframes icta-bounce{
	0%,100%{ transform:rotate(var(--icta-rot)) translateY(0); }
	30%{ transform:rotate(var(--icta-rot)) translateY(-22px) scale(1.05); }
	60%{ transform:rotate(var(--icta-rot)) translateY(-6px); }
}

@media (prefers-reduced-motion: reduce){
	.icta-icon-float{ animation:none !important; }
	.icta-icon{ transition:none !important; }
}

/* ریسپانسیو */
@media (max-width:1024px){
	.icta-card-wrap{ padding:9% 9% 11% 9%; }
	.icta-hide-tablet{ display:none !important; }
}
@media (max-width:767px){
	.icta-inner{ flex-direction:column; text-align:center; }
	.icta-content{ text-align:center; }
	.icta-button-wrap{ justify-content:center; }
	.icta-card-wrap{ padding:16% 11% 18% 11%; }
	.icta-hide-mobile{ display:none !important; }
}