/* Evnoia Website - Custom Styles */

/* Alpine.js cloaking */
[x-cloak] {
	display: none !important;
}

/* Page transition styles */
body {
	animation: pageTransitionIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

body.page-exit {
	animation: pageTransitionOut 0.3s cubic-bezier(0.55, 0.06, 0.68, 0.19)
		forwards;
}

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

/* Gradient backgrounds */
.hero-gradient {
	background: linear-gradient(135deg, #551a8b 0%, #7b2cbf 100%);
}

/* Card hover effects */
.card-hover {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
		0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Fade in animation */
.fade-in {
	animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Product card styling */
.product-card {
	background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
}

.dark .product-card {
	background: linear-gradient(145deg, #374151 0%, #4b5563 100%);
}

/* Contact form styling */
.contact-form {
	background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
}

.dark .contact-form {
	background: linear-gradient(145deg, #374151 0%, #4b5563 100%);
}

/* Process step connector */
.process-step {
	position: relative;
}

.process-step::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -20px;
	width: 40px;
	height: 2px;
	background: linear-gradient(90deg, #551a8b, #7b2cbf);
}

.process-step:last-child::after {
	display: none;
}

/* Dark mode specific styles */
.dark {
	color-scheme: dark;
}

/* Background colors for dark mode */
.dark .bg-white {
	background-color: #1f2937 !important;
}

.dark .bg-gray-50 {
	background-color: #374151 !important;
}

.dark .bg-gray-100 {
	background-color: #4b5563 !important;
}

/* Text colors for dark mode */
.dark .text-gray-900 {
	color: #f9fafb !important;
}

.dark .text-gray-800 {
	color: #f3f4f6 !important;
}

.dark .text-gray-700 {
	color: #d1d5db !important;
}

.dark .text-gray-600 {
	color: #9ca3af !important;
}

.dark .text-gray-500 {
	color: #6b7280 !important;
}

.dark .text-gray-400 {
	color: #9ca3af !important;
}

/* Border colors for dark mode */
.dark .border-gray-300 {
	border-color: #4b5563 !important;
}

.dark .border-gray-200 {
	border-color: #374151 !important;
}

.dark .border-gray-800 {
	border-color: #1f2937 !important;
}

/* Shadow effects for dark mode */
.dark .shadow-sm {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

.dark .shadow-md {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
		0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

.dark .shadow-lg {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
		0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
}

.dark .shadow-xl {
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3),
		0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
}

/* Form elements in dark mode */
.dark input,
.dark textarea,
.dark select {
	background-color: #374151 !important;
	border-color: #4b5563 !important;
	color: #f9fafb !important;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
	background-color: #374151 !important;
	border-color: #7c3aed !important;
	box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
	color: #9ca3af !important;
}

/* Custom scrollbar for dark mode */
.dark ::-webkit-scrollbar {
	width: 8px;
}

.dark ::-webkit-scrollbar-track {
	background: #374151;
}

.dark ::-webkit-scrollbar-thumb {
	background: #6b7280;
	border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
	background: #9ca3af;
}

/* Language selector styling */
#language-selector-desktop,
#language-selector-mobile {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
	background-position: right 0.5rem center;
	background-repeat: no-repeat;
	background-size: 1.5em 1.5em;
	padding-right: 2.5rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Theme toggle button */
#theme-toggle-desktop,
#theme-toggle-mobile {
	transition: transform 0.2s ease;
}

#theme-toggle-desktop:hover,
#theme-toggle-mobile:hover {
	transform: scale(1.1);
}

/* Mobile menu improvements */
.mobile-menu {
	transition: all 0.3s ease;
}

/* Responsive improvements */
@media (max-width: 768px) {
	.hero-gradient h1 {
		font-size: 2.5rem;
		line-height: 1.2;
	}

	.hero-gradient p {
		font-size: 1.125rem;
	}

	.card-hover {
		transform: none;
	}

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

/* Print styles */
@media print {
	.hero-gradient,
	nav,
	footer,
	.card-hover {
		background: white !important;
		color: black !important;
		box-shadow: none !important;
	}

	.hidden {
		display: none !important;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.card-hover {
		border: 2px solid currentColor;
	}

	.hero-gradient {
		background: #000;
		color: #fff;
	}
}

/* Page loader styles */
.page-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #551a8b 0%, #7b2cbf 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.page-loader.hide {
	opacity: 0;
	visibility: hidden;
}

.loader-content {
	text-align: center;
	color: white;
}

.loader-spinner {
	width: 60px;
	height: 60px;
	border: 4px solid rgba(255, 255, 255, 0.2);
	border-top: 4px solid white;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin: 0 auto 20px;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.loader-text {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 10px;
	animation: pulse 2s ease-in-out infinite;
}

.loader-subtitle {
	font-size: 1rem;
	opacity: 0.8;
	animation: fadeInOut 2s ease-in-out infinite;
}

@keyframes pulse {
	0%,
	100% {
		opacity: 0.8;
	}
	50% {
		opacity: 1;
	}
}

@keyframes fadeInOut {
	0%,
	100% {
		opacity: 0.6;
	}
	50% {
		opacity: 0.9;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.fade-in,
	.card-hover,
	* {
		animation: none !important;
		transition: none !important;
	}
}

/* Footer specific styling */
footer.hero-gradient {
	position: relative;
}

footer .social-icon {
	backdrop-filter: blur(10px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

footer .social-icon:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: translateY(-2px) scale(1.1);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Footer background animation */
footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		135deg,
		rgba(85, 26, 139, 0.1) 0%,
		rgba(123, 44, 191, 0.1) 100%
	);
	z-index: 1;
	animation: footerGlow 8s ease-in-out infinite alternate;
}

@keyframes footerGlow {
	0% {
		opacity: 0.1;
	}
	100% {
		opacity: 0.3;
	}
}