/* ======================================================================
   FORTUNE HOME - LAZY LOADING ANIMATIONS
   Professional fade-in, slide-up, and stagger effects
   ====================================================================== */

/* ======================================================================
   ANIMATION KEYFRAMES
   ====================================================================== */

@keyframes fhs-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fhs-slide-up {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fhs-slide-in-left {
	from {
		opacity: 0;
		transform: translateX(-24px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fhs-scale-in {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ======================================================================
   LAZY LOAD STATE
   Initial state - hidden and ready for animation
   ====================================================================== */

.fhs-lazy {
	opacity: 0;
	transform: translateY(24px);
	will-change: opacity, transform;
}

/* ======================================================================
   LOADED STATE - Apply animation
   ====================================================================== */

.fhs-loaded {
	animation: fhs-slide-up 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
	animation-delay: var(--fhs-animation-delay, 0ms);
}

/* ======================================================================
   SECTION-SPECIFIC ANIMATIONS
   ====================================================================== */

/* Feature Boxes - Slide up with stagger */
.fhs-feat-grid.style-card .fhs-feat.fhs-lazy {
	opacity: 0;
	transform: translateY(30px);
}

.fhs-feat-grid.style-card .fhs-feat.fhs-loaded {
	animation: fhs-slide-up 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Destination Cards - Fade in */
.fhs-dest-card.fhs-lazy {
	opacity: 0;
	transform: translateY(20px);
}

.fhs-dest-card.fhs-loaded {
	animation: fhs-slide-up 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Delight Items - Slide in from left */
.fhs-delight-item.fhs-lazy {
	opacity: 0;
	transform: translateX(-24px);
}

.fhs-delight-item.fhs-loaded {
	animation: fhs-slide-in-left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Review Cards - Fade and scale */
.fhs-review-card.fhs-lazy {
	opacity: 0;
	transform: scale(0.95) translateY(12px);
}

.fhs-review-card.fhs-loaded {
	animation: fhs-scale-in 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* FAQ Items - Slide up */
.fhs-faq-item.fhs-lazy {
	opacity: 0;
	transform: translateY(16px);
}

.fhs-faq-item.fhs-loaded {
	animation: fhs-slide-up 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ======================================================================
   RESPONSIVE ADJUSTMENTS
   ====================================================================== */

@media (max-width: 768px) {
	.fhs-lazy {
		transform: translateY(16px);
	}

	.fhs-loaded {
		animation-duration: 0.6s;
	}

	.fhs-blog-image {
		height: 160px;
	}

	.fhs-blog-content {
		padding: 16px;
	}

	.fhs-blog-title {
		font-size: 14px;
	}

	.fhs-blog-excerpt {
		font-size: 13px;
		-webkit-line-clamp: 2;
	}
}

/* ======================================================================
   REDUCED MOTION SUPPORT
   Respect user's motion preferences
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.fhs-lazy {
		opacity: 1;
		transform: none;
	}

	.fhs-loaded {
		animation: none;
	}

	.fhs-blog-card,
	.fhs-blog-link {
		transition: none;
	}

	.fhs-blog-card:hover {
		transform: none;
	}
}

/* ======================================================================
   LOADING SKELETON (Optional)
   Show during loading before lazy animation
   ====================================================================== */

.fhs-loading-skeleton {
	background: linear-gradient(
		90deg,
		#f0f0f0 25%,
		#e0e0e0 50%,
		#f0f0f0 75%
	);
	background-size: 200% 100%;
	animation: fhs-loading-pulse 1.5s infinite;
}

@keyframes fhs-loading-pulse {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* ======================================================================
   STAGGER EFFECT HELPER
   For use with [data-fhs-stagger] attribute
   ====================================================================== */

[data-fhs-stagger] .fhs-lazy {
	animation: fhs-slide-up 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ======================================================================
   DARK MODE SUPPORT
   ====================================================================== */

@media (prefers-color-scheme: dark) {
	.fhs-blog-card {
		background: #1a1a1a;
		border-color: #333333;
	}

	.fhs-blog-card:hover {
		border-color: #B8922D;
		box-shadow: 0 12px 32px rgba(184, 146, 45, 0.2);
	}

	.fhs-blog-category {
		background: rgba(184, 146, 45, 0.15);
		color: #C4A237;
	}

	.fhs-blog-title {
		color: #ffffff;
	}

	.fhs-blog-excerpt {
		color: #cccccc;
	}

	.fhs-blog-meta {
		border-top-color: #333333;
	}

	.fhs-blog-date {
		color: #888888;
	}

	.fhs-loading-skeleton {
		background: linear-gradient(
			90deg,
			#2a2a2a 25%,
			#333333 50%,
			#2a2a2a 75%
		);
	}
}