/* visuals.css - the animated illustrations (ADR-0047). Conceptual scenes, not live activity.
   Colours follow the site: deep navy, cyan signal, violet depth, gold for human gates, green for checks. */
:root{--viz-line:#5f86b8;--viz-cyan:#7fe0ff;--viz-violet:#9fa4ff;--viz-gold:#f6d77a;--viz-green:#7be5be;--viz-red:#ff8f8f}
svg.viz{display:block;width:100%;height:auto;overflow:visible;--viz-accent:var(--accent,var(--dossier,var(--layer,var(--viz-cyan))))}
.viz .viz-line{fill:none;stroke:var(--viz-line);stroke-width:1.2;opacity:.75}
.viz .viz-thin{stroke-width:.9;opacity:.55}
.viz .viz-nofill{fill:none}
.viz .viz-dash{stroke-dasharray:3 4}
.viz .viz-route{stroke:color-mix(in srgb,var(--viz-accent) 55%,#40608a);stroke-width:1.6;stroke-dasharray:5 5;animation:viz-flow 1.6s linear infinite}
.viz .viz-accent-line{stroke:var(--viz-accent);opacity:.9;stroke-width:1.5}
.viz .viz-bond{stroke:var(--viz-violet);stroke-width:1.6;opacity:.8}
.viz .viz-ecg{stroke:var(--viz-accent);stroke-width:1.8;opacity:1}
.viz .viz-sweep{fill:#060b16;opacity:.75}
.viz .viz-pulse{fill:var(--viz-accent);filter:drop-shadow(0 0 4px var(--viz-accent))}
.viz .viz-node{fill:#0d1a2e;stroke:color-mix(in srgb,var(--viz-accent) 70%,#6f8fc0);stroke-width:1.2}
.viz .viz-dot{fill:var(--viz-accent);opacity:.8}
.viz .viz-core{fill:color-mix(in srgb,var(--viz-accent) 28%,#0c1830);stroke:var(--viz-accent);stroke-width:1.4;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--viz-accent) 55%,transparent))}
.viz .viz-halo{fill:none;stroke:var(--viz-accent);stroke-width:.8;opacity:.5}
.viz .viz-atom{fill:var(--viz-accent);opacity:.9}
.viz .viz-atom-2{fill:var(--viz-violet);opacity:.85}
.viz .viz-box{fill:#0c172b;stroke:#4f74a6;stroke-width:1}
.viz .viz-agent{stroke:var(--viz-violet)}
.viz .viz-panel{fill:#0f1e36;stroke:#5a82b5;stroke-width:1;opacity:.95}
.viz .viz-result{stroke:var(--viz-green);fill:color-mix(in srgb,var(--viz-green) 12%,#0c172b)}
.viz .viz-removed{stroke:var(--viz-red);stroke-dasharray:3 3;fill:#1a1220}
.viz .viz-x{stroke:var(--viz-red);opacity:.9}
.viz .viz-gate{fill:color-mix(in srgb,var(--viz-gold) 22%,#111827);stroke:var(--viz-gold);stroke-width:1.3}
.viz .viz-gate-halo{fill:none;stroke:var(--viz-gold);stroke-width:1}
.viz .viz-check{fill:none;stroke:var(--viz-green);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.viz .viz-bar{fill:#2a4870;opacity:.9}
.viz .viz-bar-hi{fill:var(--viz-accent)}
.viz .viz-label-bar{fill:#3a5680;opacity:.55}
.viz .viz-pick{fill:none;stroke:var(--viz-accent);stroke-width:1.4;stroke-dasharray:4 3}
.viz .viz-highlight{fill:color-mix(in srgb,var(--viz-gold) 30%,transparent)}
.viz .viz-diff{fill:color-mix(in srgb,var(--viz-violet) 26%,transparent);stroke:var(--viz-violet);stroke-width:.8}
.viz .viz-sign{fill:var(--viz-violet);font:600 10px var(--display,sans-serif)}
.viz .viz-signal{fill:var(--viz-gold)}
.viz .viz-envelope{fill:color-mix(in srgb,var(--viz-accent) 35%,#0c172b);stroke:var(--viz-accent);stroke-width:1}
.viz .viz-chip{fill:color-mix(in srgb,var(--viz-violet) 40%,#0c172b);stroke:var(--viz-violet)}
.viz .viz-region{fill:color-mix(in srgb,var(--viz-accent) 30%,transparent);stroke:var(--viz-accent);stroke-width:1}
.viz .viz-plot{fill:color-mix(in srgb,var(--viz-green) 16%,#0c172b);stroke:#3f6a5c}
.viz .viz-floor{fill:#0f1e36;stroke:#6a8ec4}
.viz .viz-window{fill:var(--viz-gold)}
.viz .viz-ring-bg{fill:none;stroke:#23395a;stroke-width:4}
.viz .viz-ring{fill:none;stroke:var(--viz-accent);stroke-width:4;stroke-linecap:round}
@keyframes viz-flow{to{stroke-dashoffset:-20}}
body.paused .viz *,svg.viz.is-offscreen *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.viz *{animation:none!important}}

/* captions: every scene says it is a conceptual illustration */
.viz-caption{margin:8px 0 0;font-size:11px;letter-spacing:.6px;color:#7d98bb;display:flex;align-items:center;gap:7px}
.viz-caption:before{content:'';width:6px;height:6px;border-radius:50%;border:1px solid #7d98bb;flex-shrink:0}

/* glyphs drawn as SVG */
svg.glyph{width:1em;height:1em;display:inline-block;vertical-align:-.14em;flex-shrink:0;overflow:visible}
svg.vertical-mark{width:1em;height:1em;display:inline-block;vertical-align:-.12em}

/* guided sequence: inputs, coordinated work, checks, result */
.viz-guide{display:grid;grid-template-columns:1.05fr 1fr;gap:26px;align-items:center;margin:26px 0;padding:22px;border:1px solid #4e75a645;border-radius:14px;background:radial-gradient(ellipse at 20% 0%,#16335a55,transparent 60%),linear-gradient(140deg,#0d1a2fcc,#081120ee)}
.viz-guide-scene{min-width:0}
.viz-guide-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.viz-guide-head h3{font-size:19px}
.viz-play{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#a9dbf4;border:1px solid #4f78a888;border-radius:999px;padding:7px 13px;min-height:36px}
.viz-play:hover{border-color:#8fdcff}
.viz-play-icon{width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.viz-play[aria-pressed="true"] .viz-play-icon{width:8px;height:10px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor}
.viz-guide ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.viz-guide li button{width:100%;text-align:left;display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border:1px solid #3d5b8640;border-radius:9px;background:#0a1424aa;transition:border-color .25s,background .25s;min-height:44px}
.viz-guide li button:hover{border-color:#6f9fd0}
.viz-guide li button>b{font:500 12px var(--display);color:#6f93bd;padding-top:2px}
.viz-guide li button strong{display:block;font:500 14px var(--display);color:#d9e8fa}
.viz-guide li button small{display:block;font-size:13px;line-height:1.55;color:#8ea7c6;margin-top:3px}
.viz-guide li button[aria-pressed="true"]{border-color:var(--accent,var(--dossier,#7fe0ff));background:color-mix(in srgb,var(--accent,var(--dossier,#7fe0ff)) 10%,#0a1424)}
.viz-guide li button[aria-pressed="true"]>b{color:var(--accent,var(--dossier,#7fe0ff))}
.viz-guide .viz-step{transition:opacity .45s}
.viz-guide:not([data-active-step="0"]) .viz-step{opacity:.22}
.viz-guide[data-active-step="1"] .viz-step[data-step="1"],.viz-guide[data-active-step="2"] .viz-step[data-step="1"],.viz-guide[data-active-step="2"] .viz-step[data-step="2"],
.viz-guide[data-active-step="3"] .viz-step:is([data-step="1"],[data-step="2"],[data-step="3"]),.viz-guide[data-active-step="4"] .viz-step{opacity:1}
.viz-guide[data-active-step="1"] .viz-step[data-step="1"],.viz-guide[data-active-step="2"] .viz-step[data-step="2"],.viz-guide[data-active-step="3"] .viz-step[data-step="3"],.viz-guide[data-active-step="4"] .viz-step[data-step="4"]{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent,#7fe0ff) 60%,transparent))}

/* vertical sheets and dossiers */
.detail-scene{margin:20px 0 6px}
.dossier-hero .dossier-scene{width:220px;flex-shrink:0;margin-left:auto}
.dossier-hero .dossier-scene svg.viz{--viz-accent:var(--dossier)}

/* upcoming vertical cards */
.roadmap-card .roadmap-scene{display:block;margin:12px -6px 8px;height:112px;border-radius:8px;background:radial-gradient(ellipse at 50% 120%,color-mix(in srgb,var(--accent,#7fe0ff) 12%,transparent),transparent 70%);opacity:.85;transition:opacity .3s}
.roadmap-card .roadmap-scene svg.viz{height:112px;width:100%}
.roadmap-card:hover .roadmap-scene,.roadmap-card:focus-visible .roadmap-scene{opacity:1}

/* layer inspector */
.layer-viz.has-scene{display:block;height:auto;min-height:0;padding:10px 6px 0;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--layer) 12%,transparent),transparent 70%)}
.layer-viz.has-scene>:not(svg):not(.viz-caption){display:none}
.layer-viz.has-scene svg.viz{max-height:190px;--viz-accent:var(--layer)}

/* explore cards */
.knowledge-grid .topic-scene{display:block;height:100px;margin:-6px -6px 12px;opacity:.9;transition:opacity .3s}
.knowledge-grid .topic-scene svg{height:100px;width:auto;max-width:100%}
.knowledge-grid button:hover .topic-scene{opacity:1}

/* hero links: LILI -> core -> selected vertical */
.viz-hero-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.viz-hero-links .hero-link{fill:none;stroke:#9eeaff;stroke-width:2;stroke-dasharray:5 6;opacity:.95;animation:viz-flow 1.2s linear infinite;filter:drop-shadow(0 0 5px #4fd2ff)}
.viz-hero-links .hero-link-out{stroke:var(--link);stroke-width:2.4;filter:drop-shadow(0 0 6px var(--link))}
.viz-hero-links .hero-packet{fill:#e6fbff;filter:drop-shadow(0 0 6px #7fe0ff)}
.viz-hero-links .hero-packet-out{fill:var(--link);filter:drop-shadow(0 0 7px var(--link))}
.viz-hero-links .hero-arrive{fill:none;stroke:var(--link);stroke-width:1.2}
.viz-hero-note{position:absolute;top:22px;right:1%;font-size:10px;letter-spacing:.6px;color:#5f84ab;z-index:2;pointer-events:none}
@media (max-width:700px){.viz-guide{grid-template-columns:1fr;padding:16px;gap:16px}.dossier-hero .dossier-scene{width:100%;margin:12px 0 0}.viz-hero-note{top:16px;font-size:7px;right:4%}.viz-play{font-size:12px;padding:6px 11px;white-space:nowrap}.viz-guide-head h3{font-size:17px}.roadmap-card .roadmap-scene{height:96px}.roadmap-card .roadmap-scene svg.viz{height:96px}}
@media (prefers-reduced-motion:reduce){.viz-hero-links .hero-link{stroke-dasharray:none}}

/* touch targets (audit DSP-01, 2026-11-05): text links and footer topics were 17-29 px tall on phones */
@media (max-width:700px),(pointer:coarse){
  .text-link,#footer-nav button,.vertical-copy>.btn,.scene-tabs button,.preview-actions button,.lab-top button,.eco-toolbar button,.cyber-tabs button,.dossier-nav button,.always-on button{min-height:44px}
  #footer-nav button{padding-inline:6px}
  .text-link{align-items:center}
}
@media (max-width:700px){.header-actions .btn.compact{white-space:nowrap}}

/* NEO AI logo (2026-11-05, supplied by the Founder): the icon tile beside every "NEO AI" wordmark */
.neo-reference-logo i{width:34px;height:34px;border-radius:8px;background:url(/assets/brand/neo-ai-icon.svg) center/contain no-repeat;box-shadow:0 0 18px #4d7bff55;animation:none}
.core-label>b,.eco-brain h3{display:inline-flex!important;align-items:center;justify-content:center;gap:.28em}
.core-label>b:before,.eco-brain h3:before{content:"";flex-shrink:0;width:.95em;height:.95em;border-radius:.22em;background:url(/assets/brand/neo-ai-icon.svg) center/contain no-repeat;box-shadow:0 0 22px #4d7bff66}
.core-label>b{width:100%}
@media (max-width:700px){.neo-reference-logo i{width:28px;height:28px;border-radius:7px}}