/* ==========================================================================
   Alqima Urban — Micro-interactions (Stage 08)
   One interaction language for the whole site, loaded after the section
   layers and before rtl.css:

   1. Arrow swap      — the diagonal arrow leaves ↗ and a second one arrives
                        from ↙ (TEXT ↗ → TEXT ↗↗ feel). One rule set for every
                        arrow control: CTAs, project arrows, capabilities,
                        final CTA, "next project".
   2. Header          — menu lines meet first, then rotate (and the reverse on
                        close); icon buttons press in by 4 %; the globe turns
                        on hover and while the language panel is open; the
                        wordmark answers hover with opacity only.
   3. Links           — footer / menu secondary links: a hairline draws from
                        the reading start.
   4. Projects        — image settles in to 1.05, metadata brightens, title
                        nudges (projects.css), arrow swap.
   Hover effects live inside (hover: hover) so touch devices never depend on
   them; focus-visible triggers the same states for keyboards. Reduced
   motion: states change instantly, nothing travels.
   No shadows, no gradients, no glow, no scale on text.
   ========================================================================== */

/* ---------------------------------------------------------- 1. Arrow swap */
.cta__icon,
.prj-item__arrow,
.prc-cap__arrow,
.ctaf__button-icon,
.col-single__next-icon,
.svc-list__arrow,
.svc-toc__arrow,
.svc-chapters__arrow {
	position: relative;
	overflow: hidden;
}

.cta__icon > .icon,
.prj-item__arrow > .icon,
.prc-cap__arrow > .icon,
.ctaf__button-icon > .icon,
.col-single__next-icon > .icon,
.svc-list__arrow > .icon,
.svc-toc__arrow > .icon,
.svc-chapters__arrow > .icon {
	transition: translate 0.5s var(--ease-out);
}

/* The incoming arrow: the same ↗ drawn with a mask in the current colour. */
.cta__icon::after,
.prj-item__arrow::after,
.prc-cap__arrow::after,
.ctaf__button-icon::after,
.col-single__next-icon::after,
.svc-list__arrow::after,
.svc-toc__arrow::after,
.svc-chapters__arrow::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 1em;
	height: 1em;
	margin: auto;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='square'%3E%3Cpath d='M4.5 11.5 11.5 4.5M5.5 4.5h6v6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='square'%3E%3Cpath d='M4.5 11.5 11.5 4.5M5.5 4.5h6v6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	translate: -130% 130%;
	transition: translate 0.5s var(--ease-out);
	pointer-events: none;
}

[dir="rtl"] .cta__icon::after,
[dir="rtl"] .prj-item__arrow::after,
[dir="rtl"] .prc-cap__arrow::after,
[dir="rtl"] .ctaf__button-icon::after,
[dir="rtl"] .col-single__next-icon::after,
[dir="rtl"] .svc-list__arrow::after,
[dir="rtl"] .svc-toc__arrow::after,
[dir="rtl"] .svc-chapters__arrow::after {
	transform: scaleX(-1);       /* ↖ in Arabic, like the inline icon */
	translate: 130% 130%;
}

@media (hover: hover) {
	.page-shell__link:hover .cta__icon > .icon,
	.cta:hover .cta__icon > .icon,
	a.prj-item__link:hover .prj-item__arrow > .icon,
	a.prc-cap__inner:hover .prc-cap__arrow > .icon,
	.ctaf__button:hover .ctaf__button-icon > .icon,
	.col-single__pager-link:hover .col-single__next-icon > .icon {
		translate: 130% -130%;
	}

	[dir="rtl"] .page-shell__link:hover .cta__icon > .icon,
	[dir="rtl"] .cta:hover .cta__icon > .icon,
	[dir="rtl"] a.prj-item__link:hover .prj-item__arrow > .icon,
	[dir="rtl"] a.prc-cap__inner:hover .prc-cap__arrow > .icon,
	[dir="rtl"] .ctaf__button:hover .ctaf__button-icon > .icon,
	[dir="rtl"] .col-single__pager-link:hover .col-single__next-icon > .icon {
		translate: -130% -130%;
	}

	.page-shell__link:hover .cta__icon::after,
	.cta:hover .cta__icon::after,
	a.prj-item__link:hover .prj-item__arrow::after,
	a.prc-cap__inner:hover .prc-cap__arrow::after,
	.ctaf__button:hover .ctaf__button-icon::after,
	.col-single__pager-link:hover .col-single__next-icon::after {
		translate: 0 0;
	}
}

/* Keyboard: the same swap on visible focus. */
.page-shell__link:focus-visible .cta__icon > .icon,
.cta:focus-visible .cta__icon > .icon,
a.prj-item__link:focus-visible .prj-item__arrow > .icon,
a.prc-cap__inner:focus-visible .prc-cap__arrow > .icon,
.ctaf__button:focus-visible .ctaf__button-icon > .icon,
.col-single__pager-link:focus-visible .col-single__next-icon > .icon {
	translate: 130% -130%;
}

[dir="rtl"] .page-shell__link:focus-visible .cta__icon > .icon,
[dir="rtl"] .cta:focus-visible .cta__icon > .icon,
[dir="rtl"] a.prj-item__link:focus-visible .prj-item__arrow > .icon,
[dir="rtl"] a.prc-cap__inner:focus-visible .prc-cap__arrow > .icon,
[dir="rtl"] .ctaf__button:focus-visible .ctaf__button-icon > .icon,
[dir="rtl"] .col-single__pager-link:focus-visible .col-single__next-icon > .icon {
	translate: -130% -130%;
}

.page-shell__link:focus-visible .cta__icon::after,
.cta:focus-visible .cta__icon::after,
a.prj-item__link:focus-visible .prj-item__arrow::after,
a.prc-cap__inner:focus-visible .prc-cap__arrow::after,
.ctaf__button:focus-visible .ctaf__button-icon::after,
.col-single__pager-link:focus-visible .col-single__next-icon::after {
	translate: 0 0;
}

/* -------------------------------------------------------------- 2. Header */
/* Menu icon: the two-phase open / close morph lives in header.css (v1.3). */

/* Icon buttons (menu, language): a small press. */
.icon-button {
	transition: scale 0.25s var(--ease-out), color var(--dur-2) var(--ease-soft);
}

.icon-button:active {
	scale: 0.94;
}

/* Language (direct toggle): the globe turns on hover / focus and the code
   brightens; the press scale gives the click feedback. */
.lang-control__code {
	transition: color var(--dur-2) var(--ease-soft);
}

.lang-control__button:focus-visible .icon--globe {
	transform: rotate(18deg);
}

.lang-control__button:focus-visible .lang-control__code {
	color: var(--c-text);
}

@media (hover: hover) {
	.lang-control__button:hover .lang-control__code {
		color: var(--c-text);
	}

	/* Wordmark: opacity only — the brand is never animated. */
	.site-header .brand {
		transition: opacity 0.4s var(--ease-soft);
	}

	.site-header .brand:hover {
		opacity: 0.8;
	}
}

/* --------------------------------------------------------------- 3. Links */
/* Footer and menu secondary links: a hairline draws from the reading start. */
.site-footer__list a,
.fs-menu__contact a {
	position: relative;
}

.site-footer__list a::after,
.fs-menu__contact a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0.55rem;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.55s var(--ease-out);
}

[dir="rtl"] .site-footer__list a::after,
[dir="rtl"] .fs-menu__contact a::after {
	transform-origin: right center;
}

@media (hover: hover) {
	.site-footer__list a:hover::after,
	.fs-menu__contact a:hover::after {
		transform: scaleX(1);
	}
}

.site-footer__list a:focus-visible::after,
.fs-menu__contact a:focus-visible::after {
	transform: scaleX(1);
}

/* Back to top: the arrow rises a few pixels (Stage 09). */
.site-footer__top-icon {
	display: inline-grid;
	transition: translate 0.5s var(--ease-out);
}

@media (hover: hover) {
	.site-footer__top-link:hover .site-footer__top-icon {
		translate: 0 -3px;
	}
}

.site-footer__top-link:focus-visible .site-footer__top-icon {
	translate: 0 -3px;
}

/* ------------------------------------------------------------ 4. Projects */
.prj-item__meta {
	transition: color var(--dur-3) var(--ease-soft), translate 1.1s var(--ease-out);
}

@media (hover: hover) {
	a.prj-item__link:hover {
		--s: 1.05;                 /* image settles in (projects.css: scale(var(--s))) */
	}

	a.prj-item__link:hover .prj-item__meta {
		color: var(--c-text-2);
	}
}

a.prj-item__link:focus-visible {
	--s: 1.05;
}

/* ------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.cta__icon > .icon,
	.prj-item__arrow > .icon,
	.prc-cap__arrow > .icon,
	.ctaf__button-icon > .icon,
	.col-single__next-icon > .icon,
	.cta__icon::after,
	.prj-item__arrow::after,
	.prc-cap__arrow::after,
	.ctaf__button-icon::after,
	.col-single__next-icon::after,
	.menu-button__line,
	.icon-button,
	.site-footer__top-icon,
	.site-footer__list a::after,
	.fs-menu__contact a::after,
	.site-header__glass,
	.site-header .brand,
	.site-header .icon-button {
		transition: none !important;
		animation: none !important;
	}

	/* No travelling arrows: the arrow stays, its colour/border state still shows. */
	.cta__icon::after,
	.prj-item__arrow::after,
	.prc-cap__arrow::after,
	.ctaf__button-icon::after,
	.col-single__next-icon::after {
		display: none;
	}

	.cta__icon > .icon,
	.prj-item__arrow > .icon,
	.prc-cap__arrow > .icon,
	.ctaf__button-icon > .icon,
	.col-single__next-icon > .icon {
		translate: none !important;
	}

	a.prj-item__link {
		--s: 1 !important;
	}
}