/**
 * Diiho Speed Optimization Stylesheet
 * Handles Skeleton / Shimmer placeholders, fade-in transitions, and CLS prevention.
 */

:root {
	--diiho-skeleton-base: rgba(220, 224, 230, 0.55);
	--diiho-skeleton-highlight: rgba(245, 247, 250, 0.85);
}

[data-theme="dark"] {
	--diiho-skeleton-base: rgba(255, 255, 255, 0.05);
	--diiho-skeleton-highlight: rgba(255, 255, 255, 0.12);
}

/* Default dark mode support when data-theme is not explicitly light */
html:not([data-theme="light"]) {
	--diiho-skeleton-base: rgba(255, 255, 255, 0.05);
	--diiho-skeleton-highlight: rgba(255, 255, 255, 0.12);
}

html[data-theme="light"] {
	--diiho-skeleton-base: rgba(220, 224, 230, 0.55);
	--diiho-skeleton-highlight: rgba(245, 247, 250, 0.85);
}

/* Skeleton shimmer animation */
@keyframes diiho-speed-shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

/* Unloaded lazy image with skeleton placeholder */
img.diiho-speed-lazy:not(.diiho-loaded) {
	opacity: 0.15;
	background: linear-gradient(
		90deg,
		var(--diiho-skeleton-base) 25%,
		var(--diiho-skeleton-highlight) 50%,
		var(--diiho-skeleton-base) 75%
	);
	background-size: 200% 100%;
	animation: diiho-speed-shimmer 1.5s infinite ease-in-out;
}

/* Loaded state: smooth fade-in */
img.diiho-speed-lazy {
	transition: opacity 0.35s ease-in-out, transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
}

img.diiho-speed-lazy.diiho-loaded {
	opacity: 1;
	animation: none;
	background: transparent !important;
}

/* No-JS fallback */
.no-js img.diiho-speed-lazy,
noscript img.diiho-speed-lazy {
	opacity: 1 !important;
	animation: none !important;
	background: transparent !important;
}