/* ========================================================================== 
   Thành Trung motion art direction — precision, depth and inspection light.
   All persistent motion is input-driven; ambient loops remain owned by each
   section and are paused by their viewport lifecycle controllers.
   ========================================================================== */

:root {
	--tt-motion-ease: cubic-bezier(.22, 1, .36, 1);
	--tt-motion-blue: #1746be;
	--tt-motion-gold: #f4ad22;
}

.tt-motion-progress {
	position: fixed;
	z-index: 2147483000;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	overflow: hidden;
	background: rgba(12, 39, 94, .08);
	opacity: 0;
	pointer-events: none;
	transition: opacity 300ms ease;
}

html.tt-motion-enabled .tt-motion-progress {
	opacity: 1;
}

.tt-motion-progress__bar {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, var(--tt-motion-blue) 0 76%, var(--tt-motion-gold) 94%, #fff1b8 100%);
	box-shadow: 0 0 14px rgba(244, 173, 34, .55);
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}

.tt-motion-surface {
	position: relative;
	isolation: isolate;
}

.tt-home-hero__visual.tt-motion-surface,
.hero-media.tt-motion-surface,
.tt-px__viewport.tt-motion-surface {
	overflow: clip;
}

/* The origin beacon sits against the gallery's left alignment line. Let its
   circular halo paint just beyond that edge while retaining clipped overflow
   for the much larger pointer spotlight. */
.tt-home-hero__visual.tt-motion-surface {
	overflow-clip-margin: 24px;
}

.tt-motion-spotlight {
	--tt-motion-spot-size: clamp(240px, 27vw, 410px);
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	width: var(--tt-motion-spot-size);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 244, 203, .38) 0, rgba(111, 158, 255, .16) 28%, rgba(50, 96, 204, .055) 54%, transparent 72%);
	box-shadow: inset 0 0 0 1px rgba(113, 149, 227, .075);
	mix-blend-mode: screen;
	opacity: 0;
	transform: translate3d(-150%, -150%, 0);
	pointer-events: none;
	transition: opacity 260ms ease;
	will-change: transform, opacity;
}

.tt-motion-spotlight::before,
.tt-motion-spotlight::after {
	position: absolute;
	top: 50%;
	left: 50%;
	content: "";
	background: rgba(255, 238, 184, .42);
	box-shadow: 0 0 7px rgba(61, 103, 202, .22);
	transform: translate(-50%, -50%);
}

.tt-motion-spotlight::before {
	width: 42px;
	height: 1px;
}

.tt-motion-spotlight::after {
	width: 1px;
	height: 42px;
}

.tt-motion-surface.is-pointer-active > .tt-motion-spotlight {
	opacity: .92;
}

[data-tt-magnetic] {
	transition: translate 520ms var(--tt-motion-ease), transform 350ms var(--tt-motion-ease), box-shadow 350ms ease !important;
}

/* Home: keep the gallery optically stable while its media sequence changes. */
body[data-tt-motion-page="home"][data-tt-motion-mode="full"] .tt-home-hero__visual {
	transform: none;
	transition: none;
}

body[data-tt-motion-page="home"][data-tt-motion-mode="full"] .tt-home-hero__visual.is-pointer-active {
	will-change: auto;
}

body[data-tt-motion-page="home"][data-tt-motion-mode="full"] .tt-home-hero__visual > .tt-motion-spotlight {
	--tt-motion-spot-size: 46px;
	z-index: 7;
	border-radius: 0;
	background: none;
	box-shadow: none;
	mix-blend-mode: normal;
}

body[data-tt-motion-page="home"][data-tt-motion-mode="full"] .tt-manufacturing__media {
	isolation: isolate;
}

body[data-tt-motion-page="home"] .tt-manufacturing__media {
	background-color: #e8edf4;
	background-image: var(--tt-video-poster, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

body[data-tt-motion-page="home"] .tt-manufacturing__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1;
	transition: opacity 160ms ease;
}

body[data-tt-motion-page="home"] .tt-manufacturing__media.is-video-poster-fallback video {
	opacity: 0;
}

body[data-tt-motion-page="home"][data-tt-motion-mode="full"] .tt-manufacturing__media img.tt-motion-parallax {
	scale: 1.045;
	translate: 0 0;
	transition: translate 140ms linear;
	will-change: translate;
}

body[data-tt-motion-page="home"][data-tt-motion-mode="full"] .tt-manufacturing__media::after {
	position: absolute;
	z-index: 3;
	inset: 0;
	content: "";
	border: 1px solid rgba(255, 255, 255, .18);
	background: linear-gradient(112deg, transparent 35%, rgba(255, 255, 255, .16) 48%, transparent 61%);
	background-position: 180% 0;
	background-size: 230% 100%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 280ms ease, background-position 950ms var(--tt-motion-ease);
}

body[data-tt-motion-page="home"][data-tt-motion-mode="full"] .tt-manufacturing__media:hover::after {
	background-position: -80% 0;
	opacity: .72;
}

/* Catalog: the gallery behaves like a responsive inspection table. */
body[data-tt-motion-page="catalog"][data-tt-motion-mode="full"] .hero-media > .tt-motion-spotlight {
	--tt-motion-spot-size: clamp(300px, 34vw, 520px);
	z-index: 2;
}

body[data-tt-motion-page="catalog"][data-tt-motion-mode="full"] .hero-collage figure {
	translate: 0 0;
	rotate: 0deg;
	transition: translate 680ms var(--tt-motion-ease), rotate 680ms var(--tt-motion-ease), box-shadow 420ms ease;
}

body[data-tt-motion-page="catalog"][data-tt-motion-mode="full"] .hero-collage.is-pointer-active figure {
	transition-duration: 150ms, 150ms, 420ms;
	will-change: translate, rotate;
}

body[data-tt-motion-page="catalog"][data-tt-motion-mode="full"] .hero-slide.is-current {
	animation: ttMotionCatalogSettle 720ms var(--tt-motion-ease) both;
}

body[data-tt-motion-page="catalog"][data-tt-motion-mode="full"] .tt-px__assembly-host {
	translate: 0 0;
	transition: translate 760ms var(--tt-motion-ease);
}

body[data-tt-motion-page="catalog"][data-tt-motion-mode="full"] .tt-px__viewport.is-pointer-active .tt-px__assembly-host {
	transition-duration: 150ms;
	will-change: translate;
}

body[data-tt-motion-page="catalog"][data-tt-motion-mode="full"] .tt-px__viewport > .tt-motion-spotlight {
	--tt-motion-spot-size: clamp(230px, 29vw, 390px);
	z-index: 5;
	background: radial-gradient(circle, rgba(255, 229, 152, .24) 0, rgba(77, 119, 225, .13) 34%, transparent 70%);
	opacity: 0;
}

body[data-tt-motion-page="catalog"][data-tt-motion-mode="full"] .tt-px__viewport.is-pointer-active > .tt-motion-spotlight {
	opacity: .72;
}

body[data-tt-motion-page="catalog"][data-tt-motion-mode="full"] .card {
	--tt-card-x: 50%;
	--tt-card-y: 42%;
	position: relative;
	isolation: isolate;
}

body[data-tt-motion-page="catalog"][data-tt-motion-mode="full"] .card::after {
	position: absolute;
	z-index: 4;
	inset: 0;
	content: "";
	border-radius: inherit;
	background: radial-gradient(240px circle at var(--tt-card-x) var(--tt-card-y), rgba(255, 255, 255, .66), rgba(130, 164, 240, .08) 38%, transparent 70%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 260ms ease;
}

body[data-tt-motion-page="catalog"][data-tt-motion-mode="full"] .card:hover::after,
body[data-tt-motion-page="catalog"][data-tt-motion-mode="full"] .card:focus-visible::after {
	opacity: .72;
}

@keyframes ttMotionCatalogSettle {
	from { opacity: .72; transform: scale(.982); }
	to { opacity: 1; transform: scale(1); }
}

@media (max-width: 899px), (hover: none), (pointer: coarse) {
	.tt-motion-spotlight {
		display: none;
	}

	body[data-tt-motion-page="home"] .tt-home-hero__visual,
	body[data-tt-motion-page="home"] .tt-home-hero__tile,
	body[data-tt-motion-page="catalog"] .hero-collage figure,
	body[data-tt-motion-page="catalog"] .tt-px__assembly-host {
		translate: 0 0 !important;
		rotate: 0deg !important;
		transform: none;
		will-change: auto;
	}

	body[data-tt-motion-page="home"] .tt-manufacturing__media img.tt-motion-parallax {
		scale: 1;
		translate: 0 0 !important;
		transition: none;
		will-change: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tt-motion-progress,
	.tt-motion-spotlight {
		display: none !important;
	}

	[data-tt-magnetic],
	body[data-tt-motion-page="home"] .tt-home-hero__visual,
	body[data-tt-motion-page="home"] .tt-home-hero__tile,
	body[data-tt-motion-page="home"] .tt-manufacturing__media img,
	body[data-tt-motion-page="catalog"] .hero-collage figure,
	body[data-tt-motion-page="catalog"] .hero-slide,
	body[data-tt-motion-page="catalog"] .tt-px__assembly-host,
	body[data-tt-motion-page="catalog"] .card {
		animation: none !important;
		translate: 0 0 !important;
		rotate: 0deg !important;
		transform: none !important;
		transition: none !important;
		will-change: auto !important;
	}
}