/* =================================
       Premium Scroll Container
       ================================= */
	.transition-scroll-container.svelte-1w8j9dn {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background: transparent;
		overflow: auto;
	}

	.transition-content.svelte-1w8j9dn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		min-height: 100%;
	}

	/* =================================
       Progress Bar (Premium Monochrome)
       ================================= */
	.scroll-progress-track.svelte-1w8j9dn {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 2px;
		background: rgba(161, 161, 170, 0.1); /* zinc-400/10 */
		z-index: 9999;
		pointer-events: none;
	}

	.scroll-progress-bar.svelte-1w8j9dn {
		height: 100%;
		background: linear-gradient(
			90deg,
			rgba(39, 39, 42, 0.6) 0%,
			/* zinc-800/60 */ rgba(24, 24, 27, 0.9) 100% /* zinc-900/90 */
		);
		transition: width 150ms cubic-bezier(0.22, 1, 0.36, 1);
		will-change: width;
	}

	/* Dark mode specific track and progress bar */
	.dark .scroll-progress-track.svelte-1w8j9dn {
		background: rgba(82, 82, 91, 0.2); /* zinc-600/20 */
	}

	.dark .scroll-progress-bar.svelte-1w8j9dn {
		background: linear-gradient(
			90deg,
			rgba(228, 228, 231, 0.4) 0%,
			/* zinc-200/40 */ rgba(250, 250, 250, 0.8) 100% /* zinc-50/80 */
		);
	}

	/* =================================
       Custom Scrollbar Styling
       Premium Monochromatic Design
       ================================= */

	/* Smooth-scrollbar overrides */
	.scrollbar-track {
		background: transparent !important;
		opacity: 0;
		transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.scrollbar-track-y {
		width: 4px !important;
		right: 4px !important;
	}

	.scrollbar-track-x {
		height: 4px !important;
		bottom: 4px !important;
	}

	.transition-scroll-container.is-hovering.svelte-1w8j9dn .scrollbar-track {
		opacity: 1;
	}

	.scrollbar-thumb {
		background: rgba(113, 113, 122, 0.3) !important; /* zinc-500/30 */
		border-radius: 100px !important;
		transition:
			background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
			width 200ms cubic-bezier(0.22, 1, 0.36, 1),
			height 200ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.scrollbar-thumb:hover {
		background: rgba(82, 82, 91, 0.5) !important; /* zinc-600/50 */
	}

	.scrollbar-thumb:active {
		background: rgba(63, 63, 70, 0.7) !important; /* zinc-700/70 */
	}

	/* Dark mode scrollbar */
	.dark .scrollbar-thumb {
		background: rgba(161, 161, 170, 0.4) !important; /* zinc-400/40 */
	}

	.dark .scrollbar-thumb:hover {
		background: rgba(212, 212, 216, 0.6) !important; /* zinc-300/60 */
	}

	.dark .scrollbar-thumb:active {
		background: rgba(228, 228, 231, 0.7) !important; /* zinc-200/70 */
	}

	/* Expand scrollbar on container hover */
	.transition-scroll-container.is-hovering.svelte-1w8j9dn .scrollbar-track-y {
		width: 6px !important;
	}

	.transition-scroll-container.is-hovering.svelte-1w8j9dn .scrollbar-track-x {
		height: 6px !important;
	}

	/* Native scrollbar fallback (for reduced motion or disabled smooth scroll) */
	.transition-scroll-container.svelte-1w8j9dn::-webkit-scrollbar {
		width: 4px;
		height: 4px;
	}

	.transition-scroll-container.svelte-1w8j9dn::-webkit-scrollbar-track {
		background: transparent;
	}

	.transition-scroll-container.svelte-1w8j9dn::-webkit-scrollbar-thumb {
		background: rgba(113, 113, 122, 0.3);
		border-radius: 100px;
		transition: background-color 200ms ease;
	}

	.transition-scroll-container.svelte-1w8j9dn::-webkit-scrollbar-thumb:hover {
		background: rgba(82, 82, 91, 0.5);
	}

	.dark .transition-scroll-container.svelte-1w8j9dn::-webkit-scrollbar-thumb {
		background: rgba(161, 161, 170, 0.4);
	}

	.dark .transition-scroll-container.svelte-1w8j9dn::-webkit-scrollbar-thumb:hover {
		background: rgba(212, 212, 216, 0.6);
	}

	/* Firefox scrollbar */
	.transition-scroll-container.svelte-1w8j9dn {
		scrollbar-width: thin;
		scrollbar-color: rgba(113, 113, 122, 0.3) transparent;
	}

	.dark .transition-scroll-container.svelte-1w8j9dn {
		scrollbar-color: rgba(161, 161, 170, 0.4) transparent;
	}

	/* =================================
       Accessibility: Reduced Motion
       ================================= */
	@media (prefers-reduced-motion: reduce) {
		.scroll-progress-bar.svelte-1w8j9dn {
			transition: none;
		}

		.scrollbar-track,
		.scrollbar-thumb {
			transition: none !important;
		}
	}

	/* =================================
       Wrapper
       ================================= */
	.transition-inview-wrapper.svelte-4snopx {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	/* =================================
       Content Container
       Premium Animation States
       ================================= */
	.transition-inview-content.svelte-4snopx {
		will-change: transform, opacity, filter;
		transition-property: transform, opacity, filter;
		transition-duration: var(--transition-duration, 700ms);
		transition-delay: var(--transition-delay, 100ms);
		transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	}

	/* =================================
       Animation: Fade
       ================================= */
	.transition-inview-content[data-animation='fade'].svelte-4snopx {
		opacity: 0;
	}

	.transition-inview-content[data-animation='fade'].intersecting.svelte-4snopx {
		opacity: 1;
	}

	/* =================================
       Animation: Slide Up
       ================================= */
	.transition-inview-content[data-animation='slide-up'].svelte-4snopx {
		opacity: 0;
		transform: translateY(var(--transition-distance, 30px));
	}

	.transition-inview-content[data-animation='slide-up'].intersecting.svelte-4snopx {
		opacity: 1;
		transform: translateY(0);
	}

	/* =================================
       Animation: Slide Down
       ================================= */
	.transition-inview-content[data-animation='slide-down'].svelte-4snopx {
		opacity: 0;
		transform: translateY(calc(var(--transition-distance, 30px) * -1));
	}

	.transition-inview-content[data-animation='slide-down'].intersecting.svelte-4snopx {
		opacity: 1;
		transform: translateY(0);
	}

	/* =================================
       Animation: Slide Left (from right)
       ================================= */
	.transition-inview-content[data-animation='slide-left'].svelte-4snopx {
		opacity: 0;
		transform: translateX(var(--transition-distance, 30px));
	}

	.transition-inview-content[data-animation='slide-left'].intersecting.svelte-4snopx {
		opacity: 1;
		transform: translateX(0);
	}

	/* =================================
       Animation: Slide Right (from left)
       ================================= */
	.transition-inview-content[data-animation='slide-right'].svelte-4snopx {
		opacity: 0;
		transform: translateX(calc(var(--transition-distance, 30px) * -1));
	}

	.transition-inview-content[data-animation='slide-right'].intersecting.svelte-4snopx {
		opacity: 1;
		transform: translateX(0);
	}

	/* =================================
       Animation: Scale
       ================================= */
	.transition-inview-content[data-animation='scale'].svelte-4snopx {
		opacity: 0;
		transform: scale(0.95);
	}

	.transition-inview-content[data-animation='scale'].intersecting.svelte-4snopx {
		opacity: 1;
		transform: scale(1);
	}

	/* =================================
       Animation: Blur (Premium)
       ================================= */
	.transition-inview-content[data-animation='blur'].svelte-4snopx {
		opacity: 0;
		filter: blur(8px);
		transform: translateY(calc(var(--transition-distance, 30px) * 0.5));
	}

	.transition-inview-content[data-animation='blur'].intersecting.svelte-4snopx {
		opacity: 1;
		filter: blur(0);
		transform: translateY(0);
	}

	/* =================================
       Stagger Support
       Add to children with nth-child selectors
       ================================= */
	.transition-inview-content.svelte-4snopx > *:nth-child(1) {
		transition-delay: calc(var(--transition-delay, 100ms) + (var(--stagger-delay, 0ms) * 0));
	}
	.transition-inview-content.svelte-4snopx > *:nth-child(2) {
		transition-delay: calc(var(--transition-delay, 100ms) + (var(--stagger-delay, 0ms) * 1));
	}
	.transition-inview-content.svelte-4snopx > *:nth-child(3) {
		transition-delay: calc(var(--transition-delay, 100ms) + (var(--stagger-delay, 0ms) * 2));
	}
	.transition-inview-content.svelte-4snopx > *:nth-child(4) {
		transition-delay: calc(var(--transition-delay, 100ms) + (var(--stagger-delay, 0ms) * 3));
	}
	.transition-inview-content.svelte-4snopx > *:nth-child(5) {
		transition-delay: calc(var(--transition-delay, 100ms) + (var(--stagger-delay, 0ms) * 4));
	}
	.transition-inview-content.svelte-4snopx > *:nth-child(6) {
		transition-delay: calc(var(--transition-delay, 100ms) + (var(--stagger-delay, 0ms) * 5));
	}

	/* =================================
       Accessibility: Reduced Motion
       ================================= */
	.transition-inview-content.reduced-motion.svelte-4snopx {
		transition-duration: 0.01ms !important;
		transition-delay: 0.01ms !important;
		transform: none !important;
		filter: none !important;
	}

	.transition-inview-content.reduced-motion.svelte-4snopx:not(.intersecting) {
		opacity: 0;
	}

	.transition-inview-content.reduced-motion.intersecting.svelte-4snopx {
		opacity: 1;
	}

	@media (prefers-reduced-motion: reduce) {
		.transition-inview-content.svelte-4snopx {
			transition-duration: 0.01ms !important;
			transition-delay: 0.01ms !important;
			transform: none !important;
			filter: none !important;
		}

		.transition-inview-content.svelte-4snopx:not(.intersecting) {
			opacity: 0;
		}

		.transition-inview-content.intersecting.svelte-4snopx {
			opacity: 1;
		}
	}