/* =====================================================
 * AppAgentix - icon system
 *
 * Loads AFTER the page stylesheet, lp-components.css, the premium skin
 * and the motion layer, so it wins the cascade over the icon sizing and
 * stroke weights already declared in those files without any of them
 * being edited.
 *
 * Geometry lives in inc/icons.php. This file is only the box, the
 * states and the motion.
 *
 * Each animation below is one Animate UI icon's own `animations.default`
 * variant, transcribed to CSS. The block comment above each one names
 * the upstream component and quotes its keyframes, so the two can be
 * diffed without opening the registry.
 *
 * Two mechanisms, chosen per icon:
 *
 *   transition  state changes that must reverse cleanly, and whose end
 *               state carries meaning - arrow, menu, plus, chevron.
 *   animation   one-shot flourishes that play and settle - draw, bob,
 *               twinkle, wiggle, spin.
 *
 * Nothing here animates a property that triggers layout: transform,
 * opacity, colour and stroke-dashoffset only.
 *
 * Reduced motion is handled ONCE, at the foot of this file, the same way
 * appagentix-motion.css does it. No icon carries its own branch.
 *
 * Remove the enqueue in inc/scripts.php to revert the whole layer.
 *
 * Contents
 *   1.  Tokens
 *   2.  The icon box
 *   3.  States
 *   4.  Animations
 *   5.  Section adjustments
 *   6.  Reduced motion
 * ===================================================== */

/* =====================================================
 * 1. Tokens
 *
 * --ai-stroke reconciles the four stroke weights that were shipping
 * (1.7 x45, 1.8 x36, 2 x11, 2.5 x11) against Animate UI's own Lucide
 * default of 2. 1.75 sits on the existing 1.7/1.8 pair, so the page
 * keeps its current weight rather than thickening.
 *
 * Namespaced --ai-* rather than reusing --ao-m-*: those drive the
 * section reveal engine, and re-pointing them would change motion this
 * layer never touched.
 * ===================================================== */

:root {
	--ai-stroke: 1.75;

	/* Size scale. Mirrors appagentix_icon_sizes() in inc/icons.php. */
	--ai-xs: 16px;
	--ai-sm: 20px;
	--ai-md: 24px;
	--ai-lg: 28px;                             /* Animate UI's own default */
	--ai-xl: 40px;

	/* Colour states, both pointing at tokens that already exist. */
	--ai-color: var(--lp-sub, rgba(0, 0, 0, .62));
	--ai-color-hover: var(--lp-primary, #654dff);

	/* Motion. Values taken from the Animate UI sources. */
	--ai-dur-fast: .2s;
	--ai-dur: .3s;
	--ai-dur-slow: .6s;
	--ai-ease: cubic-bezier(.42, 0, .58, 1);   /* easeInOut           */
	--ai-spring: cubic-bezier(.2, 1.2, .3, 1); /* spring(200, 20)     */
}

/* =====================================================
 * 2. The icon box
 *
 * Two entry points, because the site has two situations:
 *
 *   .ai-ico   a new placement with no wrapper of its own. Carries the
 *             size.
 *   .ai-svg   a placement that already has a sized wrapper from the
 *             page stylesheet (.lp-card__icon, .lp-why-icon,
 *             .lp-award-icon, .ta-ind-icon). The SVG drops in where the
 *             hand-written one was and that wrapper keeps sizing it, so
 *             no layout moves.
 *
 * Both paint in currentColor, so an icon inherits whatever colour its
 * context sets - which is what the dark sections rely on.
 * ===================================================== */

.ai-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--ai-size, var(--ai-md));
	height: var(--ai-size, var(--ai-md));
	color: var(--ai-color);
	transition: color var(--ai-dur-fast) var(--ai-ease);
}

.ai-ico .ai-svg {
	width: 100%;
	height: 100%;
}

.ai-svg {
	display: block;
	overflow: visible;
	fill: none;
	stroke: currentColor;
	stroke-width: var(--ai-stroke);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lp-proc__icon .ai-svg {
	stroke: rgb(238 230 230 / 100%);;
}
.ai-ico--xs { --ai-size: var(--ai-xs); }
.ai-ico--sm { --ai-size: var(--ai-sm); }
.ai-ico--md { --ai-size: var(--ai-md); }
.ai-ico--lg { --ai-size: var(--ai-lg); }
.ai-ico--xl { --ai-size: var(--ai-xl); }

/*
 * An icon inside a button or link takes the label's colour rather than
 * the muted rest state: a white arrow on a purple button must not be
 * grey. The rule is scoped to .ai-ico so a card icon, which is
 * deliberately muted until hover, is unaffected.
 */
.lp-btn .ai-ico,
.ai-ico--inherit {
	color: currentColor;
}

/* =====================================================
 * 3. States
 *
 * The trigger is the interactive ancestor, never the icon. That is what
 * lets a whole card drive its icon, and it is why focus lands on
 * something focusable.
 * ===================================================== */

[data-ai-trigger]:hover .ai-ico,
[data-ai-trigger]:focus-visible .ai-ico,
[data-ai-trigger].is-active .ai-ico,
[data-ai-trigger][aria-expanded="true"] .ai-ico {
	color: var(--ai-color-hover);
}

[data-ai-trigger][disabled] .ai-svg *,
[data-ai-trigger][aria-disabled="true"] .ai-svg * {
	animation: none !important;
	transform: none !important;
}

/* =====================================================
 * 4. Animations
 * ===================================================== */

/* -----------------------------------------------------
 * slide-x / slide-x-back
 *
 * Animate UI `arrow-right`, default:
 *   group  x: 0 -> '25%', easeInOut, 0.3s
 * ----------------------------------------------------- */
[data-ai-anim="slide-x"] .ai-g,
[data-ai-anim="slide-x-back"] .ai-g {
	transition: transform var(--ai-dur) var(--ai-ease);
}

[data-ai-trigger]:hover [data-ai-anim="slide-x"] .ai-g,
[data-ai-trigger]:focus-visible [data-ai-anim="slide-x"] .ai-g {
	transform: translateX(25%);
}

[data-ai-trigger]:hover [data-ai-anim="slide-x-back"] .ai-g,
[data-ai-trigger]:focus-visible [data-ai-anim="slide-x-back"] .ai-g {
	transform: translateX(-25%);
}

/* -----------------------------------------------------
 * menu-x
 *
 * Animate UI `menu`, default:
 *   line1  rotate -45, x -2.35, y  0.35, origin top right
 *   line2  opacity 0, easeInOut 0.2s
 *   line3  rotate  45, x -2.35, y -0.35, origin bottom right
 *   spring(stiffness 200, damping 20)
 * ----------------------------------------------------- */
[data-ai-anim="menu-x"] .ai-p1,
[data-ai-anim="menu-x"] .ai-p3 {
	transition: transform .4s var(--ai-spring);
}

[data-ai-anim="menu-x"] .ai-p1 { transform-origin: top right; }
[data-ai-anim="menu-x"] .ai-p3 { transform-origin: bottom right; }

[data-ai-anim="menu-x"] .ai-p2 {
	transition: opacity var(--ai-dur-fast) var(--ai-ease);
}

[data-ai-trigger].is-active [data-ai-anim="menu-x"] .ai-p1,
[data-ai-trigger][aria-expanded="true"] [data-ai-anim="menu-x"] .ai-p1 {
	transform: translate(-2.35px, .35px) rotate(-45deg);
}

[data-ai-trigger].is-active [data-ai-anim="menu-x"] .ai-p2,
[data-ai-trigger][aria-expanded="true"] [data-ai-anim="menu-x"] .ai-p2 {
	opacity: 0;
}

[data-ai-trigger].is-active [data-ai-anim="menu-x"] .ai-p3,
[data-ai-trigger][aria-expanded="true"] [data-ai-anim="menu-x"] .ai-p3 {
	transform: translate(-2.35px, -.35px) rotate(45deg);
}

/* -----------------------------------------------------
 * plus-x
 *
 * Animate UI `plus`, "x" variant:
 *   line1  rotate 0 -> 45, y1 19 -> 20.5, y2 5 -> 3.5, delay 0.1s
 *   line2  rotate 0 -> 45, x1  5 -> 3.5, x2 19 -> 20.5
 *   easeInOut 0.3s
 *
 * The length change is reproduced with scale along the line's own axis,
 * which is cheaper than animating x1/y1/x2/y2 and lands on the same
 * geometry: 14 units becomes 17, so 1.214.
 * ----------------------------------------------------- */
[data-ai-anim="plus-x"] .ai-p1,
[data-ai-anim="plus-x"] .ai-p2 {
	transform-origin: 12px 12px;
	transition: transform var(--ai-dur) var(--ai-ease);
}

[data-ai-anim="plus-x"] .ai-p1 { transition-delay: .1s; }

[data-ai-trigger].is-active [data-ai-anim="plus-x"] .ai-p1,
[data-ai-trigger][aria-expanded="true"] [data-ai-anim="plus-x"] .ai-p1 {
	transform: rotate(45deg) scaleY(1.214);
}

[data-ai-trigger].is-active [data-ai-anim="plus-x"] .ai-p2,
[data-ai-trigger][aria-expanded="true"] [data-ai-anim="plus-x"] .ai-p2 {
	transform: rotate(45deg) scaleX(1.214);
}

/* -----------------------------------------------------
 * draw
 *
 * Animate UI `check`, default:
 *   pathLength [0,1], opacity [0,1], scale [1, 1.1, 1], 0.6s easeInOut
 *
 * Every drawn path in the registry carries pathLength="1", so one
 * dasharray serves all of them regardless of real path length.
 * ----------------------------------------------------- */
[data-ai-anim="draw"] .ai-p1 {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	transform-origin: 12px 12px;
}

[data-ai-trigger]:hover [data-ai-anim="draw"] .ai-p1,
[data-ai-trigger]:focus-visible [data-ai-anim="draw"] .ai-p1,
.is-in [data-ai-anim="draw"][data-ai-on="view"] .ai-p1 {
	animation: ai-draw var(--ai-dur-slow) var(--ai-ease) both;
}

@keyframes ai-draw {
	0%   { stroke-dashoffset: 1; opacity: 0; transform: scale(1); }
	50%  { transform: scale(1.1); }
	100% { stroke-dashoffset: 0; opacity: 1; transform: scale(1); }
}

/* -----------------------------------------------------
 * scan
 *
 * Animate UI `fingerprint`: the ridges arrive in sequence rather than
 * the whole print fading up at once. Nine paths, 40ms apart.
 * ----------------------------------------------------- */
[data-ai-anim="scan"] .ai-g path {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

[data-ai-trigger]:hover [data-ai-anim="scan"] .ai-g path,
[data-ai-trigger]:focus-visible [data-ai-anim="scan"] .ai-g path,
.is-in [data-ai-anim="scan"][data-ai-on="view"] .ai-g path {
	animation: ai-scan .5s var(--ai-ease) both;
}

[data-ai-anim="scan"] .ai-g path:nth-child(1) { animation-delay: 0s; }
[data-ai-anim="scan"] .ai-g path:nth-child(2) { animation-delay: .04s; }
[data-ai-anim="scan"] .ai-g path:nth-child(3) { animation-delay: .08s; }
[data-ai-anim="scan"] .ai-g path:nth-child(4) { animation-delay: .12s; }
[data-ai-anim="scan"] .ai-g path:nth-child(5) { animation-delay: .16s; }
[data-ai-anim="scan"] .ai-g path:nth-child(6) { animation-delay: .2s; }
[data-ai-anim="scan"] .ai-g path:nth-child(7) { animation-delay: .24s; }
[data-ai-anim="scan"] .ai-g path:nth-child(8) { animation-delay: .28s; }
[data-ai-anim="scan"] .ai-g path:nth-child(9) { animation-delay: .32s; }

@keyframes ai-scan {
	from { stroke-dashoffset: 1; }
	to   { stroke-dashoffset: 0; }
}

/* -----------------------------------------------------
 * spread
 *
 * Animate UI `layers`, default:
 *   path1 y ->  5
 *   path3 y -> -5
 *   0.3s easeInOut
 * ----------------------------------------------------- */
[data-ai-anim="spread"] .ai-p1,
[data-ai-anim="spread"] .ai-p3 {
	transition: transform var(--ai-dur) var(--ai-ease);
}

[data-ai-trigger]:hover [data-ai-anim="spread"] .ai-p1,
[data-ai-trigger]:focus-visible [data-ai-anim="spread"] .ai-p1 {
	transform: translateY(5px);
}

[data-ai-trigger]:hover [data-ai-anim="spread"] .ai-p3,
[data-ai-trigger]:focus-visible [data-ai-anim="spread"] .ai-p3 {
	transform: translateY(-5px);
}

/* -----------------------------------------------------
 * spin-45 / spin-back
 *
 * Animate UI `refresh-cw`, default:
 *   group rotate 0 -> 45, spring(150, 25)
 * `rotate-ccw` runs the same motion anticlockwise.
 * ----------------------------------------------------- */
[data-ai-anim="spin-45"] .ai-g,
[data-ai-anim="spin-back"] .ai-g {
	transform-origin: 12px 12px;
	transition: transform .45s var(--ai-spring);
}

[data-ai-trigger]:hover [data-ai-anim="spin-45"] .ai-g,
[data-ai-trigger]:focus-visible [data-ai-anim="spin-45"] .ai-g {
	transform: rotate(45deg);
}

[data-ai-trigger]:hover [data-ai-anim="spin-back"] .ai-g,
[data-ai-trigger]:focus-visible [data-ai-anim="spin-back"] .ai-g {
	transform: rotate(-45deg);
}

/* -----------------------------------------------------
 * wiggle
 *
 * Animate UI `search`, default:
 *   group rotate [0, 17, -10, 5, -5, 0], origin bottom right
 * ----------------------------------------------------- */
[data-ai-anim="wiggle"] .ai-g {
	transform-origin: 18px 18px;
}

[data-ai-trigger]:hover [data-ai-anim="wiggle"] .ai-g,
[data-ai-trigger]:focus-visible [data-ai-anim="wiggle"] .ai-g,
.is-in [data-ai-anim="wiggle"][data-ai-on="view"] .ai-g {
	animation: ai-wiggle var(--ai-dur-slow) var(--ai-ease) both;
}

@keyframes ai-wiggle {
	0%   { transform: rotate(0); }
	20%  { transform: rotate(17deg); }
	40%  { transform: rotate(-10deg); }
	60%  { transform: rotate(5deg); }
	80%  { transform: rotate(-5deg); }
	100% { transform: rotate(0); }
}

/* -----------------------------------------------------
 * bob
 *
 * Animate UI `users`, default:
 *   path1  y [0,  2, -2, 0], delay 0.1s
 *   circle y [0,  4, -2, 0]
 *   0.6s easeInOut
 * ----------------------------------------------------- */
[data-ai-trigger]:hover [data-ai-anim="bob"] .ai-p1,
[data-ai-trigger]:focus-visible [data-ai-anim="bob"] .ai-p1,
.is-in [data-ai-anim="bob"][data-ai-on="view"] .ai-p1 {
	animation: ai-bob-a var(--ai-dur-slow) var(--ai-ease) .1s both;
}

[data-ai-trigger]:hover [data-ai-anim="bob"] .ai-p2,
[data-ai-trigger]:focus-visible [data-ai-anim="bob"] .ai-p2,
.is-in [data-ai-anim="bob"][data-ai-on="view"] .ai-p2 {
	animation: ai-bob-b var(--ai-dur-slow) var(--ai-ease) both;
}

@keyframes ai-bob-a {
	0%, 100% { transform: translateY(0); }
	33%      { transform: translateY(2px); }
	66%      { transform: translateY(-2px); }
}

@keyframes ai-bob-b {
	0%, 100% { transform: translateY(0); }
	33%      { transform: translateY(4px); }
	66%      { transform: translateY(-2px); }
}

/* -----------------------------------------------------
 * twinkle
 *
 * Animate UI `sparkles`, default:
 *   group        scale [1, .9, 1.1, 1], 0.6s
 *   plus, circle opacity/scale 0 -> 1, 0.2s, reversed repeat
 * ----------------------------------------------------- */
[data-ai-anim="twinkle"] .ai-g {
	transform-origin: 12px 12px;
}

[data-ai-anim="twinkle"] .ai-p2,
[data-ai-anim="twinkle"] .ai-p3 {
	opacity: 0;
	transform-origin: center;
}

[data-ai-trigger]:hover [data-ai-anim="twinkle"] .ai-g,
[data-ai-trigger]:focus-visible [data-ai-anim="twinkle"] .ai-g,
.is-in [data-ai-anim="twinkle"][data-ai-on="view"] .ai-g {
	animation: ai-twinkle var(--ai-dur-slow) var(--ai-ease) both;
}

[data-ai-trigger]:hover [data-ai-anim="twinkle"] .ai-p2,
[data-ai-trigger]:focus-visible [data-ai-anim="twinkle"] .ai-p2,
.is-in [data-ai-anim="twinkle"][data-ai-on="view"] .ai-p2 {
	animation: ai-spark var(--ai-dur-fast) var(--ai-ease) .05s 2 alternate both;
}

[data-ai-trigger]:hover [data-ai-anim="twinkle"] .ai-p3,
[data-ai-trigger]:focus-visible [data-ai-anim="twinkle"] .ai-p3,
.is-in [data-ai-anim="twinkle"][data-ai-on="view"] .ai-p3 {
	animation: ai-spark var(--ai-dur-fast) var(--ai-ease) 2 alternate both;
}

/* A lone star has no satellites to twinkle; it takes the group pulse. */
[data-ai-trigger]:hover [data-ai-anim="twinkle-solo"] .ai-g,
[data-ai-trigger]:focus-visible [data-ai-anim="twinkle-solo"] .ai-g {
	animation: ai-twinkle var(--ai-dur-slow) var(--ai-ease) both;
}

[data-ai-anim="twinkle-solo"] .ai-g {
	transform-origin: 12px 12px;
}

@keyframes ai-twinkle {
	0%   { transform: scale(1); }
	33%  { transform: scale(.9); }
	66%  { transform: scale(1.1); }
	100% { transform: scale(1); }
}

@keyframes ai-spark {
	from { opacity: 0; transform: scale(0); }
	to   { opacity: 1; transform: scale(1); }
}

/* -----------------------------------------------------
 * nudge-y
 *
 * Animate UI `chevron-down`, default: a short travel along the
 * direction the chevron points; 180 degrees when its panel is open.
 * ----------------------------------------------------- */
[data-ai-anim="nudge-y"] .ai-g {
	transform-origin: 12px 12px;
	transition: transform var(--ai-dur) var(--ai-ease);
}

[data-ai-trigger]:hover [data-ai-anim="nudge-y"] .ai-g,
[data-ai-trigger]:focus-visible [data-ai-anim="nudge-y"] .ai-g {
	transform: translateY(2px);
}

[data-ai-trigger].is-active [data-ai-anim="nudge-y"] .ai-g,
[data-ai-trigger][aria-expanded="true"] [data-ai-anim="nudge-y"] .ai-g {
	transform: rotate(180deg);
}

/* -----------------------------------------------------
 * pulse
 *
 * `activity`: the trace redraws left to right.
 * ----------------------------------------------------- */
[data-ai-anim="pulse"] .ai-p1 {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

[data-ai-trigger]:hover [data-ai-anim="pulse"] .ai-p1,
[data-ai-trigger]:focus-visible [data-ai-anim="pulse"] .ai-p1,
.is-in [data-ai-anim="pulse"][data-ai-on="view"] .ai-p1 {
	animation: ai-pulse .8s var(--ai-ease) both;
}

@keyframes ai-pulse {
	from { stroke-dashoffset: 1; }
	to   { stroke-dashoffset: 0; }
}

/* -----------------------------------------------------
 * climb / climb-line
 *
 * `chart-no-axes-column`: the bars grow from their baseline, staggered.
 * `chart-line`: the trend line draws itself inside a static frame.
 * ----------------------------------------------------- */
[data-ai-anim="climb"] .ai-p1,
[data-ai-anim="climb"] .ai-p2,
[data-ai-anim="climb"] .ai-p3 {
	transform-origin: center bottom;
}

[data-ai-trigger]:hover [data-ai-anim="climb"] .ai-p1,
[data-ai-trigger]:focus-visible [data-ai-anim="climb"] .ai-p1,
.is-in [data-ai-anim="climb"][data-ai-on="view"] .ai-p1 {
	animation: ai-climb .45s var(--ai-ease) both;
}

[data-ai-trigger]:hover [data-ai-anim="climb"] .ai-p2,
[data-ai-trigger]:focus-visible [data-ai-anim="climb"] .ai-p2,
.is-in [data-ai-anim="climb"][data-ai-on="view"] .ai-p2 {
	animation: ai-climb .45s var(--ai-ease) .08s both;
}

[data-ai-trigger]:hover [data-ai-anim="climb"] .ai-p3,
[data-ai-trigger]:focus-visible [data-ai-anim="climb"] .ai-p3,
.is-in [data-ai-anim="climb"][data-ai-on="view"] .ai-p3 {
	animation: ai-climb .45s var(--ai-ease) .16s both;
}

@keyframes ai-climb {
	from { transform: scaleY(.4); }
	to   { transform: scaleY(1); }
}

[data-ai-anim="climb-line"] .ai-p1 {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

[data-ai-trigger]:hover [data-ai-anim="climb-line"] .ai-p1,
[data-ai-trigger]:focus-visible [data-ai-anim="climb-line"] .ai-p1,
.is-in [data-ai-anim="climb-line"][data-ai-on="view"] .ai-p1 {
	animation: ai-pulse .6s var(--ai-ease) both;
}

/* -----------------------------------------------------
 * snip
 *
 * Animate UI `scissors`: the blades close and reopen.
 * ----------------------------------------------------- */
[data-ai-anim="snip"] .ai-p1,
[data-ai-anim="snip"] .ai-p3 {
	transform-origin: 14px 12px;
}

[data-ai-trigger]:hover [data-ai-anim="snip"] .ai-p1,
[data-ai-trigger]:focus-visible [data-ai-anim="snip"] .ai-p1 {
	animation: ai-snip-a .5s var(--ai-ease) both;
}

[data-ai-trigger]:hover [data-ai-anim="snip"] .ai-p3,
[data-ai-trigger]:focus-visible [data-ai-anim="snip"] .ai-p3 {
	animation: ai-snip-b .5s var(--ai-ease) both;
}

@keyframes ai-snip-a {
	0%, 100% { transform: rotate(0); }
	50%      { transform: rotate(-9deg); }
}

@keyframes ai-snip-b {
	0%, 100% { transform: rotate(0); }
	50%      { transform: rotate(9deg); }
}

/* -----------------------------------------------------
 * roll
 *
 * `forklift`: the truck edges forward and settles back.
 * ----------------------------------------------------- */
[data-ai-trigger]:hover [data-ai-anim="roll"] .ai-g,
[data-ai-trigger]:focus-visible [data-ai-anim="roll"] .ai-g {
	animation: ai-roll var(--ai-dur-slow) var(--ai-ease) both;
}

@keyframes ai-roll {
	0%, 100% { transform: translateX(0); }
	40%      { transform: translateX(2px); }
	70%      { transform: translateX(-1px); }
}

/* -----------------------------------------------------
 * orbit
 *
 * The React mark's three ellipses make one slow quarter turn. The only
 * brand mark that moves at all, because rotation is what the mark is.
 * ----------------------------------------------------- */
[data-ai-anim="orbit"] .ai-g {
	transform-origin: 12px 12px;
	transition: transform .5s var(--ai-ease);
}

[data-ai-trigger]:hover [data-ai-anim="orbit"] .ai-g,
[data-ai-trigger]:focus-visible [data-ai-anim="orbit"] .ai-g {
	transform: rotate(90deg);
}

/* -----------------------------------------------------
 * lift
 *
 * The house default for an icon with no dedicated Animate UI variant:
 * a 4% scale and a 1px rise on the same easing. Quiet enough to sit
 * under eleven of them in one viewport.
 * ----------------------------------------------------- */
[data-ai-anim="lift"] .ai-g {
	transform-origin: 12px 12px;
	transition: transform var(--ai-dur) var(--ai-ease);
}

[data-ai-trigger]:hover [data-ai-anim="lift"] .ai-g,
[data-ai-trigger]:focus-visible [data-ai-anim="lift"] .ai-g {
	transform: translateY(-1px) scale(1.04);
}

/* -----------------------------------------------------
 * press
 *
 * Animate UI's animateOnTap shape, for the device icons: a short
 * compression that settles. Fires on hover AND on .is-active, so it
 * still plays on a touch screen with no hover to give it.
 * ----------------------------------------------------- */
[data-ai-anim="press"] .ai-g {
	transform-origin: 12px 12px;
}

[data-ai-trigger]:hover [data-ai-anim="press"] .ai-g,
[data-ai-trigger]:focus-visible [data-ai-anim="press"] .ai-g,
[data-ai-trigger].is-active [data-ai-anim="press"] .ai-g {
	animation: ai-press .42s var(--ai-ease) both;
}

@keyframes ai-press {
	0%, 100% { transform: scale(1); }
	45%      { transform: scale(.9); }
}

/* =====================================================
 * 5. Section adjustments
 *
 * The minimum needed to let an SVG stand where something else used to.
 * Nothing here changes a layout; each rule retires a mechanism the new
 * icon replaces.
 * ===================================================== */

/*
 * FAQ. The plus was two ::before/::after bars drawn by the page
 * stylesheet. Now that the row carries a real icon, those bars would
 * render on top of it, so they are switched off - from here rather than
 * by editing four page stylesheets.
 */
.lp-faq-icon.ai-ico::before,
.lp-faq-icon.ai-ico::after {
	content: none;
}

.lp-faq-icon.ai-ico {
	margin-left: auto;
}

/*
 * Header toggle. The three <span> bars become the menu icon. The label
 * keeps its existing 40px box, so the tap target does not change - only
 * what is drawn inside it. The bar rules in header.css target
 * `.tta-nav-toggle-label span`, and there are no spans left, so nothing
 * has to be unset.
 */
.tta-nav-toggle-label--icon {
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var(--wp--preset--color--tta-charcoal, #222);
}

/*
 * The label is a 24px box at mobile, and the icon fills it. The padding
 * is dropped rather than the box grown, so the header layout is untouched.
 */
.tta-nav-toggle-label--icon .ai-svg {
	width: 24px;
	height: 24px;
}

/*
 * A 24px control is well under the 44px touch target guidance, and this
 * one is the only way into the menu on a phone. The hit area is grown
 * with a pseudo-element so the visual footprint - and therefore the
 * header layout - does not move.
 */
.tta-nav-toggle-label--icon::after {
	content: "";
	position: absolute;
	top: -10px;
	right: -10px;
	bottom: -10px;
	left: -10px;
}

/*
 * The checkbox behind this label is display:none, so it was never in the
 * tab order and the mobile menu could not be opened from a keyboard at
 * all. The label now carries role="button" and tabindex="0", which means
 * it needs a focus ring of its own.
 */
.tta-nav-toggle-label--icon:focus-visible {
	outline: 2px solid var(--lp-primary, #654dff);
	outline-offset: 2px;
	border-radius: 6px;
})

/*
 * Card, why-choose, award and industry icons already have a sized
 * wrapper. Those wrappers set `svg { width: Npx }`, which still applies
 * - this only re-points the stroke weight onto the token so the whole
 * page lands on one weight.
 */
.lp-card__icon .ai-svg,
.lp-why-icon .ai-svg,
.lp-award-icon .ai-svg,
.ta-ind-icon .ai-svg,
.lp-ind-node-icon .ai-svg,
.lp-ind-hub-icon .ai-svg,
.lp-seg-icon .ai-svg,
.lp-tech-card__icon .ai-svg,
.lp-engage__pmicon .ai-svg {
	stroke-width: var(--ai-stroke);
}

/*
 * Footer certification marks. The hand-written shields they replace were
 * hard-coded stroke="#FFFFFF"; the registry paints in currentColor, so the
 * colour moves to the wrapper - which is also what lets them respond to
 * hover at all.
 */
.tta-footer__trust-icon {
	color: #fff;
}

[data-ai-trigger]:hover .tta-footer__trust-icon .ai-svg {
	color: var(--lp-primary, #654dff);
}

/*
 * Pricing tick. A filled disc with a white tick, which is what that
 * section reads as - so the .ai-svg defaults (fill:none, stroke:
 * currentColor) have to be put back for this one mark. CSS beats a
 * presentation attribute, so the SVG cannot state this itself.
 */
.lp-price-tick circle {
	fill: currentColor;
	stroke: none;
}

.lp-price-tick .ai-p1 {
	stroke: #fff;
	stroke-width: 2;
}

/*
 * Process rail. The step icon sits above the phase label, in the content
 * column - the numbered badge is absolutely positioned out in the gutter,
 * so the two never collide.
 *
 * The section is always dark (lp-section--dark is hard-coded in the
 * component), so the accent here is the light end of the palette. Using
 * --lp-primary, as an icon in a light section would, puts dark purple on
 * near-black and the icon disappears.
 */
.lp-proc__icon {
	display: block;
	margin: 0 0 12px;
	color: var(--lp-pill, #dfdaff);
	opacity: .85;
	transition: color var(--ai-dur-fast) var(--ai-ease), opacity var(--ai-dur-fast) var(--ai-ease);
}

.lp-proc__phase:hover .lp-proc__icon,
.lp-proc__phase:focus-within .lp-proc__icon {
	color: var(--lp-white, #fff);
	opacity: 1;
}

/*
 * The trigger state rule in section 3 paints .ai-ico with --ai-color-hover,
 * which is the light-section accent. On this dark band the icon has to go
 * lighter on hover, not darker, so that rule is overridden here.
 */
.lp-proc__phase[data-ai-trigger]:hover .lp-proc__icon .ai-ico {
	color: inherit;
}

/* =====================================================
 * 6. Reduced motion
 *
 * Icons stay visible and stay legible; only the motion goes. Colour
 * state changes are kept, because that is the hover affordance rather
 * than decoration.
 * ===================================================== */

@media (prefers-reduced-motion: reduce) {

	.ai-svg,
	.ai-svg *,
	.ai-ico {
		animation: none !important;
		transition: color var(--ai-dur-fast) linear !important;
		transform: none !important;
	}

	/*
	 * The two icons whose FINAL state carries meaning keep it. A
	 * hamburger that stays a hamburger while the menu is open, or a plus
	 * that stays a plus while the answer is open, would both be telling
	 * the user something untrue. They snap instead of animating.
	 */
	[data-ai-trigger].is-active [data-ai-anim="menu-x"] .ai-p1,
	[data-ai-trigger][aria-expanded="true"] [data-ai-anim="menu-x"] .ai-p1 {
		transform: translate(-2.35px, .35px) rotate(-45deg) !important;
	}

	[data-ai-trigger].is-active [data-ai-anim="menu-x"] .ai-p2,
	[data-ai-trigger][aria-expanded="true"] [data-ai-anim="menu-x"] .ai-p2 {
		opacity: 0;
	}

	[data-ai-trigger].is-active [data-ai-anim="menu-x"] .ai-p3,
	[data-ai-trigger][aria-expanded="true"] [data-ai-anim="menu-x"] .ai-p3 {
		transform: translate(-2.35px, -.35px) rotate(45deg) !important;
	}

	[data-ai-trigger].is-active [data-ai-anim="plus-x"] .ai-p1,
	[data-ai-trigger][aria-expanded="true"] [data-ai-anim="plus-x"] .ai-p1 {
		transform: rotate(45deg) scaleY(1.214) !important;
	}

	[data-ai-trigger].is-active [data-ai-anim="plus-x"] .ai-p2,
	[data-ai-trigger][aria-expanded="true"] [data-ai-anim="plus-x"] .ai-p2 {
		transform: rotate(45deg) scaleX(1.214) !important;
	}

	[data-ai-trigger].is-active [data-ai-anim="nudge-y"] .ai-g,
	[data-ai-trigger][aria-expanded="true"] [data-ai-anim="nudge-y"] .ai-g {
		transform: rotate(180deg) !important;
	}

	/* Anything drawn by a dasharray must end up fully drawn. */
	[data-ai-anim="draw"] .ai-p1,
	[data-ai-anim="pulse"] .ai-p1,
	[data-ai-anim="climb-line"] .ai-p1,
	[data-ai-anim="scan"] .ai-g path {
		stroke-dashoffset: 0 !important;
	}

	/* Anything that twinkles in from nothing must end up present. */
	[data-ai-anim="twinkle"] .ai-p2,
	[data-ai-anim="twinkle"] .ai-p3 {
		opacity: 1 !important;
	}
}