/* =====================================================================
   NEW HOME, 5. AI SOLUTIONS (template-parts/nh/ai.php)
   =====================================================================
   The owner's "AI solutions" comp: six capability cards at left, an AI
   assistant window at right inside a slow orbit with four floating chips,
   and a strip of four points underneath. The window plays one short
   exchange when the section scrolls in (question, typing, answer, files).
   Shares tokens with new-hero.css / new-home.css.
   ===================================================================== */

.nx-ais__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
	gap: clamp(24px, 2.6vw, 48px);
	align-items: center;
}

/* ---- cards ---- */
.nx-ais__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(12px, 1vw, 18px);
	margin-top: clamp(24px, 1.8vw, 32px);
}
.nx-aic {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: clamp(12px, 1vw, 18px);
	padding: clamp(16px, 1.15vw, 22px);
	border-radius: clamp(16px, 1.1vw, 20px);
	background: linear-gradient(160deg, #FFFFFF 52%, var(--nx-wash) 100%);
	border: 1px solid rgba(18, 21, 24, .085);
	color: inherit;
	transition: opacity .8s var(--nh-ease) calc(var(--i, 0) * 80ms), transform .9s var(--nh-ease) calc(var(--i, 0) * 80ms), translate .4s var(--nh-ease), box-shadow .4s var(--nh-ease), border-color .4s;
}
.nx-aic:hover { translate: 0 -5px; border-color: color-mix(in srgb, var(--nx-a) 26%, transparent); box-shadow: 0 28px 50px -34px rgba(60, 30, 30, .42); }
.nx-aic:focus-visible { outline: 2px solid var(--nx-a); outline-offset: 3px; }
.nx-aic .nx-ic { width: clamp(46px, 3.2vw, 58px); }
.nx-aic:hover .nx-ic { background: var(--nx-a); color: #fff; }
.nx-aic h3 { margin: 2px 0 0; font-family: var(--nh-head); font-size: clamp(16px, 1.1vw, 19.5px); font-weight: 700; letter-spacing: -.02em; color: var(--nh-ink); }
.nx-aic p { margin: 6px 0 0; font-size: clamp(13.5px, .88vw, 15.5px); line-height: 1.45; color: var(--nh-body); }
.nx-aic__go {
	display: grid; place-items: center;
	width: clamp(30px, 1.95vw, 36px); aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid rgba(18, 21, 24, .14);
	color: var(--nh-ink);
	transition: background .3s, color .3s, border-color .3s;
}
.nx-aic__go svg { width: 42%; }
.nx-aic:hover .nx-aic__go { background: var(--nx-a); border-color: var(--nx-a); color: #fff; }

/* ---- art ---- */
.nx-ais__art {
	position: relative;
	align-self: start;
	margin: -2.6vw calc(2vw - var(--nh-pad)) 0 0;
	aspect-ratio: 864 / 710;
	container-type: inline-size;
	pointer-events: none;
}
.nx-ais__glow {
	position: absolute;
	left: 3%; top: -2%;
	width: 90%; aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, #FDF0F0 0%, #FEF6F6 60%, rgba(255, 255, 255, 0) 100%);
	animation: nh-breathe 12s ease-in-out infinite;
}
.nx-ais__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nx-ais__ring #nx-air { fill: none; stroke: var(--nh-red); stroke-width: 1.3; opacity: .35; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .nx-ais__ring #nx-air { animation: nh-draw 2.6s .5s var(--nh-ease) forwards; }
.nx-ais__ring circle { fill: var(--nh-red); }
.nx-ais__ring circle.is-g { fill: #8E9196; }
.nx-ais__scribble { fill: none; stroke: #5E6166; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .nx-ais__scribble { animation: nh-draw .9s 1.9s var(--nh-ease) forwards; }
.nx-ais__hand { left: 47%; top: 4%; font-size: 3.2cqw; transform: rotate(-10deg); transform-origin: left bottom; }
.nx-ais__hand span + span { padding-left: .6em; }

/* the assistant window */
.nx-app {
	position: absolute; z-index: 1;
	left: 6%; top: 29%;
	width: 77%;
	aspect-ratio: 665 / 395;
	container-type: inline-size;
	display: grid;
	grid-template-columns: 23% 1fr;
	border-radius: 2.6cqw;
	background: #fff;
	border: 1px solid rgba(18, 21, 24, .07);
	box-shadow: 0 50px 90px -50px rgba(60, 30, 30, .45), 0 10px 30px -18px rgba(18, 21, 24, .18);
	overflow: hidden;
	animation: nh-float 8s ease-in-out infinite;
}
.nx-app__side { display: flex; flex-direction: column; gap: .5cqw; padding: 3.4cqw 1.6cqw; border-right: 1px solid rgba(18, 21, 24, .06); font-size: 1.6cqw; color: #4E555B; }
.nx-app__side .nx-tab__brand { margin: 0 0 2.6cqw 1.2cqw; font-size: 2.6cqw; }
.nx-app__side .nx-tab__brand i { width: 3.6cqw; }
.nx-app__side > span:not(.nx-tab__brand) { display: flex; align-items: center; gap: 1.2cqw; padding: 1.2cqw 1.4cqw; border-radius: 1.2cqw; }
.nx-app__side svg { width: 2cqw; opacity: .7; }
.nx-app__side .is-on { background: var(--nh-red-t); color: var(--nh-red); font-weight: 600; }
.nx-app__main { display: flex; flex-direction: column; padding: 3cqw 3.2cqw 2.6cqw; min-width: 0; }
.nx-app__head { display: grid; grid-template-columns: auto 1fr; column-gap: 1.4cqw; align-items: center; }
.nx-app__head b { font-family: var(--nh-head); font-size: 2.3cqw; color: var(--nh-ink); }
.nx-app__head small { grid-column: 2; display: flex; align-items: center; gap: .6cqw; font-size: 1.4cqw; color: #61686E; }
.nx-app__head small::before { content: ""; width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #2DBE6C; }
.nx-app__av { grid-row: span 2; display: grid; place-items: center; width: 4.4cqw; aspect-ratio: 1; border-radius: 1.2cqw; color: var(--nh-red); }
.nx-app__av svg { width: 70%; }
.nx-app__av--bot { background: var(--nh-red-t); flex: none; }
.nx-app__msgs { flex: 1; display: flex; flex-direction: column; gap: 1.8cqw; padding: 2.4cqw 0; min-height: 0; }
.nx-app__m { font-size: 1.65cqw; line-height: 1.45; color: #2B3036; }
.nx-app__m--sys, .nx-app__m--me { align-self: flex-end; max-width: 62%; padding: 1.4cqw 2cqw; border-radius: 1.8cqw 1.8cqw .5cqw 1.8cqw; background: #F2F3F5; }
.nx-app__m--bot { display: flex; gap: 1.6cqw; align-items: flex-start; }
.nx-app__m--bot > div { padding: 1.6cqw 2cqw; border-radius: .5cqw 1.8cqw 1.8cqw 1.8cqw; background: #FAFAFB; border: 1px solid rgba(18, 21, 24, .05); }
.nx-app__m--bot p { margin: 0; }
.nx-app__files { display: flex; gap: 1.2cqw; list-style: none; margin: 1.6cqw 0 0; padding: 0; }
.nx-app__files li { display: grid; grid-template-columns: auto 1fr; column-gap: .9cqw; align-items: center; padding: 1cqw 1.4cqw; border-radius: 1.2cqw; background: #fff; border: 1px solid rgba(18, 21, 24, .08); }
.nx-app__files i { grid-row: span 2; display: grid; place-items: center; width: 3cqw; aspect-ratio: 1; border-radius: .8cqw; background: var(--nh-grey-t); color: #3A3F45; }
.nx-app__files i.is-r { background: var(--nh-red-t); color: var(--nh-red); }
.nx-app__files i svg { width: 70%; }
.nx-app__files b { font-size: 1.35cqw; color: var(--nh-ink); }
.nx-app__files small { font-size: 1.15cqw; color: #8A9097; }
.nx-app__typing { display: inline-flex; gap: .7cqw; align-self: flex-start; margin-left: 6cqw; padding: 1.3cqw 1.8cqw; border-radius: 1.8cqw; background: #F2F3F5; }
.nx-app__typing i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #9AA0A6; animation: nx-dot 1s ease-in-out infinite; }
.nx-app__typing i:nth-child(2) { animation-delay: .15s; }
.nx-app__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes nx-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-.6cqw); opacity: 1; } }
.nx-app__input { display: flex; align-items: center; gap: 1.4cqw; padding: 1.2cqw 1.2cqw 1.2cqw 2cqw; border-radius: 99px; border: 1px solid rgba(18, 21, 24, .1); font-size: 1.5cqw; color: #9AA0A6; }
.nx-app__input > svg { width: 2.2cqw; }
.nx-app__input span { flex: 1; }
.nx-app__input i { display: grid; place-items: center; width: 4.2cqw; aspect-ratio: 1; border-radius: 50%; background: var(--nh-red); color: #fff; }
.nx-app__input i svg { width: 50%; }

/* the exchange plays once when the section comes in */
.nh-js .nx-ais .nx-app__m--me, .nh-js .nx-ais .nx-app__m--bot, .nh-js .nx-ais .nx-app__files li { opacity: 0; }
.nh-js .nx-ais .nx-app__typing { max-height: 0; opacity: 0; padding-block: 0; margin-top: -1.8cqw; overflow: hidden; }
.nh-js .nx-ais.is-in .nx-app__m--me { animation: nx-msg .5s .9s var(--nh-ease) forwards; }
.nh-js .nx-ais.is-in .nx-app__typing { animation: nx-typing 1.3s 1.4s forwards; }
.nh-js .nx-ais.is-in .nx-app__m--bot { animation: nx-msg .5s 2.7s var(--nh-ease) forwards; }
.nh-js .nx-ais.is-in .nx-app__files li { animation: nx-msg .4s var(--nh-ease) forwards; }
.nh-js .nx-ais.is-in .nx-app__files li:nth-child(1) { animation-delay: 3.1s; }
.nh-js .nx-ais.is-in .nx-app__files li:nth-child(2) { animation-delay: 3.25s; }
.nh-js .nx-ais.is-in .nx-app__files li:nth-child(3) { animation-delay: 3.4s; }
@keyframes nx-msg { from { opacity: 0; transform: translateY(1.2cqw); } to { opacity: 1; transform: none; } }
@keyframes nx-typing {
	0%       { max-height: 0; opacity: 0; padding-block: 0; margin-top: -1.8cqw; }
	12%, 85% { max-height: 5cqw; opacity: 1; padding-block: 1.3cqw; margin-top: 0; }
	100%     { max-height: 0; opacity: 0; padding-block: 0; margin-top: -1.8cqw; }
}

/* floating chips */
.nx-aichip {
	position: absolute; z-index: 2;
	display: flex; align-items: center; gap: 1.8cqw;
	padding: 1.8cqw 2.4cqw 1.8cqw 1.8cqw;
	border-radius: 2.2cqw;
	background: #fff;
	box-shadow: 0 26px 46px -28px rgba(60, 30, 30, .45), 0 0 0 1px rgba(18, 21, 24, .05);
	font-family: var(--nh-head); font-size: 2cqw; font-weight: 600; line-height: 1.2; color: var(--nh-ink);
	opacity: 0;
}
.nx-aichip i { display: grid; place-items: center; flex: none; width: 5.6cqw; aspect-ratio: 1; border-radius: 1.4cqw; background: var(--nh-red-t); color: var(--nh-red); }
.nx-aichip.is-g i { background: var(--nh-grey-t); color: #3A3F45; }
.nx-aichip i svg { width: 52%; }
.nx-aichip--a { left: 12%; top: 14%; max-width: 24%; rotate: -4deg; }
.nx-aichip--b { left: 69%; top: 21%; max-width: 22%; }
.nx-aichip--c { left: 6%; top: 80%; max-width: 29%; rotate: 5deg; }
.nx-aichip--d { left: 62%; top: 86%; max-width: 32%; rotate: -4deg; }
.is-in .nx-aichip--a { animation: nh-pop .8s 1s var(--nh-ease) forwards, nh-float2 6.4s 2s ease-in-out infinite; }
.is-in .nx-aichip--b { animation: nh-pop .8s 1.15s var(--nh-ease) forwards, nh-float 7.2s 2.1s ease-in-out infinite; }
.is-in .nx-aichip--c { animation: nh-pop .8s 1.3s var(--nh-ease) forwards, nh-float 6.8s 2.2s ease-in-out infinite; }
.is-in .nx-aichip--d { animation: nh-pop .8s 1.45s var(--nh-ease) forwards, nh-float2 7.6s 2.3s ease-in-out infinite; }

/* ---- the strip ---- */
.nx-ais__strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: clamp(28px, 2.2vw, 40px) -1.2vw 0;
	padding: clamp(18px, 1.4vw, 26px) clamp(20px, 2.2vw, 40px);
	border-radius: clamp(18px, 1.3vw, 24px);
	background: #fff;
	border: 1px solid rgba(18, 21, 24, .08);
	box-shadow: 0 24px 50px -40px rgba(18, 21, 24, .3);
}
.nx-ais__strip li { display: flex; align-items: center; gap: clamp(14px, 1.2vw, 22px); padding-right: 14px; }
.nx-ais__strip li + li { padding-left: clamp(16px, 2.2vw, 40px); border-left: 1px solid rgba(18, 21, 24, .09); }
.nx-ais__strip .nx-ic { width: clamp(48px, 3.7vw, 66px); }
.nx-ais__strip b { display: block; font-family: var(--nh-head); font-size: clamp(17px, 1.25vw, 22px); font-weight: 800; letter-spacing: -.02em; color: var(--nh-ink); }
.nx-ais__strip small { display: block; margin-top: 3px; font-size: clamp(13.5px, .92vw, 16.5px); color: #5E656C; }

/* ---- responsive ---- */
@media (max-width: 1280px) {
	.nx-ais__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; margin-inline: 0; }
	.nx-ais__strip li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 1100px) {
	.nx-ais__grid { grid-template-columns: minmax(0, 1fr); }
	.nx-ais__art { margin: 24px auto 0; width: 100%; max-width: 720px; }
}
@media (max-width: 720px) {
	.nx-ais__cards, .nx-ais__strip { grid-template-columns: minmax(0, 1fr); }
	.nx-ais__strip li + li { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.nh-js .nx-ais .nx-app__m--me, .nh-js .nx-ais .nx-app__m--bot, .nh-js .nx-ais .nx-app__files li, .nx-aichip { opacity: 1; }
	.nx-ais__scribble, .nx-ais__ring #nx-air { stroke-dashoffset: 0; }
	.nx-ais__hand { clip-path: none; }
}