/* MOE × AI mask, drawn by ai-hero.js. Scroll drives it through the vars app-v2.js already sets:
   --hero-reveal draws the lines, --hero-travel brings in the depth wings, --hero-ignite lights the eyes. */
.ai-hero-visual{mix-blend-mode:normal}
.ai-hero-visual .ah{position:absolute;inset:0;width:100%;height:100%;overflow:visible;--draw:calc(100 - var(--hero-reveal)*100)}
.ah path{fill:none;stroke-linejoin:round;stroke-linecap:round}
.ah [pathLength]{stroke-dasharray:100 100;stroke-dashoffset:var(--draw)}
.ah .ah-wing{stroke:#8052ff;stroke-width:3;opacity:calc(var(--hero-travel)*.32)}
.ah .ah-eye{fill:#fff;stroke:none;opacity:var(--hero-ignite);filter:drop-shadow(0 0 4px #e6dcff) drop-shadow(0 0 22px #8052ff);transform-box:fill-box;transform-origin:center}
.identity.is-ai .ah .ah-eye{animation:ah-blink 5.5s 1.4s infinite}
@keyframes ah-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes ah-run{to{stroke-dashoffset:-100}}

/* graph: the workflow. Four corner powers charge in order (--hero-power), then MOE at the core takes the hit. */
.identity{--hero-power:0}
.ah-graph .ah-wire{stroke:#7a5cff;stroke-width:4;opacity:.75}
.ah-graph .ah-feed{--on:clamp(0,calc(var(--hero-power)*4 - var(--i)),1);stroke:#f4efff;stroke-width:7;stroke-dasharray:100 100;stroke-dashoffset:calc(100 - var(--on)*100);filter:drop-shadow(0 0 8px #8052ff)}
.ah-graph .ah-pulse{stroke:#efe9ff;stroke-width:6;stroke-dasharray:5 95;opacity:var(--hero-ignite);filter:drop-shadow(0 0 10px #8052ff);animation:ah-run 2.8s linear infinite}
.ah-graph .ah-pulse-r{animation-direction:reverse;animation-delay:-1.4s}
.identity.is-powered .ah-graph .ah-pulse{animation-duration:1.2s}
.ah-graph .ah-port{fill:#0b0912;stroke:#b9a6ff;stroke-width:3;opacity:clamp(0,calc(var(--hero-reveal)*2.2 - 1.2),1)}
.ah .ah-eye{translate:var(--gaze-x,0) var(--gaze-y,0)}
.ah-graph .ah-wave{fill:none;stroke:#cdbfff;stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center}
.identity.is-powered .ah-graph .ah-wave{animation:ah-wave 1.1s cubic-bezier(.16,1,.3,1) both}
@keyframes ah-wave{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(6)}}

/* The corner words are HTML so they stay crisp and speak both languages. */
.ah-chips{position:absolute;inset:0;pointer-events:none}
.ah-chip{--on:clamp(0,calc(var(--hero-power)*4 - var(--i)),1);position:absolute;left:var(--x);top:var(--y);translate:calc(-50% + var(--dx)*62%) calc(-50% + var(--dy)*52%);display:grid;justify-items:center;gap:4px;min-width:118px;padding:9px 14px 10px;border:1px solid color-mix(in srgb,#8052ff calc(45% + var(--on)*55%),transparent);border-radius:12px;
 background:color-mix(in srgb,#5a36d6 calc(var(--on)*100%),#0b0912);color:#ece7f7;white-space:nowrap;text-align:center;
 opacity:calc(clamp(0,calc(var(--hero-reveal)*2.2 - 1.2),1)*(.55 + var(--on)*.45));scale:calc(.94 + var(--on)*.06);box-shadow:0 10px 30px -12px color-mix(in srgb,#8052ff calc(var(--on)*100%),transparent)}
.ah-chip b{font:700 12px/1 Inter,sans-serif;letter-spacing:.2em}
.ah-chip small{font:500 10.5px/1.2 Inter,sans-serif;letter-spacing:.02em;color:color-mix(in srgb,#fff calc(var(--on)*100%),#b9a6ff)}
.ah-chip.ah-core small{display:none}
.ah-chip.ah-core{--on:0;min-width:0;padding:8px 16px 9px;border-color:#b9a6ff;background:#8052ff;opacity:clamp(0,calc(var(--hero-reveal)*2.2 - 1.2),1);scale:1}
.identity.is-powered .ah-chip.ah-core{scale:1.08;box-shadow:0 0 0 1px #d9ccff,0 14px 40px -10px #8052ff;transition:scale .5s cubic-bezier(.34,1.56,.64,1)}
html[lang=ar] .ah-chip b{font:700 15px/1.1 Alexandria,sans-serif;letter-spacing:0}
html[lang=ar] .ah-chip small{font:400 11px/1.4 Alexandria,sans-serif;letter-spacing:0}
html[lang=ar] .ah-chip.ah-core b{font:700 12px/1 Inter,sans-serif;letter-spacing:.2em}

/* visor: matte band, violet rim, a scanline across the face */
.ah-visor .ah-rim{stroke:#8052ff;stroke-width:70}
.ah-visor .ah-band{stroke-width:62}
.ah-visor .ah-edge{stroke:#cbbcff;stroke-width:2;opacity:calc(var(--hero-reveal)*.28)}
.ah-visor .ah-scan{opacity:var(--hero-ignite)}
.identity.is-ai .ah-visor .ah-scan{animation:ah-scan 4.2s cubic-bezier(.65,0,.35,1) .3s infinite}
@keyframes ah-scan{0%{transform:translateX(0)}55%,100%{transform:translateX(1932px)}}

/* lens: clear glass band, iris eyes */
.ah-lens .ah-band{stroke-width:62}
.ah-lens .ah-edge{stroke:#fff;stroke-width:2;opacity:calc(var(--hero-reveal)*.5)}
.ah-lens .ah-shine{stroke:#fff;stroke-width:7;stroke-dasharray:7 93;opacity:var(--hero-ignite);filter:drop-shadow(0 0 12px #fff);animation:ah-run 4.5s linear infinite}
.ah-lens .ah-iris{opacity:var(--hero-reveal)}
.ah-lens .ah-iris-ring{fill:none;stroke:#8052ff;stroke-width:3}
.ah-lens .ah-iris-tick{fill:none;stroke:#b9a6ff;stroke-width:2;stroke-dasharray:2 9;opacity:.6}
.ah-lens .ah-aperture{fill:#fff;filter:drop-shadow(0 0 6px #e6dcff) drop-shadow(0 0 24px #8052ff);transform:rotate(calc(var(--hero-ignite)*60deg)) scale(calc(.18 + var(--hero-ignite)*.82));opacity:calc(.35 + var(--hero-ignite)*.65)}
.identity.is-ai .ah-lens .ah-iris-tick{animation:ah-spin 14s linear infinite}
@keyframes ah-spin{to{transform:rotate(360deg)}}

@media(max-width:640px){.ah-chip{min-width:0;padding:6px 9px 7px;border-radius:9px;translate:calc(-50% + var(--dx)*8%) calc(-50% + var(--dy)*110%)}.ah-chip small{display:none}.ah-chip b{font-size:9.5px;letter-spacing:.14em}html[lang=ar] .ah-chip b{font-size:12px}.ah-graph .ah-port{stroke-width:5}}
@media(prefers-reduced-motion:reduce){.ah *{animation:none!important}}

/* The tool line under the AI chapter: the one craft line kept on purpose, it says what we actually run. */
.identity-scene .chapters .chapter-ai .chapter-craft{display:block!important;position:static!important;max-width:none!important;overflow:visible!important;white-space:normal!important;margin:18px auto 0!important;font:600 10px/1.6 Inter,sans-serif!important;letter-spacing:.18em!important;color:#b9a6ff!important;opacity:1!important;transform:none!important;clip-path:none!important;text-align:center}
html[lang=ar] .identity-scene .chapters .chapter-ai .chapter-craft{font:500 12px/1.7 Alexandria,sans-serif!important;letter-spacing:0!important}
@media(max-width:640px){.identity-scene .chapters .chapter-ai .chapter-craft{font-size:9px!important;margin-top:12px!important}}