/*
 * Premium hover interactions (sitewide).
 *
 * Restrained micro-interactions only: short transitions on transform, opacity, shadow, border and
 * colour. Nothing changes size, margin or layout, so there is no layout shift.
 *
 *  - Hover states apply only where a real hover exists (desktop mouse / trackpad).
 *  - Motion (lift, zoom, scale, slide) and transitions are switched off for users who prefer
 *    reduced motion; colour feedback stays, without animation.
 *  - Keyboard focus (:focus-visible) is always visible.
 *
 * Loaded last (front end only) so it refines the page stylesheets without changing layout.
 */

:root {
	--ix-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ix-gold: #b88635;
	--ix-gold-soft: #d5ac62;
	--ix-gold-tint: #f6e7c8;
	--ix-gold-ink: #8f6420;
	--ix-navy: #071b40;
}

/* ================================================================================ 0. Entrance animations
   They use fill-mode "both", which keeps the final transform applied for ever and would block the hover
   lift on buttons inside them. "backwards" gives the identical entrance and then lets hover transforms work. */
.hero__eyebrow,
.hero h1,
.hero__lead,
.hero__actions,
.hero__trust,
.hero__glass,
.hero__stats,
.ab-hero__copy > *,
.ab-glass,
.ct-hero__copy > *,
.ct-glass,
.bs-hero__copy > *,
.bs-glass { animation-fill-mode: backwards; }

/* ================================================================================ 1. Colour and shadow feedback (hover devices) */
@media (hover: hover) and (pointer: fine) {

	/* ---- Buttons ------------------------------------------------------------------------ */
	/* Gold gradient buttons: a slightly richer, deeper gold. */
	.bs-btn:hover,
	.ab-btn:hover,
	.ct-submit:hover,
	.ft__cta:hover,
	.svx-feature__btn:hover,
	.header-cta:hover,
	.ct-cta__btn:hover,
	.banking .btn--primary:hover,
	.cta-band .btn--primary:hover {
		filter: brightness(0.93) saturate(1.1);
		box-shadow: 0 18px 30px -12px rgba(184, 134, 53, 0.75);
	}

	/* Navy buttons: a refined, slightly lighter navy. */
	.hero-btn--primary:hover,
	.nav-cta-mobile:hover,
	.wp-block-button__link:hover,
	.btn--primary:hover {
		background-color: #0d2c66;
		box-shadow: 0 18px 30px -12px rgba(7, 27, 64, 0.6);
	}

	/* Outline button: soft background fill and a gold edge. */
	.hero-btn--secondary:hover {
		background-color: rgba(7, 27, 64, 0.06);
		border-color: var(--ix-navy);
		box-shadow: 0 14px 26px -14px rgba(7, 27, 64, 0.35);
	}

	/* ---- Cards -------------------------------------------------------------------------- */
	.svx-card:hover,
	.svc-card:hover,
	.bs-opt:hover,
	.bs-uae__cards li:hover,
	.ab-card:hover,
	.ct-why__card:hover,
	.sb-seo__card:hover {
		border-color: rgba(184, 134, 53, 0.45);
		box-shadow: 0 26px 52px -26px rgba(7, 27, 64, 0.4), 0 4px 14px -6px rgba(184, 134, 53, 0.25);
	}

	/* Icon tile: gentle gold tint (and ink) when its card is hovered. */
	.svx-card:hover .svx-card__icon,
	.svc-card:hover .svc-card__icon,
	.bs-opt:hover .bs-opt__icon,
	.bs-uae__cards li:hover .bs-ico,
	.bs-strip__panel li:hover .bs-ico,
	.bs-step:hover .bs-ico,
	.ab-card:hover .ab-ico,
	.ab-rows li:hover .ab-ico,
	.ct-why__card:hover .ct-ico,
	.ct-rows li:hover .ct-ico,
	.why__item:hover .why__icon,
	.svx-feature:hover .svx-feature__icon {
		background-color: var(--ix-gold-tint);
		color: var(--ix-gold-ink);
	}

	/* Dark-surface icon rings: soft gold fill. */
	.hero__trust li:hover .hero__trust-icon,
	.bs-hero__points li:hover .bs-hero__point-icon,
	.ab-hero__points li:hover .ab-hero__point-icon,
	.ct-hero__points li:hover .ct-hero__point-icon,
	.ft__rows li:hover .ft__ico,
	.ft__social a:hover,
	.header-call:hover .header-call__icon {
		background-color: rgba(213, 172, 98, 0.18);
		border-color: var(--ix-gold-soft);
		color: var(--ix-gold-soft);
	}

	.hero__trust li:hover .hero__trust-icon,
	.header-call:hover .header-call__icon { background-color: var(--ix-gold-tint); border-color: var(--ix-gold); color: var(--ix-gold-ink); }

	/* Feature checkmarks (setup cards, About lists, Home list): accent colour. */
	.bs-opt:hover .bs-checks .icon,
	.ab-card:hover .ab-checks .icon,
	.check-list li:hover .icon,
	.bs-ticks li:hover .bs-tick { color: var(--ix-gold); }

	/* ---- Corporate banking (Home) ------------------------------------------------------- */
	/* The highlight extends past the row with a spread shadow (no layout change), so text never touches its edge. */
	.banking__pillars li:hover { background-color: rgba(255, 255, 255, 0.05); border-top-color: rgba(213, 172, 98, 0.7); box-shadow: 0 0 0 0.6rem rgba(255, 255, 255, 0.05); border-radius: 6px; }

	.docs:hover .docs__sheet--front { box-shadow: 0 38px 70px -22px rgba(0, 0, 0, 0.6); }
	.docs__sheet--front li:hover { background-color: rgba(184, 134, 53, 0.07); }
	.docs__sheet--front li:hover .icon { color: #e2bd78; box-shadow: 0 0 0 3px rgba(184, 134, 53, 0.35); }

	/* ---- Why choose SkyBiz / rows ------------------------------------------------------- */
	/* Soft gold glow that fades out to the right: translucent, so the timeline connector stays visible. */
	.why__item:hover,
	.ab-rows li:hover { background-image: linear-gradient(90deg, rgba(184, 134, 53, 0.14), rgba(184, 134, 53, 0) 80%); box-shadow: 0 0 0 0.45rem rgba(184, 134, 53, 0.04); border-radius: 10px; }
	.why__item:hover h3,
	.ab-rows li:hover strong { color: var(--ix-gold-ink); }

	/* ---- Process steps ------------------------------------------------------------------ */
	.step:hover { border-top-color: var(--ix-gold); }
	.step:hover .step__num,
	.bs-step:hover .bs-step__num { color: var(--ix-gold); }
	.bs-step:hover { background-color: rgba(184, 134, 53, 0.07); box-shadow: 0 0 0 0.5rem rgba(184, 134, 53, 0.07); border-radius: 12px; }

	/* ---- Stats and feature strips -------------------------------------------------------- */
	.hero__stats li:hover { background-color: rgba(255, 255, 255, 0.06); }
	.hero__stats li:hover strong { color: #ecc986; }
	.ab-stats__panel li:hover,
	.bs-strip__panel li:hover { background-color: rgba(184, 134, 53, 0.06); border-radius: 12px; }
	.ab-stats li:hover .ab-stats__icon { color: var(--ix-gold); }

	/* ---- Contact ------------------------------------------------------------------------- */
	.ct-rows li:hover { background-color: rgba(184, 134, 53, 0.1); box-shadow: 0 0 0 0.55rem rgba(184, 134, 53, 0.1); border-radius: 12px; }

	/* Link underline that draws in from the left. */
	.ct-row__value,
	.ct-row__link,
	.ft__rows a,
	.svx-card__link,
	.link-arrow,
	.post-card__title a,
	.related__list a {
		background-image: linear-gradient(currentColor, currentColor);
		background-repeat: no-repeat;
		background-position: left calc(100% - 0.05em);
		background-size: 0 1px;
	}

	.ct-row__value:hover,
	.ct-row__link:hover,
	.ft__rows a:hover,
	.svx-card__link:hover,
	.link-arrow:hover,
	.post-card__title a:hover,
	.related__list a:hover { background-size: 100% 1px; }

	/* ---- Blog / FAQ / misc --------------------------------------------------------------- */
	.post-card:hover .post-card__title a { color: var(--ix-gold-ink); }
	.faq__button:hover { color: var(--ix-gold-ink); }
	.header-call:hover .header-call__num { color: var(--ix-gold-ink); }
}

/* ================================================================================ 2. Motion (hover devices, motion allowed) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

	/* ---- Buttons: lift, shadow and arrow slide ------------------------------------------ */
	.btn,
	.hero-btn,
	.bs-btn,
	.ab-btn,
	.ct-submit,
	.ft__cta,
	.svx-feature__btn,
	.ct-cta__btn,
	.wp-block-button__link {
		transition: transform 300ms var(--ix-ease), box-shadow 300ms var(--ix-ease), background-color 300ms var(--ix-ease), border-color 300ms var(--ix-ease), color 300ms var(--ix-ease), filter 300ms var(--ix-ease);
	}

	.btn:hover,
	.hero-btn:hover,
	.bs-btn:hover,
	.ab-btn:hover,
	.ct-submit:hover,
	.ft__cta:hover,
	.svx-feature__btn:hover,
	.header-cta:hover,
	.ct-cta__btn:hover,
	.wp-block-button__link:hover { transform: translateY(-3px); }

	/* The disabled / submitting state must not lift. */
	.ct-submit:disabled:hover,
	[data-submitting] .ct-submit:hover { transform: none; }

	.btn .icon,
	.hero-btn .icon,
	.bs-btn .icon,
	.ab-btn .icon,
	.ft__cta .icon,
	.svx-feature__btn .icon,
	.svx-card__link .icon,
	.link-arrow .icon,
	.ct-row__link .icon,
	.ct-cta__btn .icon { transition: transform 300ms var(--ix-ease); }

	.btn:hover .icon,
	.hero-btn:hover .icon,
	.bs-btn:hover .icon,
	.ab-btn:hover .icon,
	.ft__cta:hover .icon,
	.svx-feature__btn:hover .icon,
	.svx-card__link:hover .icon,
	.link-arrow:hover .icon,
	.ct-row__link:hover .icon,
	.ct-cta__btn:hover .icon { transform: translateX(4px); }

	/* ---- Cards: lift, image zoom, icon scale ----------------------------------------------- */
	.svx-card,
	.svc-card,
	.bs-opt,
	.bs-uae__cards li,
	.ab-card,
	.ct-why__card,
	.sb-seo__card,
	.post-card {
		transition: transform 300ms var(--ix-ease), box-shadow 300ms var(--ix-ease), border-color 300ms var(--ix-ease);
	}

	.svx-card:hover,
	.svc-card:hover,
	.bs-opt:hover,
	.bs-uae__cards li:hover { transform: translateY(-5px); }

	.ab-card:hover,
	.ct-why__card:hover,
	.sb-seo__card:hover,
	.post-card:hover { transform: translateY(-4px); }

	.svx-card__img,
	.bs-opt__media,
	.post-card__media { overflow: hidden; }

	.svx-card__img img,
	.bs-opt__media img,
	.post-card__media img { transition: transform 400ms var(--ix-ease); }

	.svx-card:hover .svx-card__img img,
	.bs-opt:hover .bs-opt__media img,
	.post-card:hover .post-card__media img { transform: scale(1.035); }

	/* ---- Icon tiles and badges: soft scale, with a colour transition ----------------------- */
	.svx-card__icon,
	.svc-card__icon,
	.bs-ico,
	.bs-opt__icon,
	.ab-ico,
	.ct-ico,
	.why__icon,
	.svx-feature__icon,
	.hero__trust-icon,
	.bs-hero__point-icon,
	.ab-hero__point-icon,
	.ct-hero__point-icon,
	.ab-stats__icon,
	.ft__ico,
	.ft__social a,
	.header-call__icon {
		transition: transform 300ms var(--ix-ease), background-color 300ms var(--ix-ease), border-color 300ms var(--ix-ease), color 300ms var(--ix-ease);
	}

	.svx-card:hover .svx-card__icon,
	.svc-card:hover .svc-card__icon,
	.bs-strip__panel li:hover .bs-ico,
	.bs-uae__cards li:hover .bs-ico,
	.bs-step:hover .bs-ico,
	.bs-opt:hover .bs-opt__icon,
	.ab-card:hover .ab-ico,
	.ab-rows li:hover .ab-ico,
	.ct-why__card:hover .ct-ico,
	.ct-rows li:hover .ct-ico,
	.why__item:hover .why__icon,
	.svx-feature:hover .svx-feature__icon,
	.hero__trust li:hover .hero__trust-icon,
	.bs-hero__points li:hover .bs-hero__point-icon,
	.ab-hero__points li:hover .ab-hero__point-icon,
	.ct-hero__points li:hover .ct-hero__point-icon,
	.ab-stats li:hover .ab-stats__icon,
	.ft__rows li:hover .ft__ico,
	.ft__social a:hover,
	.header-call:hover .header-call__icon { transform: scale(1.06); }

	/* ---- Rows, steps and strips: soft background and accent fade --------------------------- */
	.banking__pillars li,
	.why__item,
	.ab-rows li,
	.step,
	.bs-step,
	.ct-rows li,
	.hero__stats li,
	.ab-stats__panel li,
	.bs-strip__panel li,
	.docs__sheet--front li {
		transition: background-color 300ms var(--ix-ease), box-shadow 300ms var(--ix-ease), border-color 300ms var(--ix-ease);
	}

	.step__num,
	.bs-step__num,
	.hero__stats strong,
	.docs__sheet--front li .icon,
	.bs-checks .icon,
	.ab-checks .icon,
	.check-list .icon,
	.bs-tick { transition: color 300ms var(--ix-ease), transform 300ms var(--ix-ease), background-color 300ms var(--ix-ease); }

	.docs__sheet--front li:hover .icon,
	.bs-ticks li:hover .bs-tick { transform: scale(1.12); }

	/* Layered document visual: a very small lift via `translate`, so the existing rotations stay. */
	.docs__sheet--front { transition: translate 300ms var(--ix-ease), box-shadow 300ms var(--ix-ease); }
	.docs:hover .docs__sheet--front { translate: 0 -4px; }

	/* Link underline draw */
	.ct-row__value,
	.ct-row__link,
	.ft__rows a,
	.svx-card__link,
	.link-arrow,
	.post-card__title a,
	.related__list a { transition: background-size 300ms var(--ix-ease), color 300ms var(--ix-ease), border-color 300ms var(--ix-ease); }

	.ct-row__link .icon,
	.ft__rows a .icon { transition: transform 300ms var(--ix-ease); }

	/* Floating WhatsApp button */
	.wa-float { transition: transform 300ms var(--ix-ease), box-shadow 300ms var(--ix-ease); }
	.wa-float:hover { transform: scale(1.06); }
}

/* ================================================================================ 3. Keyboard focus (always visible) */
.btn:focus-visible,
.hero-btn:focus-visible,
.bs-btn:focus-visible,
.ab-btn:focus-visible,
.ct-submit:focus-visible,
.ft__cta:focus-visible,
.svx-feature__btn:focus-visible,
.svx-card__link:focus-visible,
.ct-cta__btn:focus-visible,
.link-arrow:focus-visible,
.ct-row__link:focus-visible,
.ct-row__value:focus-visible,
.faq__button:focus-visible,
.post-card a:focus-visible,
.ft__social a:focus-visible,
.ft__legal a:focus-visible,
.ft__list a:focus-visible,
.ft__rows a:focus-visible,
.header-call:focus-visible,
.wa-float:focus-visible {
	outline: 3px solid var(--ix-gold);
	outline-offset: 3px;
}

/* Keyboard users get the same colour feedback as mouse users on interactive tiles. */
.ft__social a:focus-visible { background-color: rgba(213, 172, 98, 0.18); border-color: var(--ix-gold-soft); color: var(--ix-gold-soft); }

/* ================================================================================ 4. Reduced motion
   Colour, border and shadow feedback stays; every lift, zoom, scale and slide (including the older
   per-component hover transforms in the page stylesheets) is switched off. */
@media (prefers-reduced-motion: reduce) {
	.btn:hover,
	.hero-btn:hover,
	.bs-btn:hover,
	.ab-btn:hover,
	.ct-submit:hover,
	.ft__cta:hover,
	.svx-feature__btn:hover,
	.header-cta:hover,
	.ct-cta__btn:hover,
	.wp-block-button__link:hover,
	.svc-card:hover,
	.post-card:hover,
	.post-card:hover .post-card__media img,
	.btn:hover .icon,
	.hero-btn:hover .icon,
	.bs-btn:hover .icon,
	.ab-btn:hover .icon,
	.ft__cta:hover .icon,
	.svx-feature__btn:hover .icon,
	.svx-card__link:hover .icon,
	.link-arrow:hover .icon,
	.ct-row__link:hover .icon { transform: none; translate: none; }
}