/* Motion polish: FAQ states, card hover, navigation and button transitions. Loaded last on every page.
   Transitions/animations are already disabled globally for prefers-reduced-motion (base.css); transforms below are
   additionally limited to hover-capable devices and to users who have not asked for reduced motion. */

/* ---------- FAQ ---------- */
.so-acc__item, .so-fq__item { transition: background-color .35s var(--ease); }
.so-acc__item.is-open { background: oklch(0.52 0.21 262 / .04); }
.so-acc__btn, .so-fq__item button { transition: color .25s; cursor: pointer; }
.so-acc__icon, .so-fq__item .ic { transition: transform .4s var(--ease), background-color .25s, border-color .25s, color .25s; }
.so-acc__btn:hover .so-acc__icon, .so-fq__item button:hover .ic { border-color: var(--blue); color: var(--blue-d); }
.so-acc__item.is-open .so-acc__btn:hover .so-acc__icon, .so-fq__item.is-open button:hover .ic { color: #fff; }
.so-acc__btn:focus-visible, .so-fq__item button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 10px; }
/* no browser scroll anchoring while answers resize: the controller keeps total height steady itself */
.so-acc, .so-fq__list { overflow-anchor: none; }
/* Elementor FAQ icon: the + / − glyph is drawn with two bars so the vertical bar can shrink smoothly (widgets.js still swaps the text, which stays hidden) */
.so-fq__item .ic { font-size: 0; line-height: 0; position: relative; }
.so-fq__item .ic::before, .so-fq__item .ic::after { content: ''; grid-area: 1 / 1; background: currentColor; border-radius: 2px; transition: transform .4s var(--ease), opacity .3s; }
.so-fq__item .ic::before { width: 13px; height: 1.6px; }
.so-fq__item .ic::after { width: 1.6px; height: 13px; }
.so-fq__item.is-open .ic::after { transform: scaleY(0); opacity: 0; }

/* ---------- Cards (hover-capable devices, motion allowed) ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	/* information, feature, solution, city, market and related-service cards */
	.so-chn__grid:not([data-pick-root]) .so-chn__card { transition: translate .3s var(--ease), box-shadow .3s var(--ease), border-color .25s, background-color .25s; }
	.so-chn__grid:not([data-pick-root]) .so-chn__card:hover { translate: 0 -4px; border-color: oklch(0.8 0.07 258); box-shadow: 0 22px 40px -28px oklch(0.3 0.14 262 / .5); }
	.so-chn--dark .so-chn__grid:not([data-pick-root]) .so-chn__card:hover { border-color: oklch(1 0 0 / .34); background: oklch(1 0 0 / .08); box-shadow: 0 22px 40px -26px oklch(0.1 0.05 268 / .8); }
	a.so-chn__card.is-link .t::after { display: inline-block; transition: translate .25s var(--ease); }
	a.so-chn__card.is-link:hover .t::after { translate: 4px 0; }
	.so-chn__card.has-ic .ic { transition: background-color .25s, border-color .25s, color .25s, scale .3s var(--ease); }
	.so-chn__card.has-ic:hover .ic { scale: 1.06; }

	/* work / case-study cards */
	.so-wrk__card .shot { overflow: hidden; transition: box-shadow .35s var(--ease), border-color .25s; }
	.so-wrk__card .shot img, .so-wrk__card .shot .v { transition: transform .7s var(--ease); }
	a.so-wrk__card:hover .shot { border-color: oklch(0.8 0.07 258); box-shadow: 0 24px 44px -30px oklch(0.3 0.14 262 / .55); }
	a.so-wrk__card:hover .shot img { transform: scale(1.04); }
	.so-work__card .shot { transition: translate .3s var(--ease), box-shadow .3s var(--ease); }
	.so-work__card:hover .shot { translate: 0 -3px; box-shadow: 0 22px 40px -26px oklch(0.25 0.1 262 / .6); }

	/* comparison rows */
	.so-prs__row { transition: background-color .25s; }
	.so-prs__row:hover { background: oklch(0.52 0.21 262 / .035); }

	/* blog and Insights cards */
	.so-pcard__img img { transition: transform .7s var(--ease); }
	.so-pcard:hover .so-pcard__img img { transform: scale(1.04); }
	.so-pcard__more svg, .so-pcard__more .so-arr { transition: translate .25s var(--ease); }
	.so-pcard:hover .so-pcard__more svg, .so-pcard:hover .so-pcard__more .so-arr { translate: 4px 0; }
}

/* ---------- Buttons and floating controls ---------- */
.so-btn { transition: background-color .2s, color .2s, transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s; }
.so-btn:active { transform: translateY(0) scale(.98); }
.so-btn .so-arr { transition: translate .25s var(--ease); }
.so-btn:hover .so-arr { translate: 3px 0; }
.so-btn:focus-visible, .so-nav__item:focus-visible, .so-wa-float:focus-visible, .so-top:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.so-wa-float { transition: translate .25s var(--ease), background-color .25s, width .3s, padding .3s, box-shadow .25s; }
.so-wa-float:hover { box-shadow: 0 18px 38px -12px oklch(0.4 0.12 152 / .75), inset 0 0 0 1px oklch(1 0 0 / .18); }
.so-wa-float:active, .so-top:active { translate: 0 0; }
.so-top { transition: opacity .3s var(--ease), translate .3s var(--ease), box-shadow .25s, color .2s; }
.so-footer__nav li a { transition: color .2s, text-decoration-color .2s; }

/* ---------- Navigation ---------- */
.so-nav__item { transition: color .2s, background-color .2s, border-color .2s; }
.so-mega__item, .so-mega__row, .so-mega__group { transition: background-color .2s, color .2s; }
.so-mega__row .ar, .so-mega__group .ar { display: inline-block; transition: translate .2s var(--ease), color .2s; }
.so-mega__row:hover .ar, .so-mega__group:hover .ar { translate: 3px 0; }
.so-mega { animation: so-mega-in .24s var(--ease); transform-origin: top center; }
.so-mega-wrap.is-leaving { display: block; pointer-events: none; }
.so-mega-wrap.is-leaving .so-mega { animation: so-mega-out .16s ease-in forwards; }
@keyframes so-mega-in { from { opacity: 0; transform: translateY(-8px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes so-mega-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } }
.so-mm { animation: so-mm-in .28s var(--ease); }
.so-mm.is-leaving { animation: so-mm-out .18s ease-in forwards; pointer-events: none; }
@keyframes so-mm-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes so-mm-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-8px); } }
.so-mm__panel:not([hidden]), .so-mm__sec { animation: so-fade .25s var(--ease); }