/* Header v2 (home page only, loaded after motion.css).
   Desktop: brand / centred nav capsule / actions spread across the full width.
   On scroll the bar lifts into a floating glass dock; height never changes, so nothing below jumps. */

header{background:transparent!important;border-color:transparent!important;padding-inline:clamp(28px,4.2vw,80px)}
header::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:#000;border:1px solid transparent;border-radius:0;
 transition:inset var(--dur-3) var(--ease-out),background-color var(--dur-3) var(--ease-out),border-color var(--dur-3) var(--ease-out),border-radius var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out)}
header.is-scrolled::before{inset:10px clamp(12px,1.6vw,28px);background:rgba(13,11,18,.74);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
 border-color:rgba(255,255,255,.08);border-radius:22px;box-shadow:0 24px 60px -28px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)}
header:has(#menu[aria-expanded=true])::before{inset:0;border-radius:0;background:#000;border-color:transparent;box-shadow:none}

/* Reading progress: brand gradient, tucked inside the dock once it floats. */
.header-progress{left:0;right:0;width:auto;height:2px;bottom:-1px;background:linear-gradient(90deg,#ff2bd6,#ff9971 45%,#8052ff);opacity:.85;
 transition:left var(--dur-3) var(--ease-out),right var(--dur-3) var(--ease-out),bottom var(--dur-3) var(--ease-out),opacity var(--dur-2) var(--ease-out)}
html[dir="rtl"] .header-progress{transform-origin:right;background:linear-gradient(270deg,#ff2bd6,#ff9971 45%,#8052ff)}
/* Once docked, the line hugs the dock's bottom edge from one rounded corner round to the other. */
header.is-scrolled .header-progress{left:clamp(12px,1.6vw,28px);right:clamp(12px,1.6vw,28px);bottom:10px;height:22px;box-sizing:border-box;padding:0 2px 2px;border-radius:0 0 22px 22px;transform:none;
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
 clip-path:inset(0 calc((1 - var(--reading,0)) * 100%) 0 0)}
html[dir="rtl"] header.is-scrolled .header-progress{clip-path:inset(0 0 0 calc((1 - var(--reading,0)) * 100%))}
header:has(#menu[aria-expanded=true]) .header-progress{opacity:0}

/* Brand: the mark sweeps through the loader gradient on hover. */
header .brand{gap:14px;font-weight:500;letter-spacing:.01em}
header .brand .mark{background:linear-gradient(115deg,#8052ff 0 40%,#ff2bd6 55%,#ff9971 70%,#6d55ff 85%);background-size:280% 100%;background-position:0 0;transition:background-position var(--dur-4) var(--ease-out)}
header .brand:is(:hover,:focus-visible) .mark{background-position:100% 0}
html[dir="rtl"] header .brand{margin-left:0}

@media(min-width:821px){
 header{display:flex;justify-content:flex-start}
 /* Centred capsule: true centre of the page, matching the centred content column below. */
 header nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:auto;margin:0!important;gap:2px;padding:5px;
  border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.025);transition:border-color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}
 header.is-scrolled nav{border-color:rgba(255,255,255,.06);background:rgba(255,255,255,.035)}
 header nav a{position:relative;z-index:1;height:36px;line-height:36px;padding-inline:17px;border-radius:999px;letter-spacing:.06em}
 header nav a:is(:focus-visible,:has(:focus-visible)){outline-offset:-2px}
 /* The marker becomes a soft pill that glides behind the hovered or current item. */
 .nav-marker{top:5px;bottom:5px;height:auto;z-index:0;border-radius:999px;background:linear-gradient(180deg,rgba(128,82,255,.26),rgba(128,82,255,.14));box-shadow:inset 0 0 0 1px rgba(169,139,255,.32),0 6px 22px -8px rgba(128,82,255,.7)}

 /* Actions: language and motion as quiet utilities, the CTA anchors the far edge. */
 header .language-toggle{order:1;margin-inline-start:auto}
 header #ambient-toggle{order:2;padding-inline:10px 16px;border-inline-end:1px solid #2a2531;border-radius:0;min-height:30px}
 html[dir="rtl"] header #ambient-toggle{padding-inline:10px 16px}
 header .header-cta{order:3;padding-block:6px;padding-inline:20px 6px;background:rgba(128,82,255,.08)}
 header .header-cta .cta-arrow{background:linear-gradient(135deg,#8052ff,#a06bff)}
}
@media(min-width:821px) and (max-width:1200px){
 header nav a{padding-inline:13px}
}
@media(min-width:821px) and (max-width:1060px){
 header .header-cta{padding:6px;gap:0!important}
 header .header-cta>span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 header #ambient-toggle{padding-inline:6px 12px}
}

@media(max-width:820px){
 header.is-scrolled::before{inset:8px 10px;border-radius:18px}
 header.is-scrolled .header-progress{left:10px;right:10px;bottom:8px;height:18px;border-radius:0 0 18px 18px}
 #menu{padding-inline:16px;border:1px solid #33303a;border-radius:999px;min-height:40px;font-size:12px;letter-spacing:.04em;transition:border-color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}
 #menu[aria-expanded=true]{border-color:#a485e8;background:#171020}
}

@media(prefers-reduced-motion:reduce){
 header::before,.header-progress,header .brand .mark{transition:none}
}