/* ==========================================================================
   NANMOW Smart Interaction Layer v1.2.5 — homepage (owned by NANMOW / ARENTICO)
   Source of truth: website/homepage/smart-interactions.css
   Deployed as:     wp-content/themes/nanmow/assets/si/smart-interactions.css
   Printed in the footer (after the page runtime) so equal-specificity rules win.

   Contract
   - html.nm-si    : layer active (set by smart-interactions.js)
   - html.nm-si-m  : motion allowed (not set under prefers-reduced-motion)
   Every "hidden before reveal" state lives under .nm-si-m only, so content is
   always visible when JavaScript fails or reduced motion is requested.
   Only transform / opacity are animated. No loops. No libraries.
   Docs: docs/NANMOW-DESIGN-SYSTEM.md §18
   ========================================================================== */

/* ---------- 1. Hero — path draw + proximity emphasis (fine pointers only) ---------- */
html.nm-si-m .nm-settled .nm-hero-path .nm-node,
html.nm-si-m .nm-settled .nm-hero-path text {
	transition: transform .35s var(--nm-ease), opacity .35s var(--nm-ease), fill .35s var(--nm-ease);
	transition-delay: 0s;
}
@media (hover: hover) and (pointer: fine) {
	html.nm-si-m .nm-in .nm-hero-path .nm-node.is-near { transform: scale(1.3); }
	html.nm-si-m .nm-hero-path text.is-near { fill: var(--e-global-color-nmneu20); }
}

/* ---------- 2. Page progression — thin milestone signal on the header edge ---------- */
.nm-progress {
	position: absolute;
	inset-inline: 0;
	inset-block-end: -1px;
	block-size: 2px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .35s var(--nm-ease);
}
.nm-header.is-scrolled .nm-progress { opacity: 1; }
.nm-progress b {
	position: absolute;
	inset: 0;
	background: var(--e-global-color-accent);
	transform: scaleX(var(--nm-step, 0));
	transform-origin: 100% 50%;
	transition: transform .7s var(--nm-ease);
}
[dir="ltr"] .nm-progress b { transform-origin: 0 50%; }

/* ---------- 3. Growth system — a growth path, not a tab strip ---------- */
/* Path: SVG drawn by JS through the measured node centres (starts at the first node,
   ends at the last). The runtime/Elementor straight line is retired. */
.nm-sys-path {
	position: absolute;
	inset-block-start: 0;
	left: 0;
	overflow: visible;
	pointer-events: none;
	z-index: 0;
}
.nm-sys-path path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nm-sys-path .nm-sys-measure { stroke: none; }
.nm-sys-path .nm-sys-base { stroke: var(--e-global-color-nmteal7); stroke-width: 2; }
.nm-sys-path .nm-sys-fill { stroke: var(--e-global-color-accent); stroke-width: 2.5; transition: stroke-dashoffset .7s var(--nm-ease); }
.nm-sys-path .nm-sys-preview { stroke: var(--e-global-color-accent); stroke-width: 2.5; opacity: 0; transition: stroke-dashoffset .35s var(--nm-ease), opacity .2s var(--nm-ease); }
.nm-tabs-menu.is-previewing .nm-sys-preview { opacity: .4; }
html.nm-si #nm-home-system .nm-tabs-menu.nm-sys-owned::before { content: none; }
html.nm-si-m #nm-home-system .nm-sys-base { transition: stroke-dashoffset 1.4s var(--nm-ease); }
html.nm-si-m #nm-home-system:not(.nm-in) .nm-sys-base { stroke-dashoffset: var(--nm-len, 0); }

/* Selector — shared. Labels keep 16.5–17px and wrap onto balanced lines (never clipped). */
#nm-home-system .nm-tabs .nm-tabs-menu { position: relative; }
#nm-home-system .nm-tabs-menu .nm-tab { white-space: normal; }
#nm-home-system .nm-tabs-menu .nm-tab-label { white-space: normal; text-wrap: balance; }

/* ≥768: the five layers rise along a growth curve — first lowest, last highest, in reading
   order (the hero path's language). Offsets follow an accelerating curve, not a ramp. */
@media (min-width: 768px) {
	#nm-home-system .nm-tabs .nm-tabs-menu {
		--nm-rise: 64px;
		align-items: flex-start;
		overflow: visible;
		column-gap: 8px;
		padding-block-start: 14px;
	}
	#nm-home-system .nm-tabs-menu .nm-tab { flex: 1 1 0; min-inline-size: 0; }
	#nm-home-system .nm-tabs-menu .nm-tab:nth-of-type(1) { margin-block-start: var(--nm-rise); }
	#nm-home-system .nm-tabs-menu .nm-tab:nth-of-type(2) { margin-block-start: calc(var(--nm-rise) * .9); }
	#nm-home-system .nm-tabs-menu .nm-tab:nth-of-type(3) { margin-block-start: calc(var(--nm-rise) * .72); }
	#nm-home-system .nm-tabs-menu .nm-tab:nth-of-type(4) { margin-block-start: calc(var(--nm-rise) * .44); }
	#nm-home-system .nm-tabs-menu .nm-tab:nth-of-type(5) { margin-block-start: 0; }
}
@media (min-width: 1025px) {
	#nm-home-system .nm-tabs .nm-tabs-menu { --nm-rise: 120px; column-gap: 16px; }
}

/* ≤767: a stepped vertical path — every layer visible, full-width rows to tap, the node
   at the reading start and each step set slightly further along the path. */
@media (max-width: 767px) {
	#nm-home-system .nm-tabs .nm-tabs-menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		overflow: visible;
		scroll-snap-type: none;
		margin-inline: 0;
		padding: 6px 0 0;
		inline-size: auto;
		gap: 0;
	}
	#nm-home-system .nm-tabs-menu .nm-tab {
		flex: none;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		column-gap: 14px;
		row-gap: 0;
		min-block-size: 52px;
		padding-block: 6px;
		padding-inline: var(--nm-step, 0px) 0;
		scroll-snap-align: none;
	}
	#nm-home-system .nm-tabs-menu .nm-tab::before { flex: none; }
	#nm-home-system .nm-tabs-menu .nm-tab-label { text-align: start; }
	#nm-home-system .nm-tabs-menu .nm-tab:nth-of-type(2) { --nm-step: 8px; }
	#nm-home-system .nm-tabs-menu .nm-tab:nth-of-type(3) { --nm-step: 22px; }
	#nm-home-system .nm-tabs-menu .nm-tab:nth-of-type(4) { --nm-step: 42px; }
	#nm-home-system .nm-tabs-menu .nm-tab:nth-of-type(5) { --nm-step: 68px; }
}

/* Stable content card: all layers share the tallest card's height (set by JS) */
html.nm-si #nm-home-system .nm-panel { min-block-size: var(--nm-panel-h, auto); }

/* Selected layer: orange node with a restrained double halo; label white */
html.nm-si #nm-home-system .nm-tab.e--selected::before {
	box-shadow: 0 0 0 5px rgb(255 90 31 / .22), 0 0 0 11px rgb(255 90 31 / .07);
}

/* Layer controls stay quiet in every state (the Kit / Elementor give every <button> a
   hover/focus background, which made the white label unreadable) */
#nm-home-system .nm-tabs-menu .nm-tab:hover,
#nm-home-system .nm-tabs-menu .nm-tab:focus,
#nm-home-system .nm-tabs-menu .nm-tab:active {
	background: transparent;
	box-shadow: none;
}
#nm-home-system .nm-tabs-menu .nm-tab:not(.e--selected):hover .nm-tab-label { color: var(--e-global-color-nmneu20); }
/* Keyboard focus must be visible (an Elementor/Kit rule was zeroing the outline) */
#nm-home-system .nm-tabs-menu .nm-tab:focus-visible {
	outline: 3px solid var(--e-global-color-accent);
	outline-offset: -3px;
	border-radius: 12px;
}

/* Passed layers stay connected: orange ring on the teal node */
html.nm-si #nm-home-system .nm-tab.is-passed::before { border-color: var(--e-global-color-accent); }

/* Direction-aware panel arrival + restrained tag stagger */
@keyframes nmSiPanel { from { opacity: 0; transform: translateX(var(--nm-dx, 0px)); } }
@keyframes nmSiTag { from { opacity: 0; transform: translateY(6px); } }
html.nm-si-m #nm-home-system .nm-panel { animation: nmSiPanel .42s var(--nm-ease) both; }
html.nm-si-m #nm-home-system .nm-chip { animation: nmSiTag .36s var(--nm-ease) both; animation-delay: .12s; }
html.nm-si-m #nm-home-system .nm-chip:nth-child(2) { animation-delay: .16s; }
html.nm-si-m #nm-home-system .nm-chip:nth-child(3) { animation-delay: .2s; }
html.nm-si-m #nm-home-system .nm-chip:nth-child(4) { animation-delay: .24s; }
html.nm-si-m #nm-home-system .nm-chip:nth-child(5) { animation-delay: .28s; }
html.nm-si-m #nm-home-system .nm-chip:nth-child(n+6) { animation-delay: .32s; }

/* ---------- 4. Method — scroll-linked rail, milestones activate near their content ---------- */
html.nm-si-m .nm-steps::after {
	block-size: auto;
	inset-block: var(--nm-rail-a, 20px) var(--nm-rail-b, 12px);
	transform: scaleY(var(--nm-rail, 0));
	transform-origin: 50% 0;
	transition: none;
}
html.nm-si-m .nm-step.is-active::before {
	background: #fff;
	border-color: var(--e-global-color-nmneu20);
	box-shadow: none;
}
html.nm-si-m .nm-step.is-reached::before {
	background: var(--e-global-color-accent);
	border-color: var(--e-global-color-accent);
}
html.nm-si-m .nm-step.is-current::before { box-shadow: 0 0 0 6px rgb(255 90 31 / .15); }
/* Upcoming titles are quieter (neutral-600, AA) — never hidden */
html.nm-si-m .nm-step .nm-h3 { color: var(--e-global-color-nmneu60); transition: color .4s var(--nm-ease); }
html.nm-si-m .nm-step.is-reached .nm-h3 { color: var(--e-global-color-text); }

/* ---------- 5. Principles — editorial: rule first, title, then text ---------- */
html.nm-si-m #nm-home-principles .nm-grid-2 > *::before {
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform .5s var(--nm-ease) var(--nm-d, 0s);
}
html[dir="ltr"].nm-si-m #nm-home-principles .nm-grid-2 > *::before { transform-origin: 0 50%; }
html.nm-si-m #nm-home-principles .nm-grid-2 > * > * {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .5s var(--nm-ease), transform .5s var(--nm-ease);
}
html.nm-si-m #nm-home-principles .nm-grid-2 > :nth-child(even) { --nm-d: .07s; }
html.nm-si-m #nm-home-principles .nm-grid-2 > .is-in::before { transform: none; }
html.nm-si-m #nm-home-principles .nm-grid-2 > .is-in > * { opacity: 1; transform: none; }
html.nm-si-m #nm-home-principles .nm-grid-2 > .is-in > :nth-child(1) { transition-delay: calc(.16s + var(--nm-d, 0s)); }
html.nm-si-m #nm-home-principles .nm-grid-2 > .is-in > :nth-child(2) { transition-delay: calc(.26s + var(--nm-d, 0s)); }

/* ---------- 6. Qualification — minimal emphasis (fit markers only) ---------- */
html.nm-si-m #nm-fit-yes .nm-fit-item::before { transform: scale(0); transition: transform .45s var(--nm-ease); }
html.nm-si-m #nm-fit-yes.is-in .nm-fit-item::before { transform: none; }
html.nm-si-m #nm-fit-yes .nm-fit-item:nth-child(2)::before { transition-delay: .08s; }
html.nm-si-m #nm-fit-yes .nm-fit-item:nth-child(3)::before { transition-delay: .16s; }
html.nm-si-m #nm-fit-yes .nm-fit-item:nth-child(4)::before { transition-delay: .24s; }

/* ---------- 7. Final CTA — clean arrival (path draws to the last node) ---------- */
html.nm-si-m #nm-final-steps::before {
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform .9s var(--nm-ease) .1s;
}
html[dir="ltr"].nm-si-m #nm-final-steps::before { transform-origin: 0 50%; }
html.nm-si-m #nm-final-steps > *::before {
	opacity: 0;
	transform: scale(.5);
	transition: opacity .4s var(--nm-ease), transform .4s var(--nm-ease);
}
html.nm-si-m #nm-final-steps.is-in::before,
html.nm-si-m #nm-final-steps.is-in > *::before { opacity: 1; transform: none; }
html.nm-si-m #nm-final-steps.is-in > :nth-child(1)::before { transition-delay: .1s; }
html.nm-si-m #nm-final-steps.is-in > :nth-child(2)::before { transition-delay: .45s; }
html.nm-si-m #nm-final-steps.is-in > :nth-child(3)::before { transition-delay: .8s; }
@media (max-width: 767px) {
	html[dir].nm-si-m #nm-final-steps::before { transform: scaleY(0); transform-origin: 50% 0; }
	html[dir].nm-si-m #nm-final-steps.is-in::before { transform: none; }
}
/* Journey connectors (home-refine) draw down to the next node, in sequence */
html.nm-si-m #nm-final-steps > *::after { transform: scaleY(0); transform-origin: 50% 0; transition: transform .45s var(--nm-ease); }
html.nm-si-m #nm-final-steps.is-in > :nth-child(1)::after { transform: none; transition-delay: .25s; }
html.nm-si-m #nm-final-steps.is-in > :nth-child(2)::after { transform: none; transition-delay: .6s; }
html.nm-si-m #nm-home-final::after {
	opacity: 0;
	transform: scale(.4);
	transition: opacity .6s var(--nm-ease) .3s, transform .6s var(--nm-ease) .3s;
}
html.nm-si-m #nm-home-final.is-in::after { opacity: 1; transform: none; }

/* ---------- 8. CTA micro-interactions ---------- */
html.nm-si .nm-btn {
	transition: background-color .25s var(--nm-ease), color .25s var(--nm-ease), border-color .25s var(--nm-ease), transform .25s var(--nm-ease), box-shadow .25s var(--nm-ease);
}
@media (hover: hover) and (pointer: fine) {
	html.nm-si .nm-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(255 90 31 / .22); }
	html.nm-si .nm-link,
	html.nm-si .nm-link-dark {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-decoration-color: transparent;
		text-underline-offset: 10px;
		transition: color .25s var(--nm-ease), text-decoration-color .25s var(--nm-ease), text-underline-offset .25s var(--nm-ease);
	}
	html.nm-si .nm-link:hover,
	html.nm-si .nm-link-dark:hover { text-decoration-color: currentColor; text-underline-offset: 6px; }
}
@media (hover: none) {
	html.nm-si .nm-btn:hover { transform: none; }
}
html.nm-si .nm-btn:active { transform: scale(.985); transition-duration: .08s; }

/* ---------- 9. Mobile sticky CTA — shorter, softer slide; hidden state is inert ---------- */
@media (max-width: 767px) {
	html.nm-si .nm-sticky-cta {
		visibility: hidden;
		transform: translateY(16px);
		transition: transform .28s cubic-bezier(.4, 0, 1, 1), opacity .22s linear, visibility 0s linear .28s;
	}
	html.nm-si .nm-sticky-cta.is-visible {
		visibility: visible;
		transform: none;
		transition: transform .45s var(--nm-ease), opacity .35s var(--nm-ease), visibility 0s;
	}
}

/* ---------- 10. Reduced motion — states only, no transitions ---------- */
@media (prefers-reduced-motion: reduce) {
	.nm-progress, .nm-progress b, .nm-sys-base, .nm-sys-fill, .nm-sys-preview,
	html.nm-si .nm-btn, html.nm-si .nm-link, html.nm-si .nm-link-dark, html.nm-si .nm-sticky-cta {
		transition: none !important;
		animation: none !important;
	}
	html.nm-si .nm-btn:hover, html.nm-si .nm-btn:active { transform: none; }
}