/* =========================================================================
 * Post Detail Page Animations
 *
 * Smooth, attractive animations for a premium feel
 * ========================================================================= */

/* =========================================================================
 * Define Keyframe Animations
 * ========================================================================= */

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-40px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(40px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}


@keyframes softGlow {
	0% {
		box-shadow: 0 10px 30px rgba(38, 99, 235, 0);
	}
	50% {
		box-shadow: 0 10px 40px rgba(38, 99, 235, 0.15);
	}
	100% {
		box-shadow: 0 10px 30px rgba(38, 99, 235, 0);
	}
}

@keyframes floatAnimation {
	0%, 100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-8px);
	}
}

@keyframes shimmer {
	0% {
		background-position: -1000px 0;
	}
	100% {
		background-position: 1000px 0;
	}
}

/* =========================================================================
 * Post Header Animations
 * ========================================================================= */

.rc-blog .rc-back {
	animation: slideInLeft 0.6s ease-out 0.1s both;
}

.rc-blog .rc-post-title {
	animation: fadeInUp 0.8s ease-out 0.2s both;
}

.rc-blog .rc-post-meta {
	animation: fadeInUp 0.8s ease-out 0.3s both;
}

/* =========================================================================
 * Image Animation
 * ========================================================================= */

.rc-blog .rc-post-media {
	animation: fadeInUp 0.8s ease-out 0.4s both;
	overflow: hidden;
	border-radius: 12px;
}

.rc-blog .rc-post-media img {
	transition: none !important;
}

/* =========================================================================
 * Content Animation
 * ========================================================================= */

.rc-blog .rc-post-content {
	animation: fadeInUp 0.8s ease-out 0.5s both;
}

/* Animate paragraphs as they come into view */
.rc-blog .rc-post-content p {
	animation: fadeInUp 0.6s ease-out forwards;
	animation-delay: 0.6s;
}

.rc-blog .rc-post-content p:nth-child(2) { animation-delay: 0.65s; }
.rc-blog .rc-post-content p:nth-child(3) { animation-delay: 0.7s; }
.rc-blog .rc-post-content p:nth-child(4) { animation-delay: 0.75s; }
.rc-blog .rc-post-content p:nth-child(5) { animation-delay: 0.8s; }

/* Animate headings within content */
.rc-blog .rc-post-content h2,
.rc-blog .rc-post-content h3,
.rc-blog .rc-post-content h4 {
	animation: slideInLeft 0.7s ease-out forwards;
}

.rc-blog .rc-post-content h2 { animation-delay: 0.6s; }
.rc-blog .rc-post-content h3 { animation-delay: 0.65s; }
.rc-blog .rc-post-content h4 { animation-delay: 0.7s; }

/* Animate lists */
.rc-blog .rc-post-content ul,
.rc-blog .rc-post-content ol {
	animation: fadeInUp 0.7s ease-out 0.65s both;
}

.rc-blog .rc-post-content li {
	animation: fadeInUp 0.5s ease-out forwards;
}

.rc-blog .rc-post-content li:nth-child(1) { animation-delay: 0.7s; }
.rc-blog .rc-post-content li:nth-child(2) { animation-delay: 0.75s; }
.rc-blog .rc-post-content li:nth-child(3) { animation-delay: 0.8s; }
.rc-blog .rc-post-content li:nth-child(4) { animation-delay: 0.85s; }
.rc-blog .rc-post-content li:nth-child(5) { animation-delay: 0.9s; }

/* =========================================================================
 * Button Animations
 * ========================================================================= */

.rc-blog .rc-post-content .wp-block-button__link,
.rc-blog .entry-content .wp-block-button__link {
	animation: fadeInUp 0.8s ease-out 0.7s both;
	position: relative;
	overflow: hidden;
}

.rc-blog .rc-post-content .wp-block-button__link::before,
.rc-blog .entry-content .wp-block-button__link::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.2);
	transition: left 0.4s ease;
	z-index: 0;
}

.rc-blog .rc-post-content .wp-block-button__link:hover::before,
.rc-blog .entry-content .wp-block-button__link:hover::before {
	left: 100%;
}

.rc-blog .rc-post-content .wp-block-button__link span,
.rc-blog .entry-content .wp-block-button__link span {
	position: relative;
	z-index: 1;
}

/* =========================================================================
 * Tags Animation
 * ========================================================================= */

.rc-blog .rc-post-tags {
	animation: fadeInUp 0.8s ease-out 0.6s both;
}

.rc-blog .rc-post-tags a {
	display: inline-block;
	animation: fadeInUp 0.5s ease-out forwards;
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rc-blog .rc-post-tags a:nth-child(1) { animation-delay: 0.65s; }
.rc-blog .rc-post-tags a:nth-child(2) { animation-delay: 0.7s; }
.rc-blog .rc-post-tags a:nth-child(3) { animation-delay: 0.75s; }
.rc-blog .rc-post-tags a:nth-child(4) { animation-delay: 0.8s; }
.rc-blog .rc-post-tags a:nth-child(5) { animation-delay: 0.85s; }

.rc-blog .rc-post-tags a:hover {
	transform: translateY(-4px) scale(1.05);
	box-shadow: 0 8px 20px rgba(38, 99, 235, 0.25);
}

/* =========================================================================
 * Navigation Animation
 * ========================================================================= */

.rc-blog .rc-post-nav {
	animation: fadeInUp 0.8s ease-out 0.7s both;
}

.rc-blog .rc-post-nav-item {
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rc-blog .rc-post-nav-item:hover {
	transform: translateX(8px);
}

.rc-blog .rc-post-nav-item.is-prev:hover {
	transform: translateX(-8px);
}

.rc-blog .rc-post-nav-item:hover .rc-post-nav-title {
	color: #2663EB;
}

/* =========================================================================
 * Sidebar Rail Animation
 * ========================================================================= */

.rc-blog .rc-rail {
	animation: slideInRight 0.7s ease-out 0.2s both;
}

.rc-blog .rc-side-title-text {
	animation: fadeInUp 0.7s ease-out 0.3s both;
}

.rc-blog .rc-side-item {
	animation: fadeInUp 0.6s ease-out forwards;
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rc-blog .rc-side-item:nth-child(1) { animation-delay: 0.4s; }
.rc-blog .rc-side-item:nth-child(2) { animation-delay: 0.45s; }
.rc-blog .rc-side-item:nth-child(3) { animation-delay: 0.5s; }
.rc-blog .rc-side-item:nth-child(4) { animation-delay: 0.55s; }
.rc-blog .rc-side-item:nth-child(5) { animation-delay: 0.6s; }

.rc-blog .rc-side-item:hover {
	transform: translateY(-4px);
	border-color: #2663EB;
	box-shadow: 0 12px 30px rgba(38, 99, 235, 0.15);
}

.rc-blog .rc-side-item img {
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rc-blog .rc-side-item:hover img {
	transform: scale(1.08);
}

/* =========================================================================
 * Link Hover Effects
 * ========================================================================= */

.rc-blog .rc-post-content a,
.rc-blog .entry-content a {
	position: relative;
	transition: color 0.3s ease;
}

.rc-blog .rc-post-content a::after,
.rc-blog .entry-content a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, #2663EB, #773DED);
	transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rc-blog .rc-post-content a:hover::after,
.rc-blog .entry-content a:hover::after {
	width: 100%;
}

/* =========================================================================
 * Blockquote Animation
 * ========================================================================= */

.rc-blog .rc-post-content blockquote {
	animation: slideInLeft 0.7s ease-out 0.6s both;
	transition: all 0.3s ease;
	border-left: 4px solid #2663EB;
}

.rc-blog .rc-post-content blockquote:hover {
	border-left-color: #773DED;
	transform: translateX(4px);
	box-shadow: -4px 0 12px rgba(38, 99, 235, 0.1);
}

/* =========================================================================
 * Code Block Animation
 * ========================================================================= */

.rc-blog .rc-post-content pre,
.rc-blog .entry-content pre {
	animation: fadeInUp 0.7s ease-out forwards;
	transition: all 0.3s ease;
}

.rc-blog .rc-post-content pre:hover,
.rc-blog .entry-content pre:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

/* =========================================================================
 * Smooth Scroll Behavior
 * ========================================================================= */

html {
	scroll-behavior: smooth;
}

/* =========================================================================
 * Page Load Animation
 * ========================================================================= */

.rc-blog.rc-blog--single {
	animation: fadeInUp 0.6s ease-out;
}

/* =========================================================================
 * Responsive Adjustments
 * ========================================================================= */

@media (max-width: 768px) {
	.rc-blog .rc-back {
		animation: slideInDown 0.6s ease-out 0.1s both;
	}

	.rc-blog .rc-rail {
		animation: slideInUp 0.7s ease-out 0.2s both;
	}

	.rc-blog .rc-post-media img {
		animation: imageZoom 8s ease-in-out 0.4s both;
	}

	.rc-blog .rc-post-content p {
		animation-delay: 0.5s;
	}

	.rc-blog .rc-post-content p:nth-child(2) { animation-delay: 0.53s; }
	.rc-blog .rc-post-content p:nth-child(3) { animation-delay: 0.56s; }
}

/* =========================================================================
 * Reduce Motion for Accessibility
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}