/*!
 * ITMEN.pk — motion layer (CSS half).
 * Companion to assets/js/animations.js.
 *
 * Plain CSS on purpose: the theme's Tailwind build only scans theme PHP and
 * cannot be recompiled from the server, so new utility classes would silently
 * do nothing. Everything here uses the theme's own design tokens
 * (--primary / --accent / --card-shadow) so it stays on-brand.
 *
 * Motion language (shared with animations.js):
 *   micro 160-240ms | hover 260-380ms | reveal 500-800ms
 *   easing: cubic-bezier(.22,.61,.36,1) ~= power2.out
 *
 * Hook classes are added by JS (.itmen-navlink, .itmen-btn, .itmen-cta),
 * so no template markup had to change.
 */

:root {
	--itmen-ease: cubic-bezier(.22, .61, .36, 1);
	--itmen-ease-soft: cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------------------------------------------
   1. Header — compact-on-scroll + hover underline
   ------------------------------------------------------------------ */

/* The nav is position:fixed, so shrinking it moves nothing in flow:
   no layout shift, no CLS. */
nav.fixed > .container {
	transition: height .38s var(--itmen-ease);
}

nav.fixed .itmen-logo {
	transition: height .38s var(--itmen-ease);
}

nav.itmen-nav-scrolled > .container {
	height: 4.5rem;
}

@media (min-width: 768px) {
	nav.itmen-nav-scrolled > .container {
		height: 5rem;
	}
}

nav.itmen-nav-scrolled .itmen-logo {
	height: 3.25rem;
}

@media (min-width: 768px) {
	nav.itmen-nav-scrolled .itmen-logo {
		height: 3.75rem;
	}
}

/* Deepen the frosted-glass effect once scrolled. */
nav.fixed {
	transition: background-color .38s var(--itmen-ease),
		box-shadow .38s var(--itmen-ease);
}

/* Animated underline indicator on desktop nav links. */
.itmen-navlink {
	position: relative;
}

.itmen-navlink::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -.35rem;
	height: 2px;
	border-radius: 2px;
	background: hsl(var(--accent));
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .24s var(--itmen-ease);
}

.itmen-navlink:hover::after,
.itmen-navlink:focus-visible::after,
.itmen-navlink[aria-current="page"]::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* Keyboard focus must stay obvious (spec 20). */
.itmen-navlink:focus-visible,
.itmen-btn:focus-visible {
	outline: 2px solid hsl(var(--accent));
	outline-offset: 3px;
	border-radius: 4px;
}

/* ------------------------------------------------------------------
   2. Mobile menu — staggered open
   ------------------------------------------------------------------ */

@keyframes itmenMenuItem {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* Children animate in when nav.js removes .hidden. Pure CSS, so it still
   works if the GSAP layer never boots. */
#itmen-mobile-menu:not(.hidden) > div > * {
	animation: itmenMenuItem .34s var(--itmen-ease) both;
}

#itmen-mobile-menu:not(.hidden) > div > *:nth-child(1) { animation-delay: .03s; }
#itmen-mobile-menu:not(.hidden) > div > *:nth-child(2) { animation-delay: .07s; }
#itmen-mobile-menu:not(.hidden) > div > *:nth-child(3) { animation-delay: .11s; }
#itmen-mobile-menu:not(.hidden) > div > *:nth-child(4) { animation-delay: .15s; }
#itmen-mobile-menu:not(.hidden) > div > *:nth-child(5) { animation-delay: .19s; }
#itmen-mobile-menu:not(.hidden) > div > *:nth-child(6) { animation-delay: .23s; }
#itmen-mobile-menu:not(.hidden) > div > *:nth-child(n+7) { animation-delay: .27s; }

/* Closing state is applied by animations.js just before .hidden returns. */
#itmen-mobile-menu.itmen-menu-closing {
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .2s var(--itmen-ease-soft),
		transform .2s var(--itmen-ease-soft);
}

#itmen-mobile-menu.itmen-menu-closing > div > * {
	animation: none;
}

/* The mobile services sub-list gets the same treatment. */
#itmen-mobile-services:not(.hidden) > * {
	animation: itmenMenuItem .28s var(--itmen-ease) both;
}

#itmen-mobile-services:not(.hidden) > *:nth-child(2) { animation-delay: .04s; }
#itmen-mobile-services:not(.hidden) > *:nth-child(3) { animation-delay: .08s; }
#itmen-mobile-services:not(.hidden) > *:nth-child(4) { animation-delay: .12s; }
#itmen-mobile-services:not(.hidden) > *:nth-child(5) { animation-delay: .16s; }
#itmen-mobile-services:not(.hidden) > *:nth-child(n+6) { animation-delay: .2s; }

/* ------------------------------------------------------------------
   3. Buttons — consistent micro-interaction (spec 16)
   ------------------------------------------------------------------ */

.itmen-btn {
	transition: transform .22s var(--itmen-ease),
		box-shadow .28s var(--itmen-ease),
		background-color .24s var(--itmen-ease),
		border-color .24s var(--itmen-ease),
		color .24s var(--itmen-ease);
	will-change: transform;
}

.itmen-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -10px rgba(20, 43, 72, .45);
}

/* Tactile press feedback. */
.itmen-btn:active {
	transform: translateY(-1px) scale(.985);
	transition-duration: .09s;
}

/* ------------------------------------------------------------------
   4. Media + logo micro-interactions (spec 11, 17)
   ------------------------------------------------------------------ */

/* Partner / technology logos: gentle lift, no distortion. */
.itmen-logo-tile {
	transition: transform .34s var(--itmen-ease),
		filter .34s var(--itmen-ease),
		opacity .34s var(--itmen-ease);
}

.itmen-logo-tile:hover {
	transform: translateY(-3px) scale(1.04);
}

/* Images inside cards: contained zoom, parent already has overflow-hidden. */
.itmen-zoom img {
	transition: transform .5s var(--itmen-ease);
	will-change: transform;
}

.itmen-zoom:hover img {
	transform: scale(1.04);
}

/* ------------------------------------------------------------------
   4b. Carousel — stop the clip from slicing lifted cards
   ------------------------------------------------------------------
   .itmen-carousel-viewport is overflow-hidden so slides clip sideways.
   But .card-elevated:hover lifts each card translateY(-4px) and casts a
   soft shadow, and both were being chopped off at the top edge.

   Give the clip vertical breathing room and cancel it with an equal
   negative margin: the cards get room to lift, surrounding layout does
   not move, and horizontal clipping is untouched (no left/right padding,
   so carousel.js's clientWidth/perView maths is unaffected). */

.itmen-carousel-viewport {
	padding-top: 14px;
	padding-bottom: 14px;
	margin-top: -14px;
	margin-bottom: -14px;
}

/* Footer social icons. */
.itmen-social {
	transition: transform .22s var(--itmen-ease),
		background-color .22s var(--itmen-ease),
		color .22s var(--itmen-ease);
}

.itmen-social:hover {
	transform: translateY(-3px) scale(1.06);
}

/* ------------------------------------------------------------------
   5. Hero — technology background canvas
   ------------------------------------------------------------------ */

.itmen-hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.2s ease;
	z-index: 1;
}

.itmen-hero-canvas.is-live {
	opacity: 1;
}

/* Keep hero copy above the canvas. */
#home > .container,
#home .container {
	position: relative;
	z-index: 2;
}

/* ------------------------------------------------------------------
   5b. Hero gradient headline — keep it visible after word-splitting
   ------------------------------------------------------------------
   .text-gradient paints with `color:transparent` + `background-clip:text`.
   The hero word-splitter re-wraps every word in inline-block spans, and
   Chrome does NOT include inline-block descendants in an ancestor's text
   clip — so the parent ended up painting its gradient onto nothing while
   the inherited transparent colour hid the words. Net effect: the phrase
   was invisible until you selected it.

   Fix: paint the gradient on the word spans themselves, which are the
   elements that actually own the glyphs. */

#home h1 .text-gradient .itmen-wi {
	background-image: var(--accent-gradient);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* Matches the 6s shimmer the JS used to drive on the parent. */
	animation: itmenGradShift 6s linear infinite;
}

@keyframes itmenGradShift {
	from { background-position: 0% 50%; }
	to   { background-position: 200% 50%; }
}

/* If background-clip:text is unavailable, never leave text transparent. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	#home h1 .text-gradient,
	#home h1 .text-gradient .itmen-wi {
		color: hsl(var(--accent));
		background-image: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	#home h1 .text-gradient .itmen-wi {
		animation: none !important;
	}
}

/* ------------------------------------------------------------------
   6. CTA — slow technical grid drift (spec 13)
   ------------------------------------------------------------------ */

.itmen-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.itmen-cta::before {
	content: "";
	position: absolute;
	inset: -40% -10%;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, .07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .07) 1px, transparent 1px);
	background-size: 64px 64px;
	/* Fade the grid out at the edges so it never fights the headline. */
	-webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 35%, transparent 72%);
	mask-image: radial-gradient(ellipse at 50% 50%, #000 35%, transparent 72%);
	animation: itmenGridDrift 38s linear infinite;
}

@keyframes itmenGridDrift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-64px, -64px, 0); }
}

.itmen-cta > * {
	position: relative;
	z-index: 1;
}

/* Lighter grid on sections that sit on a light background. */
.itmen-cta.itmen-cta-light::before {
	background-image:
		linear-gradient(to right, rgba(20, 43, 72, .06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(20, 43, 72, .06) 1px, transparent 1px);
}

/* ------------------------------------------------------------------
   7. Mobile trimming (spec 19)
   ------------------------------------------------------------------ */

@media (max-width: 767px) {
	/* Hover lift is meaningless on touch and can stick after a tap. */
	.itmen-btn:hover,
	.itmen-logo-tile:hover,
	.itmen-social:hover {
		transform: none;
		box-shadow: none;
	}

	.itmen-zoom:hover img {
		transform: none;
	}

	/* Decorative grid is a continuous repaint — not worth it on phones. */
	.itmen-cta::before {
		animation: none;
		opacity: .6;
	}
}

/* ------------------------------------------------------------------
   8. Reduced motion — hard stop (spec 19, 20)
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.itmen-cta::before {
		animation: none !important;
	}

	.itmen-hero-canvas {
		display: none !important;
	}

	/* Colour/underline feedback stays — only movement is removed. */
	.itmen-btn:hover,
	.itmen-btn:active,
	.itmen-logo-tile:hover,
	.itmen-social:hover,
	.itmen-zoom:hover img {
		transform: none !important;
	}
}