/* /ai-system: the page frame around the map and the scenes (scripts/aisystem/build.mjs). The hero's orbit, the line that
   leads from the map into the scenes, the brand sheet's points. Tokens only (css/site.css). */

/* ---------- hero: the orbit beside the copy ---------- */
.ais-hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:center}
.ais-hero .cfacts{display:grid;grid-template-columns:repeat(2,max-content);gap:14px 44px}
@media (max-width:900px){.ais-hero .cfacts{display:flex}}
.ais-orbit{
  --c-cli:color-mix(in srgb,var(--blue) 52%,var(--paper));--c-pro:color-mix(in srgb,var(--terra) 72%,var(--paper));
  --c-grow:color-mix(in srgb,var(--sun) 80%,var(--paper));--c-com:var(--lime);--c-data:var(--ink);--c-team:var(--sun);
  width:100%;max-width:520px;margin-left:auto;aspect-ratio:1;position:relative
}
.ais-orbit [data-cl="cli"]{--c:var(--c-cli)}.ais-orbit [data-cl="pro"]{--c:var(--c-pro)}.ais-orbit [data-cl="grow"]{--c:var(--c-grow)}
.ais-orbit [data-cl="com"]{--c:var(--c-com)}.ais-orbit [data-cl="data"]{--c:var(--c-data)}.ais-orbit [data-cl="team"]{--c:var(--c-team)}
.ao{width:100%;height:100%;display:block;overflow:visible}
.ao-r{fill:none;stroke:color-mix(in srgb,var(--ink) 16%,transparent);stroke-width:1.5;stroke-dasharray:2 7}
.ao-l{fill:none;stroke:color-mix(in srgb,var(--c) 55%,transparent);stroke-width:1.2}
.ao-d{fill:var(--c);stroke:var(--ground);stroke-width:4}
.ao-a{fill:var(--sun);stroke:var(--ground);stroke-width:1.5}
.ao-sr{fill:none;stroke:color-mix(in srgb,var(--terra) 55%,transparent);stroke-width:1.5;stroke-dasharray:3 6}
.ao-s{fill:var(--terra)}
.ao-glow{fill:color-mix(in srgb,var(--blue) 14%,transparent)}
.ao-c{fill:var(--blue)}
.ao-i{fill:none;stroke:var(--paper);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ao-spin,.ao-orb{transform-origin:260px 260px;transform-box:view-box}
.ao-spin{animation:aospin 120s linear infinite}
.ao-orb{animation:aospin 26s linear infinite reverse}
@keyframes aospin{to{rotate:360deg}}
.ao-glow{animation:aopulse 4.5s ease-in-out infinite;transform-origin:260px 260px;transform-box:view-box}
@keyframes aopulse{50%{scale:1.12;opacity:.6}}
html.stilled .ao *,.ais-orbit:not(.in) .ao *{animation-play-state:paused}

/* ---------- from the map into the scenes ---------- */
.eco .ais-next{margin:clamp(48px,7vh,80px) 0 0;max-width:62ch;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--chalk)}
.eco .ais-next::before{content:"";display:inline-block;width:10px;height:10px;margin-right:10px;background:var(--sun);-webkit-mask:var(--panot) center/contain no-repeat;mask:var(--panot) center/contain no-repeat}

/* ---------- the brand sheet ---------- */
.ais-brand .head{margin-bottom:clamp(28px,4vh,44px)}
.ais-points{list-style:none;margin:0 0 clamp(32px,5vh,48px);padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:p}
.ais-points li{counter-increment:p;display:flex;flex-direction:column;gap:10px;padding:22px 22px 24px;border-radius:24px;background:color-mix(in srgb,var(--paper) 10%,transparent);border:1px solid color-mix(in srgb,var(--paper) 26%,transparent)}
.ais-points li::before{content:counter(p,decimal-leading-zero);font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--chalk)}
.ais-points b{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.6vw,22px);line-height:1.2;letter-spacing:-.015em;color:var(--paper)}
html[lang="uk"] .ais-points b,html[lang="ru"] .ais-points b{font-family:var(--display-cyr)}
.ais-points span{font-size:15px;line-height:1.5;color:var(--paper)}

/* ---------- the cases page's teaser: the system has its own page ---------- */
.ais-teaser .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,64px);align-items:center}
.ais-teaser .lead{max-width:52ch;margin-top:22px}
.ais-teaser .btns{margin-top:28px}
.ais-teaser .ais-orbit{max-width:440px;display:block}
.dark .ais-orbit{--c-data:var(--chalk)}
.dark .ao-r{stroke:color-mix(in srgb,var(--chalk) 22%,transparent)}
.dark .ao-d,.dark .ao-a{stroke:var(--dark)}
.dark .ao-glow{fill:color-mix(in srgb,var(--blue) 30%,transparent)}

@media (max-width:1100px){.ais-points{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .ais-hero .wrap,.ais-teaser .wrap{grid-template-columns:1fr}
  .ais-orbit{max-width:380px;margin:8px auto 0}
}
@media (max-width:640px){.ais-points{grid-template-columns:1fr}.ais-orbit{max-width:300px}}
.ais-hero .cpause svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.ais-hero .cpause .ig{fill:currentColor;stroke:none}
@media (prefers-reduced-motion:reduce){.ao *{animation:none!important}}