/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Foyl Learn — Interior FX layer (tools, labs, scenarios, concepts, interview, reports). Companion to learn-fx-app.js. Deliberately lighter than the landing-page layer: no three.js, no orbs. Tools must stay snappy and readable — the motion here is dashboard choreography, not spectacle. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ── Brand signal line under the tool topbar ── A slow gradient sweep that ties every mock tool back to the foyl brand without touching the UI. */ #topbar::after{ content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px; pointer-events:none;opacity:.55; background:linear-gradient(90deg, transparent 0%, rgba(0,212,255,.0) 20%, rgba(0,212,255,.55) 35%, rgba(0,174,239,.45) 45%, rgba(0,137,123,.4) 55%, rgba(0,212,255,.0) 80%, transparent 100%); background-size:220% 100%; animation:fxa-sweep 9s linear infinite; } @keyframes fxa-sweep{ from{background-position:220% 0} to{background-position:-120% 0} } /* ── Platform nav inside tool topbars ── Tools keep their own #topbar (tool functionality lives there), but the brand block and platform links are shared. Scoped under #topbar so tool sidebars (