/* === Fallback fonts with adjusted metrics (eliminates CLS on webfont swap) ===
 * Values from Next.js next/font/google measurements — fallback (Arial/Helvetica)
 * is stretched to match Inter and Space Grotesk box metrics, so the text occupies
 * the same space before and after the webfont arrives.
 */
@font-face {
	font-family: 'Inter Fallback';
	src: local('Arial'), local('Helvetica');
	size-adjust: 107.86%;
	ascent-override: 90.20%;
	descent-override: 22.48%;
	line-gap-override: 0%;
}
@font-face {
	font-family: 'Space Grotesk Fallback';
	src: local('Arial'), local('Helvetica');
	size-adjust: 100.65%;
	ascent-override: 98.36%;
	descent-override: 24.59%;
	line-gap-override: 0%;
}

/* Insert adjusted fallbacks into the font stacks (overrides Tailwind's font-sans/font-heading). */
body,
.font-sans {
	font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif;
}
.font-heading {
	font-family: 'Space Grotesk', 'Space Grotesk Fallback', system-ui, sans-serif;
}

/* === Glassmorphism utilities === */
.glass {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-strong {
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.15);
}

/* === Gradient text === */
.gradient-text {
	background: linear-gradient(135deg, #3b82f6, #06b6d4, #8b5cf6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* === Custom scrollbar === */
::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-track {
	background: #0f172a;
}
::-webkit-scrollbar-thumb {
	background: #334155;
	border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
	background: #475569;
}

/* === Logo sizing === */
.logo-wrapper img,
.custom-logo {
	max-height: 40px;
	width: auto;
}

/* === Header scrolled state === */
.header-scrolled {
	background: rgba(2, 6, 23, 0.85) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* === Grid pattern background === */
.bg-grid {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 60px 60px;
}

/* === Nav active state === */
.nav-link.active {
	color: white;
	background: rgba(255, 255, 255, 0.05);
}

/* === Selection color === */
::selection {
	background: rgba(59, 130, 246, 0.3);
	color: white;
}

/* === WordPress content styling === */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	font-family: 'Space Grotesk', system-ui, sans-serif;
	color: white;
	margin-top: 2em;
	margin-bottom: 0.75em;
}

.entry-content p {
	color: #9ca3af;
	line-height: 1.8;
	margin-bottom: 1.25em;
}

.entry-content a {
	color: #3b82f6;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.entry-content a:hover {
	color: #60a5fa;
}

.entry-content ul,
.entry-content ol {
	color: #9ca3af;
	padding-left: 1.5em;
	margin-bottom: 1.25em;
}

.entry-content li {
	margin-bottom: 0.5em;
}

.entry-content img {
	border-radius: 1rem;
	margin: 2em 0;
}

.entry-content blockquote {
	border-left: 4px solid #3b82f6;
	padding-left: 1.5em;
	margin: 1.5em 0;
	color: #d1d5db;
	font-style: italic;
}

/* === Contact Form 7 styling === */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.75rem;
	color: white;
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	transition: all 0.3s;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	background: rgba(255, 255, 255, 0.08);
}

.wpcf7 input[type="submit"] {
	padding: 0.75rem 2rem;
	background: #3b82f6;
	color: white;
	border: none;
	border-radius: 9999px;
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
	transition: all 0.3s;
}

.wpcf7 input[type="submit"]:hover {
	background: #1d4ed8;
	transform: translateY(-1px);
	box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.wpcf7-response-output {
	border-radius: 0.75rem !important;
	padding: 1rem !important;
	margin-top: 1rem !important;
}

.wpcf7 label {
	color: #d1d5db;
	font-size: 0.875rem;
	margin-bottom: 0.5rem;
	display: block;
}

.wpcf7 p {
	margin-bottom: 1rem;
}

/* === WordPress default classes === */
.alignleft {
	float: left;
	margin-right: 1.5em;
	margin-bottom: 1em;
}

.alignright {
	float: right;
	margin-left: 1.5em;
	margin-bottom: 1em;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
}

.wp-caption {
	max-width: 100%;
	margin-bottom: 1em;
}

.wp-caption-text {
	color: #6b7280;
	font-size: 0.875rem;
	text-align: center;
	padding-top: 0.5em;
}

/* === Hero animated gradient heading === */
.hero-gradient-text {
	background: linear-gradient(
		90deg,
		#3b82f6 0%,
		#06b6d4 25%,
		#8b5cf6 50%,
		#06b6d4 75%,
		#3b82f6 100%
	);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: gradient-shift 4s ease-in-out infinite;
}

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

/* === Hero floating tech tags === */
.hero-float-tag {
	opacity: 0;
	pointer-events: none;
	user-select: none;
	will-change: transform, opacity;
	white-space: nowrap;
}

/* Ensure tags don't overlap center content */
.hero-float-tag[class*="left-"] {
	max-width: 120px;
}
.hero-float-tag[class*="right-"] {
	max-width: 120px;
}

/* === Hero particles === */
#hero-particles {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.hero-particle {
	position: absolute;
	border-radius: 50%;
	background: rgba(59, 130, 246, 0.4);
	opacity: 0.6;
	will-change: transform, opacity;
}

/* === Card tilt glare === */
[data-tilt] {
	transform-style: preserve-3d;
	will-change: transform;
}

.tilt-glare {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s;
	z-index: 50;
}

/* === Glow card border === */
[data-glow] {
	--glow-x: -100px;
	--glow-y: -100px;
	position: relative;
	overflow: hidden;
}

[data-glow]::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s;
	background: radial-gradient(
		250px circle at var(--glow-x) var(--glow-y),
		rgba(59, 130, 246, 0.12),
		transparent 70%
	);
}

[data-glow]:hover::after {
	opacity: 1;
}

/* === Magnetic button reset === */
[data-magnetic] {
	will-change: transform;
}

/* === Section gradient dividers === */
.section-divider {
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(59, 130, 246, 0.3) 20%,
		rgba(139, 92, 246, 0.3) 50%,
		rgba(6, 182, 212, 0.3) 80%,
		transparent
	);
	margin: 0 auto;
	max-width: 600px;
}

/* === Animation initial states (hidden until GSAP triggers) === */
[data-animate="fade-up"],
[data-animate="fade-left"],
[data-animate="fade-right"],
[data-animate="zoom-in"],
[data-animate="stagger"] > * {
	opacity: 0;
}

[data-animate="fade-up"] { transform: translateY(40px); }
[data-animate="fade-left"] { transform: translateX(-40px); }
[data-animate="fade-right"] { transform: translateX(40px); }
[data-animate="zoom-in"] { transform: scale(0.85); }
[data-animate="stagger"] > * { transform: translateY(30px); }

/* Hero animates immediately via JS, don't hide with CSS */
[data-animate="hero"] {
	opacity: 1;
}

/* Fallback: if JS fails, show everything */
.no-js [data-animate],
.no-js [data-animate="stagger"] > * {
	opacity: 1 !important;
	transform: none !important;
}

/* === Back to top button === */
.back-to-top {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(139, 92, 246, 0.25));
	border: 1px solid rgba(59, 130, 246, 0.4);
	box-shadow: 0 0 20px rgba(59, 130, 246, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.back-to-top:hover {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.5), rgba(139, 92, 246, 0.4));
	border-color: rgba(59, 130, 246, 0.7);
	box-shadow: 0 0 30px rgba(59, 130, 246, 0.35), 0 0 60px rgba(139, 92, 246, 0.15);
	transform: translateY(-2px);
}

#back-to-top.visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
	[data-animate],
	[data-animate="stagger"] > * {
		opacity: 1 !important;
		transform: none !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}