/* Floating "My Blog" Button */
.floating-blog-btn {
	position: fixed;
	right: 0;
	top: 50%;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: linear-gradient(135deg, #4a6cf7 0%, #667eea 100%);
	color: #ffffff;
	border-radius: 999px 0 0 999px;
	box-shadow: 0 10px 25px rgba(74, 108, 247, 0.35);
	z-index: 1200;
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.3px;
	--s: 1;
	transform: translateY(-50%) translateX(0) scale(var(--s));
	transition: transform 300ms ease, box-shadow 300ms ease, background 300ms ease, opacity 300ms ease;
	opacity: 0.95;
	will-change: transform;
}

.floating-blog-btn i {
	font-size: 16px;
}

.floating-blog-btn:hover {
	transform: translateY(-50%) translateX(-6px) scale(var(--s));
	box-shadow: 0 16px 32px rgba(74, 108, 247, 0.45);
	opacity: 1;
}

/* Subtle breathing animation using CSS variable to compose with translateY */
@keyframes blogBtnPulse {
	0%, 100% { --s: 1; }
	50% { --s: 1.04; }
}

.floating-blog-btn {
	animation: blogBtnPulse 2.6s ease-in-out infinite;
}

/* Responsive tweaks for small screens while keeping label visible */
@media (max-width: 576px) {
	.floating-blog-btn {
		right: 0;
		padding: 10px 14px;
		gap: 8px;
	}
	.floating-blog-btn i { font-size: 15px; }
	.floating-blog-btn span { display: none; }
}

/* Avoid overlapping with scroll-to-top or other fixed elements commonly at bottom-right */
.floating-blog-btn + .scroll-to-top-btn,
.scroll-to-top-btn {
	margin-bottom: 64px;
}