/* Nancy's Unisex Hair Salon - Custom Styles */

/* Custom animations and enhancements */
.gradient-border {
	background: linear-gradient(45deg, #ffffff, #f3f4f6);
	background-size: 400% 400%;
	animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
	0%,
	100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

.service-card {
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.service-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.1),
		transparent
	);
	transition: left 0.5s;
}

.service-card:hover::before {
	left: 100%;
}

.service-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(255, 255, 255, 0.1);
}

.hero-gradient {
	background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%);
	background-size: 400% 400%;
	animation: gradientMove 8s ease infinite;
}

@keyframes gradientMove {
	0%,
	100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

.floating-icon {
	animation: float 3s ease-in-out infinite;
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-10px);
	}
}

.pulse-glow {
	animation: pulseGlow 2s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
	from {
		box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
	}
	to {
		box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
	}
}

.gallery-item {
	transition: all 0.3s ease;
}

.gallery-item:hover {
	transform: scale(1.05) rotate(1deg);
	box-shadow: 0 15px 30px rgba(255, 255, 255, 0.15);
}

/* Additional enhancements for better visual appeal */
.btn-primary {
	transition: all 0.3s ease;
	transform: perspective(1px) translateZ(0);
}

.btn-primary:hover {
	transform: scale(1.05);
}

.btn-secondary {
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.btn-secondary::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.1);
	transition: left 0.3s;
}

.btn-secondary:hover::before {
	left: 100%;
}

/* Smooth scrolling for the entire page */
html {
	scroll-behavior: smooth;
	overflow-x: hidden;
	width: 100%;
}

/* Prevent horizontal scrolling globally */
body {
	overflow-x: hidden;
	width: 100%;
	max-width: 100vw;
}

/* Ensure all sections stay within viewport */
section {
	overflow-x: hidden;
	width: 100%;
}

/* Fix any potential overflow issues */
* {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}

/* Enhanced focus states for accessibility */
.focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* Custom scrollbar styling */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
	background: #ffffff;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: #f3f4f6;
}

/* Loading animation for images */
img {
	transition: opacity 0.3s ease;
}

img:not([src]) {
	opacity: 0;
}

/* Modal image sizing */
#modalImage {
	max-width: 80vw;
	max-height: 70vh;
	width: auto;
	height: auto;
}

/* Enhanced mobile responsiveness */
@media (max-width: 768px) {
	.floating-icon {
		animation-duration: 4s;
	}

	.service-card:hover {
		transform: translateY(-2px);
	}

	.gallery-item:hover {
		transform: scale(1.02);
	}

	/* Fix mobile scrolling and centering */
	body {
		overflow-x: hidden;
		width: 100%;
		position: relative;
	}

	/* Ensure all containers stay within viewport */
	.max-w-7xl,
	.max-w-4xl,
	.max-w-3xl,
	.max-w-2xl {
		width: 100%;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* Modal adjustments for mobile */
	#modalImage {
		max-width: 95vw;
		max-height: 80vh;
	}

	/* Hero section mobile fixes */
	.hero-gradient {
		min-height: 100vh;
		width: 100%;
	}
}

/* Hero section dot pattern overlay */
.hero-pattern {
	background-image: radial-gradient(
		circle,
		rgba(255, 255, 255, 0.05) 1px,
		transparent 1px
	);
	background-size: 60px 60px;
	opacity: 0.3;
}

/* Navigation hover effects */
.nav-link {
	position: relative;
	transition: all 0.3s ease;
	padding: 0.5rem 1rem;
	border-radius: 0.375rem;
}

.nav-link::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, #ffffff, transparent);
	transition: all 0.3s ease;
	transform: translateX(-50%);
}

.nav-link:hover::before {
	width: 80%;
}

.nav-link:hover {
	background-color: rgba(255, 255, 255, 0.1);
	transform: translateY(-2px);
	color: #ffffff;
}

/* Mobile navigation hover effects */
.mobile-nav-link {
	position: relative;
	transition: all 0.3s ease;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	margin: 0.25rem 0;
}

.mobile-nav-link:hover {
	background-color: rgba(255, 255, 255, 0.1);
	transform: translateX(8px);
	color: #ffffff;
}

/* Custom select dropdown styling */
select[name='service'] {
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1.5rem;
	padding-right: 3rem;
}

select[name='service']:focus {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	.floating-icon,
	.hero-gradient,
	.gradient-border,
	.pulse-glow {
		animation: none;
	}

	.service-card,
	.gallery-item,
	.btn-primary,
	.btn-secondary {
		transition: none;
	}
}