/**
 * Article Card Animations
 * 
 * Fade-in-up animation for article cards with staggered delays.
 * Cards animate in on page load and when scrolling into view.
 */

/* Keyframe Animation */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Base animation class */
.josha-article-card {
	opacity: 0;
	transform: translateY(12px);
}

/* Trigger animation when visible */
.josha-article-card.is-visible {
	animation: fadeInUp 0.4s ease-out forwards;
}

/* Show the first three cards immediately, then stagger the rest */
.josha-article-card:nth-child(1).is-visible { animation-delay: 0s; }
.josha-article-card:nth-child(2).is-visible { animation-delay: 0s; }
.josha-article-card:nth-child(3).is-visible { animation-delay: 0s; }
.josha-article-card:nth-child(4).is-visible { animation-delay: 0.05s; }
.josha-article-card:nth-child(5).is-visible { animation-delay: 0.1s; }
.josha-article-card:nth-child(6).is-visible { animation-delay: 0.15s; }
.josha-article-card:nth-child(7).is-visible { animation-delay: 0.2s; }
.josha-article-card:nth-child(8).is-visible { animation-delay: 0.25s; }
.josha-article-card:nth-child(9).is-visible { animation-delay: 0.3s; }
.josha-article-card:nth-child(10).is-visible { animation-delay: 0.35s; }

/* For cards beyond 10, use a fixed delay to avoid too much stagger */
.josha-article-card:nth-child(n+11).is-visible { animation-delay: 0.4s; }

/* Image skeleton shimmer */
@keyframes josha-skeleton-shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

.josha-card-img-wrap {
	background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
	background-size: 200% 100%;
	animation: josha-skeleton-shimmer 1.5s ease-in-out infinite;
}

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

.josha-card-img-wrap > img {
	opacity: 0;
}

.josha-card-img-wrap > img[data-loaded] {
	animation: josha-img-fade-in 0.4s ease-out forwards;
}

.josha-card-img-wrap:has(> img[data-loaded]) {
	animation: none;
	background: transparent;
}

/* Navigation overlay */
.josha-card-nav-overlay {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 20;
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(2px);
	align-items: center;
	justify-content: center;
	border-radius: inherit;
}

.josha-article-card[data-navigating] .josha-card-nav-overlay {
	display: flex;
}

.josha-card-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid #e2e8f0;
	border-top-color: #f97316;
	border-radius: 50%;
	animation: josha-spin 0.6s linear infinite;
}

@keyframes josha-spin {
	to { transform: rotate(360deg); }
}

/* Card PDF dropdown menu */
.josha-card-pdf-menu {
	position: relative;
}

.josha-card-pdf-menu summary {
	list-style: none;
}

.josha-card-pdf-menu summary::-webkit-details-marker {
	display: none;
}

.josha-card-pdf-popover {
	position: absolute;
	right: 0;
	bottom: calc(100% + 10px);
	min-width: 200px;
	padding: 6px;
	border-radius: 14px;
	border: 1px solid #e2e8f0;
	background: #fff;
	box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
	z-index: 30;
}

.josha-card-pdf-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 10px;
	color: #1f2937;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.josha-card-pdf-option:hover {
	background: #fff7ed;
	color: #9a3412;
}

.josha-card-pdf-badge {
	border-radius: 999px;
	background: #fef3c7;
	padding: 2px 7px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #92400e;
}