/* Dark editorial layer: oversized type, film grain, glass header, and the styles fx.js animates.
 * Everything here reads complete without JS; .wak-fx rules apply only while motion runs. Logical properties only. */

/* Film grain over the whole page. Fixed, faint, never interactive. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 300;
	pointer-events: none;
	opacity: .07;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--wak-accent); color: var(--wak-bg); }

/* Glass header that steps aside while reading down. */
.wak-header {
	color: var(--wak-text);
	background: color-mix(in srgb, var(--wak-bg) 72%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	transition: transform .6s var(--wak-ease), border-color .4s var(--wak-ease);
}

.wak-header.is-hidden { transform: translateY(calc(-100% - var(--wak-bar-top))); }
.wak-header .wak-nav__list a { color: var(--wak-text); }
.wak-header .wak-lang { color: var(--wak-muted); }

.wak-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 250;
	block-size: 2px;
	background: linear-gradient(90deg, var(--wak-burgundy), var(--wak-accent));
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
}

:root[dir="rtl"] .wak-progress { transform-origin: 100% 50%; }

/* Type: bigger and tighter than the light scheme. */
.wak-h1 {
	font-size: clamp(54px, 9.6vw, 156px);
	line-height: 1.04;
}

.wak-h2 { font-size: clamp(40px, 6.4vw, 96px); line-height: 1.08; }
:lang(en) .wak-h1, :lang(en) .wak-h2 { letter-spacing: -.035em; }
.wak-lead, .wak-tm__text, .wak-card p, .wak-stats__label { color: var(--wak-muted); }
.wak-num { color: var(--wak-accent); }
.wak-stat { color: var(--wak-text); font-size: clamp(64px, 9vw, 148px); }

/* One brand word set edge to edge. Decorative: hidden from assistive tech in the markup. */
.wak-mega {
	margin: 0;
	color: var(--wak-text);
	font-size: clamp(84px, 22vw, 380px);
	font-weight: 900;
	line-height: 1.15;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

/* "THE WAKALAH" is longer than the Arabic word: smaller so it spans, not overflows, the width. */
:lang(en) .wak-mega { font-size: clamp(56px, 14.6vw, 250px); letter-spacing: -.05em; line-height: .9; text-transform: uppercase; }

/* Hero: a full screen with the dot field behind, the brand word along the bottom. */
.wak-hero {
	display: flex;
	flex-direction: column;
	min-block-size: calc(100svh - var(--wak-header-h));
	padding-block: clamp(40px, 6vw, 96px) 0;
	overflow: clip;
}

.wak-hero__art { display: none; }

.wak-hero > .wak-hero__field {
	position: absolute;
	inset: 0;
	z-index: 0;
	inline-size: 100%;
	block-size: 100%;
	-webkit-mask-image: radial-gradient(120% 90% at 50% 30%, var(--wak-text) 40%, transparent 100%);
	mask-image: radial-gradient(120% 90% at 50% 30%, var(--wak-text) 40%, transparent 100%);
}

.wak-hero__grid { align-items: end; }

.wak-hero__mega {
	margin-block-start: auto;
	margin-inline: calc(var(--wak-frame) * -.3);
	padding-block-start: clamp(24px, 4vw, 56px);
	opacity: .96;
}

.wak-hero__media {
	margin-block-start: 0;
	margin-inline: calc(var(--wak-frame) * -1);
	aspect-ratio: 16 / 8;
	border-radius: 0;
	background: var(--wak-white);
}

/* Inner pages open with a shorter hero and no brand word, so their content stays in view. */
body:not(.home) .wak-hero { min-block-size: 0; padding-block-end: clamp(32px, 5vw, 64px); }
body:not(.home) .wak-hero__mega { display: none; }

@media (max-width: 760px) {
	.home .wak-hero { min-block-size: calc(92svh - var(--wak-header-h)); }
	.wak-hero__media { aspect-ratio: 4 / 3; }
}

/* Split headings: each word sits in its own mask. */
[data-split] .wak-w {
	display: inline-block;
	overflow: clip;
	padding-block: .06em .14em;
	margin-block: -.06em -.14em;
	vertical-align: top;
}

[data-split] .wak-w > span { display: inline-block; will-change: transform; }

/* Until fx.js has split them, animated headings stay hidden; if it never runs they show after 3 s. */
.wak-fx:not(.wak-fx-ready) [data-split] { visibility: hidden; animation: wak-fx-show 0s 3s forwards; }
@keyframes wak-fx-show { to { visibility: visible; } }

.wak-sw > span { display: inline; }
[data-scrub] { color: var(--wak-text); font-size: clamp(22px, 2.6vw, 40px); font-weight: 600; line-height: 1.55; max-inline-size: 26em; }
:lang(en) [data-scrub] { letter-spacing: -.01em; line-height: 1.35; }

/* Stats sit in a wide band of hairlines. */
.wak-stats__list { border-color: var(--wak-line); }

/* Text and media: the statement gets the room. */
.wak-tm.has-media { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; }
.wak-tm__media { border-radius: clamp(16px, 2vw, 28px); }
@media (max-width: 760px) { .wak-tm.has-media { grid-template-columns: minmax(0, 1fr); } }

/* Cards: dark surfaces with a hairline, burgundy on hover. */
.wak-card {
	background: var(--wak-white);
	box-shadow: inset 0 0 0 1px var(--wak-line);
	color: var(--wak-text);
}

@media (hover: hover) {
	a.wak-card:hover { box-shadow: none; }
}

/* Services move sideways on wide screens (fx.js adds is-hscroll). */
.wak-services.is-hscroll {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(28px, 4vw, 56px);
	min-block-size: 100vh;
	overflow: clip;
}

.wak-services.is-hscroll .wak-services__list {
	display: flex;
	gap: 20px;
	inline-size: max-content;
	will-change: transform;
}

.wak-services.is-hscroll .wak-services__item { flex: 0 0 clamp(320px, 28vw, 420px); }
.wak-services.is-hscroll .wak-card { min-block-size: min(58vh, 520px); padding: clamp(28px, 2.6vw, 40px); }
.wak-services.is-hscroll .wak-card h3 { font-size: clamp(26px, 2.4vw, 36px); line-height: 1.25; }
.wak-services.is-hscroll .wak-num { font-size: 15px; }
.wak-services.is-hscroll .wak-grid-3 > .wak-services__item:last-child:nth-child(3n + 1) { grid-column: auto; }

/* Work: large frames, the title under them. */
.wak-work__media { border-radius: clamp(14px, 1.6vw, 22px); background: var(--wak-white); }
.wak-work__title { color: var(--wak-text); font-size: clamp(20px, 1.8vw, 26px); }
.wak-work__cat { color: var(--wak-muted); }
.wak-work__filter a { color: var(--wak-text); }

/* Clients: one calm, oversized line. */
.wak-logos__item { background: var(--wak-white); box-shadow: inset 0 0 0 1px var(--wak-line); }
.wak-logos__item img { filter: grayscale(1) brightness(1.6) contrast(.9); opacity: .8; transition: filter .4s var(--wak-ease), opacity .4s var(--wak-ease); }
.wak-logos__item:hover img { filter: none; opacity: 1; }

/* Departments: icons in rose rings. */
.wak-dept .wak-card__title { color: var(--wak-text); }

/* CTA: a glowing burgundy slab, heading at full width. */
.wak-cta {
	background: radial-gradient(120% 140% at 85% 0%, color-mix(in srgb, var(--wak-accent) 35%, var(--wak-burgundy)) 0%, var(--wak-burgundy) 45%, color-mix(in srgb, var(--wak-burgundy) 55%, var(--wak-bg)) 100%);
	padding-block: clamp(80px, 12vw, 180px);
}

.wak-cta__heading { max-inline-size: 14em; font-size: clamp(44px, 7.6vw, 128px); }

/* Footer brand word fills the last row. */
.wak-footer__mega {
	margin-block: clamp(32px, 5vw, 64px) calc(clamp(84px, 22vw, 380px) * -.32);
	margin-inline: calc(var(--wak-frame) * -.3);
	color: color-mix(in srgb, var(--wak-cream) 14%, transparent);
}

:lang(en) .wak-footer__mega { margin-block-end: calc(clamp(84px, 22vw, 380px) * -.16); }
.wak-footer::before { display: none; }

/* Cursor follower (fine pointers only; fx.js adds it). */
.wak-cursor {
	position: fixed;
	/* Physical top-left in both directions: fx.js moves it by pointer coordinates, which are physical. */
	inset: 0 auto auto 0;
	z-index: 400;
	display: grid;
	place-items: center;
	inline-size: 14px;
	block-size: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	background: var(--wak-cream);
	color: var(--wak-bg);
	font-size: 13px;
	font-weight: 700;
	opacity: 0;
	pointer-events: none;
	mix-blend-mode: difference;
	transition: inline-size .45s var(--wak-ease), block-size .45s var(--wak-ease), margin .45s var(--wak-ease), opacity .3s, background-color .3s;
}

.wak-cursor.is-on { opacity: 1; }
.wak-cursor.is-link { inline-size: 56px; block-size: 56px; margin: -28px 0 0 -28px; }

.wak-cursor.is-label {
	inline-size: 96px;
	block-size: 96px;
	margin: -48px 0 0 -48px;
	background: var(--wak-accent);
	mix-blend-mode: normal;
}

.wak-cursor span { opacity: 0; transition: opacity .3s; }
.wak-cursor.is-label span { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
	.wak-fx-ready [data-cursor] { cursor: none; }
}

/* Lenis */
html.lenis, html.lenis body { block-size: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

@media (prefers-reduced-motion: reduce) {
	.wak-cursor, .wak-progress { display: none; }
}

/* Ghost buttons on the dark ground: cream outline, filled cream on hover. */
.wak-btn--ghost { --bg: var(--wak-cream); --fg: var(--wak-bg); }