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

	@keyframes slide-down {
		from {
			opacity: 0;
			transform: translateY(-10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

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

	@keyframes fade-slide-right {
		from {
			opacity: 0;
			transform: translateX(-20px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	/* Flow animations for lines and arrows */
	@keyframes trace-left-to-right {
		0% {
			opacity: 0;
			transform: translateX(-100%);
		}
		20% {
			opacity: 1;
		}
		80% {
			opacity: 1;
		}
		100% {
			opacity: 0;
			transform: translateX(100%);
		}
	}

	@keyframes trace-right-to-left {
		0% {
	        opacity: 0;
	        transform: translateX(100%);
	    }
	    6.67% {  /* 0.2s / 3s */
	        opacity: 1;
	    }
	    26.67% {  /* 0.8s / 3s */
	        opacity: 1;
	    }
	    33.33% {  /* 1s / 3s */
	        opacity: 0;
	        transform: translateX(-100%);
	    }
	    100% {
	        opacity: 0;
	        transform: translateX(-100%);
	    }
	}

	@keyframes arrow-glow {
		0%, 100% {
			opacity: 0;
			filter: blur(4px);
		}
		50% {
			opacity: 0.7;
			filter: blur(6px);
		}
	}
	
	@keyframes arrow-pulse {
		0%, 100% {
			box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
			transform: scale(0.8);
		}
		50% {
			box-shadow: 0 0 8px 2px rgba(59, 130, 246, 0.3);
			transform: scale(1.1);
		}
	}

	@keyframes arrow-color-pulse {
		0%, 100% {
			border-color: rgb(51 65 85);
		}
		50% {
			border-color: rgb(59 130 246);
		}
	}

	@keyframes arrow-color-pulse-ltr {
		0% {
			border-color: rgb(51 65 85);
		}
		25%, 45% {
			border-color: rgb(59 130 246);
		}
		70%, 100% {
			border-color: rgb(51 65 85);
		}
	}

	@keyframes arrow-color-pulse-rtl {
	    0% {
        border-color: rgb(51, 65, 85);
	    }
	    8.33% {  /* 0.25s / 3s */
	        border-color: rgb(59, 130, 246);
	    }
	    15% {  /* 0.45s / 3s */
	        border-color: rgb(59, 130, 246);
	    }
	    23.33% {  /* 0.7s / 3s */
	        border-color: rgb(51, 65, 85);
	    }
	    100% {
	        border-color: rgb(51, 65, 85);
	    }
	}

	@keyframes text-pulse {
		0%, 100% {
			color: rgba(148, 163, 184, 1);
		}
		30%, 50% {
			color: rgba(96, 165, 250, 1);
		}
	}

	@keyframes fastScroll {
	    0% {
	        background-position: 0% 0;
	    }

	    100% {
	        background-position: -170% 0;
	    }
	}

	@keyframes holdEffect {
		0% {
			background-position: -170% 0;
		}
		50% {
			background-position: -120% 0;
		}
		100% {
			background-position: -170% 0;
		}
	}

	span.animateScroll {
		-webkit-background-clip: text;
	    background-clip: text;
	}
	.animateScroll {
	    background: linear-gradient(to right, #47A2FC, #4169E1, #0053C7, #1E90FF, #4169E1, #47A2FC);
		background-size: 400% 100%;
	    color: transparent;
	    animation: fastScroll 3.5s cubic-bezier(0.4, 0, 0.2, 1) forwards,
	    			holdEffect 4s 3.5s infinite;
	}

	.animate-trace-ltr {
		animation: trace-left-to-right 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
		transform: translateX(-100%); 
		opacity: 0; 
		will-change: transform, opacity;
	}

	.animate-trace-rtl {
		animation: trace-right-to-left 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
		transform: translateX(100%); 
		opacity: 0; 
		will-change: transform, opacity;
	}

	.animate-arrow-color-ltr {
		animation: arrow-color-pulse-ltr 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
		animation-delay: 0.5s;
		will-change: border-color;
	}
	
	.animate-arrow-color-rtl {
		animation: arrow-color-pulse-rtl 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
		animation-delay: 0.5s;
		will-change: border-color;
	}

	.flow-container:last-child .flow-text-animation,
	.flow-container:last-child .animate-arrow-pulse,
	.flow-container:last-child .animate-arrow-color-change,
	.flow-container:last-child .animate-arrow-glow-pulse {
		animation-delay: 1.5s;
	}

	.flow-container:last-child .flow-text-animation {
		animation-delay: 1.5s;
	}

	.animate-fade-in {
		animation: fade-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}

	.brand-text {
		position: relative;
		display: inline-flex;
		font-weight: 700;
		color: white;
		transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	.brand-text::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to right,
			rgb(59, 130, 246),
			rgb(96, 165, 250)
		);
		-webkit-background-clip: text;
		background-clip: text;
		opacity: 0;
		transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	.brand-text:hover {
		transform: translateY(-1px);
	}

	.brand-text:hover::before {
		opacity: 1;
	}

	[data-scroll] {
		opacity: 0;
		transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	}

	[data-scroll="fade-up"] {
		transform: translateY(30px);
	}

	[data-scroll].in-view {
		opacity: 1;
		transform: translate(0, 0);
	}

	section {
		scroll-margin-top: 7rem;
	}

	/* Scrollbar hiding for detection window */
	.scrollbar-hide {
		-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none;  /* Firefox */
	}
	.scrollbar-hide::-webkit-scrollbar {
		display: none;  /* Chrome, Safari and Opera */
	}

	/* Detection Window Animations */
	@keyframes detection-appear {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.detection {
		animation: detection-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	}

	.detection-window > div {
		transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	/* Command Completions Styling */
	.completions {
		max-height: 200px;
		overflow-y: auto;
		overflow-x: hidden;
		background: rgba(15, 23, 42, 0.95);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		border-top: 1px solid rgba(51, 65, 85, 0.4);
		position: relative;
		scrollbar-width: thin;
		scrollbar-color: rgba(59, 130, 246, 0.5) rgba(15, 23, 42, 0.3);
	}
	.completions::-webkit-scrollbar {
		width: 5px;
	}
	.completions::-webkit-scrollbar-track {
		background: rgba(15, 23, 42, 0.3);
		border-radius: 3px;
	}
	.completions::-webkit-scrollbar-thumb {
		background: rgba(59, 130, 246, 0.5);
		border-radius: 3px;
	}
	.completions::-webkit-scrollbar-thumb:hover {
		background: rgba(59, 130, 246, 0.7);
	}

	.singleCompletion {
		padding: 0.5rem 1rem;
		display: flex;
		align-items: center;
		gap: 0.5rem;
		cursor: pointer;
		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		border-left: 2px solid transparent;
		position: relative;
		font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	}

	.singleCompletion:hover {
		background: rgba(59, 130, 246, 0.1);
		border-left-color: rgba(59, 130, 246, 0.5);
	}

	.singleCompletion.selected {
		background: rgba(59, 130, 246, 0.15);
		border-left-color: rgb(59, 130, 246);
	}

	.singleCompletion span:first-child {
		color: rgba(255, 255, 255, 0.9);
		font-weight: 500;
	}

	.singleCompletion span:last-child {
		color: rgba(148, 163, 184, 0.8);
		font-weight: 400;
	}

	.command {
		background: rgba(15, 23, 42, 0.95);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		border: none;
		border-top: 1px solid rgba(51, 65, 85, 0.4);
		color: rgba(255, 255, 255, 0.9);
		padding: 0.75rem 1rem;
		font-size: 0.875rem;
		line-height: 1.25rem;
		font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
		width: 100%;
		transition: all 0.2s ease;
	}

	.command:focus {
		outline: none;
		background: rgba(15, 23, 42, 1);
		border-top-color: rgba(59, 130, 246, 0.3);
	}

	.command::placeholder {
		color: rgba(148, 163, 184, 0.5);
	}

	/* Completion animations */
	@keyframes slideInCompletion {
		from {
			opacity: 0;
			transform: translateY(-4px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.completions:not(:empty) {
		animation: slideInCompletion 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.singleCompletion::after {
		content: '';
		position: absolute;
		inset: 0;
		background: rgba(59, 130, 246, 0.03);
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	.singleCompletion:hover::after {
		opacity: 1;
	}

	.command-container {
		position: relative;
		border-top: 1px solid rgba(51, 65, 85, 0.4);
		background: rgba(15, 23, 42, 0.95);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		border-radius: 0 0 var(--radius-xl) var(--radius-xl);
		overflow: hidden;
	}

	.command {
		width: 100%;
		background: transparent;
		color: rgba(255, 255, 255, 0.9);
		padding: 0.875rem 1rem;
		font-size: 0.875rem;
		line-height: 1.25rem;
		font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
		border: none;
		transition: all 0.2s ease;
	}

	.command:focus {
		outline: none;
		background: rgba(15, 23, 42, 1);
	}

	.command::placeholder {
		color: rgba(148, 163, 184, 0.5);
	}

	.completions {
		border-top: 1px solid rgba(51, 65, 85, 0.4);
		background: rgba(15, 23, 42, 0.95);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		max-height: 200px;
	}

	@media (max-width: 640px) {
		.command {
			padding: 0.75rem;
			font-size: 0.8125rem;
		}
	}

	.completions {
		position: absolute;
		max-height: 200px;
		overflow-y: auto;
		overflow-x: hidden;
		background: rgba(15, 23, 42, 0.98);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		border: 1px solid rgba(59, 130, 246, 0.2);
		border-radius: 0;
		box-shadow: 0 -4px 20px -4px rgba(59, 130, 246, 0.15);
		scrollbar-width: thin;
		scrollbar-color: rgba(59, 130, 246, 0.5) rgba(15, 23, 42, 0.3);
		transform-origin: bottom;
		animation: completion-slide 0.2s cubic-bezier(0.16, 1, 0.3, 1);
		margin-bottom: 0;
		display: none;
		z-index: 0;
		width: 100%;
		bottom: 0;
	}

	@keyframes completion-slide {
		from {
			opacity: 0;
			transform: translateY(8px) scale(0.98);
		}
		to {
			opacity: 1;
			transform: translateY(0) scale(1);
		}
	}

	.singleCompletion::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(to right, rgba(59, 130, 246, 0.05), transparent);
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	.singleCompletion:hover::after {
		opacity: 1;
	}

	/* Window Open Button */
	.window-open-button {
		position: fixed;
		bottom: 2rem;
		right: 2rem;
		padding: 0.75rem;
		background: rgba(15, 23, 42, 0.95);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		border: 1px solid rgba(51, 65, 85, 0.4);
		border-radius: 0.75rem;
		cursor: pointer;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 40;
		display: none;
	}

	.window-open-button:hover {
		transform: translateY(-2px);
		background: rgba(30, 41, 59, 0.95);
		border-color: rgba(59, 130, 246, 0.4);
		box-shadow: 0 0 20px -5px rgba(59, 130, 246, 0.3);
	}

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

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

	.window-animate-in {
		animation: window-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	}

	.window-animate-out {
		animation: window-slide-out 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	}

	/* Fullscreen Modal Styles */
	.fullscreen-modal {
		position: fixed;
		inset: 0;
		z-index: 100;
		background: rgba(15, 23, 42, 0.95);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		display: none;
		opacity: 0;
		transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		overflow: hidden;
		padding: 1rem;
	}

	.fullscreen-modal.active {
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 1;
	}

	.fullscreen-modal .window-container {
		width: 100%;
		max-width: 700px;
		transform: scale(0.95);
		transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.fullscreen-modal.active .window-container {
		transform: scale(1);
	}

	/* Animation for fullscreen transition */
	@keyframes fullscreen-appear {
		from {
			opacity: 0;
			transform: scale(0.9);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	.fullscreen-enter {
		animation: fullscreen-appear 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}

	@keyframes fullscreen-exit {
		from {
			opacity: 1;
			transform: scale(1);
		}
		to {
			opacity: 0;
			transform: scale(0.9);
		}
	}

	.fullscreen-exit {
		animation: fullscreen-exit 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}

	.chat {
		position: relative;
	}

	.chat div.console-output div {
		user-select: none;
		cursor: pointer;
		padding: 0.1rem;
		padding-left: 1rem;
		font-family: 'Geist Mono', monospace;
	}

	.fullscreen-modal .chat,
	.fullscreen-modal .detection-window {
		height: 400px !important;
		max-height: calc(70vh - 100px);
	}

	/* Disable body scroll when in fullscreen */
	body.fullscreen-active {
		overflow: hidden;
	}

	@media (max-width: 640px) {
		.fullscreen-modal {
			padding: 0.5rem;
		}
		
		.fullscreen-modal .chat,
		.fullscreen-modal .detection-window {
			height: calc(100vh - 160px) !important;
		}
	}
	
	.fullscreen-modal .window-container .group:hover .bg-gradient-to-br {
		opacity: 0 !important;
	}
	
	.fullscreen-modal .window-container .group {
		background: transparent;
		box-shadow: none;
	}
	
	.fullscreen-modal .window-container .group .rounded-b-xl {
		background-color: rgba(15, 23, 42, 1) !important; 
		box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3);
	}
	
	.fullscreen-modal .window-container .group .rounded-t-xl {
		background-color: rgba(30, 41, 59, 1) !important; 
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	
	.fullscreen-modal .window-container .group .bg-gradient-to-br,
	.fullscreen-modal .window-container .group:hover .bg-gradient-to-br {
		opacity: 0 !important;
		display: none;
	}
	
	.fullscreen-modal .chat,
	.fullscreen-modal .detection-window {
		background-color: rgba(15, 23, 42, 1) !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none !important;
	}
	
	.fullscreen-modal .command-container,
	.fullscreen-modal .command,
	.fullscreen-modal .completions {
		background-color: rgba(15, 23, 42, 1) !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none !important;
	}
	
	.fullscreen-modal .window-container .group:hover .group-hover\:bg-slate-800\/70 {
		background-color: rgba(30, 41, 59, 1) !important;
	}
	
	.fullscreen-modal .window-container .group:hover .group-hover\:border-slate-600\/30 {
		border-color: rgba(71, 85, 105, 0.3);
	}