/* Elika Animated Dock — استایل پایه، عیناً مطابق ساختار نمونه اصلی animated-dock */

.elika-animated-dock {
	display: flex;
	align-items: flex-end; /* آیکون‌ها از پایین داک "بیرون می‌زنند"، دقیقاً مثل داک مک */
	justify-content: center;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	width: fit-content;
	box-sizing: border-box;
}

.elika-animated-dock-item {
	position: relative;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transform-origin: 50% 100%; /* اسکیل از پایین جعبه انجام می‌شود، نه از وسط */
	will-change: transform;
	/* توجه: بزرگ/کوچک شدن با transform:scale و از طریق جاوااسکریپت (فنر/spring) انجام می‌شود،
	   نه با تغییر width/height؛ به همین دلیل هیچ transition ثابتی روی این المان قرار نمی‌گیرد
	   چون خود اسپرینگ در هر فریم مقدار جدید scale را ست می‌کند. */
}

.elika-animated-dock-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.elika-animated-dock-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	transform-origin: 50% 50%;
	will-change: transform;
	pointer-events: none;
}

.elika-animated-dock-item i,
.elika-animated-dock-item svg {
	pointer-events: none;
}

.elika-animated-dock .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* حالتی که جاوااسکریپت هنوز لود نشده یا روی موبایل/لمسی است: هاور ساده با CSS */
.elika-animated-dock.js-disabled .elika-animated-dock-item {
	transition: transform 0.2s ease-out;
}

.elika-animated-dock.js-disabled .elika-animated-dock-item:hover {
	transform: scale(1.5);
}

.elika-animated-dock.js-disabled .elika-animated-dock-icon-wrap {
	transition: transform 0.2s ease-out;
}

.elika-animated-dock.js-disabled .elika-animated-dock-item:hover .elika-animated-dock-icon-wrap {
	transform: scale(1.2);
}