/* section_about_ziv — four capability cubes around a "Translation" centre (2026-10-05).
   Words: keywords.json in this folder (same format as the prototype hand-off; "notes" fields are ignored).
   Prototype: prototype/about_ziv/capabilities/cubes.html. Previous version: *.bak_2026-10-05_precubes. */
.about{padding:9vh clamp(18px,5vw,80px) 7vh}
#section_about_ziv{
  --H:#d94c8f;--A:#7a55e8;--E:#4a68f5;--L:#16a37b;
  --card:color-mix(in srgb,var(--bg,#f6f2ea) 45%,#fff);
  --line:color-mix(in srgb,var(--ink,#17161d) 14%,transparent);
  --muted:color-mix(in srgb,var(--ink,#17161d) 62%,transparent)}
[data-theme="dark"] #section_about_ziv{--H:#ef6aa8;--A:#9d80ff;--E:#7189ff;--L:#2cc495;--card:color-mix(in srgb,var(--bg,#121019) 86%,#fff)}
.az-wrap{max-width:1180px;margin:0 auto}
.az-kick{margin:0 0 14px;font:600 12px/1 var(--f-head);letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.az-big{margin:0 0 clamp(8px,1.5vw,20px);max-width:none;text-wrap:balance;font:700 clamp(32px,4.6vw,64px)/1.04 var(--f-head);letter-spacing:-.035em}
.az-big em{font-style:normal;background:linear-gradient(90deg,var(--H),var(--A) 35%,var(--E) 65%,var(--L));-webkit-background-clip:text;background-clip:text;color:transparent}
.az-lede{margin:18px 0 clamp(20px,3vw,36px);max-width:60ch;font-size:clamp(16px,1.4vw,18px);color:var(--muted)}
.az-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.az-end{margin:clamp(40px,6vw,70px) 0 0;font:500 clamp(18px,1.8vw,22px)/1.4 var(--f-head);opacity:.85}
.az-end a{color:inherit;text-decoration-thickness:2px;text-underline-offset:4px}


/* ---------- stage ---------- */
.az-stage{position:relative;margin:0 auto;user-select:none;-webkit-user-select:none;overflow-x:clip}
.az-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.az-links path{fill:none;stroke:var(--ink);stroke-opacity:.07;stroke-width:1;transition:stroke-opacity .4s,stroke .4s,stroke-width .4s}
.az-links path.on{stroke:var(--c);stroke-opacity:.9;stroke-width:2.2;animation:azDraw .7s cubic-bezier(.3,.7,.2,1) both}
@keyframes azDraw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}

/* ---------- cubes ---------- */
.az-cube{position:absolute;width:var(--s);height:var(--s);padding:0;border:0;background:none;cursor:pointer;perspective:900px;z-index:3;outline:none;
  --s:150px;transition:opacity .4s,transform .9s cubic-bezier(.2,.85,.2,1)}
.az-cube .halo{position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 55%,transparent),transparent);
  opacity:0;transform:scale(.6);transition:opacity .5s,transform .6s}
.az-cube .shadow{position:absolute;left:8%;right:-8%;bottom:-22%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.32),transparent);
  transition:transform .6s,opacity .6s}
[data-theme="dark"] .az-cube .shadow{background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent)}
.az-cube .float{position:absolute;inset:0;transform-style:preserve-3d;animation:azBob 6s ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes azBob{50%{transform:translateY(-7px)}}
.az-cube .box{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-21deg) rotateY(-27deg);transition:transform .7s cubic-bezier(.2,.9,.25,1)}
.az-cube .f{position:absolute;inset:0;backface-visibility:hidden;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.az-cube .fr{transform:translateZ(calc(var(--s) / 2));display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--s) * .1);text-align:left;color:#fff;
  background:linear-gradient(155deg,color-mix(in srgb,var(--c) 78%,#fff),var(--c) 55%,color-mix(in srgb,var(--c) 82%,#000))}
.az-cube .fr b{font:700 calc(var(--s) * .135)/1.05 var(--f-head);letter-spacing:-.02em;text-shadow:0 1px 8px rgba(0,0,0,.18)}
.az-cube .fr small{display:block;margin-bottom:auto;font:600 calc(var(--s) * .07)/1 var(--f-head);letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.az-cube .ri{transform:rotateY(90deg) translateZ(calc(var(--s) / 2));display:grid;place-items:center;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 72%,#000),color-mix(in srgb,var(--c) 55%,#000))}
.az-cube .ri svg{width:46%;height:46%;fill:none;stroke:rgba(255,255,255,.85);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.az-cube .tp{transform:rotateX(90deg) translateZ(calc(var(--s) / 2));background:linear-gradient(45deg,color-mix(in srgb,var(--c) 55%,#fff),color-mix(in srgb,var(--c) 30%,#fff))}
.az-cube .lf,.az-cube .bk,.az-cube .bt{background:var(--c)}
.az-cube .lf{transform:rotateY(-90deg) translateZ(calc(var(--s) / 2))}
.az-cube .bk{transform:rotateY(180deg) translateZ(calc(var(--s) / 2))}
.az-cube .bt{transform:rotateX(-90deg) translateZ(calc(var(--s) / 2))}
/* lit */
.az-cube.on .box,.az-cube:focus-visible .box{transform:translateZ(30px) rotateX(-16deg) rotateY(-14deg)}
.az-cube.on .halo{opacity:1;transform:scale(1)}
.az-cube.on .shadow{transform:scale(.8);opacity:.6}
.az-stage.lit .az-cube:not(.on){opacity:.45}
/* entrance */
.az-stage:not(.in) .az-cube{opacity:0;transform:translateY(-120px)}
.az-stage.in .az-cube{transition-delay:var(--dl0,0s)}

/* ---------- keyword rectangles ---------- */
.az-kw{position:absolute;left:0;top:0;z-index:2;display:flex;align-items:center;gap:7px;padding:7px 11px 7px 9px;border-radius:6px;white-space:nowrap;cursor:default;
  font:500 13.5px/1.1 var(--f-body);background:var(--card);box-shadow:inset 0 0 0 1px var(--line),0 6px 16px -12px rgba(0,0,0,.35);
  transition:opacity .35s,background .35s,box-shadow .35s,color .35s,translate .35s cubic-bezier(.2,.9,.25,1),scale .35s}
.az-kw .d{display:flex;gap:2px}
.az-kw .d i{width:6px;height:6px;border-radius:1.5px;background:var(--dc);opacity:.85}
.az-kw.on{background:color-mix(in srgb,var(--c) 15%,var(--card));color:var(--ink);scale:1.04;
  box-shadow:inset 0 0 0 1.5px var(--c),0 0 0 4px color-mix(in srgb,var(--c) 16%,transparent),0 12px 26px -12px var(--c)}
.az-kw.on.multi{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 18%,var(--card)),color-mix(in srgb,var(--c2) 18%,var(--card)))}
.az-stage.lit .az-kw:not(.on){opacity:.22}
.az-kw.me{scale:1.08;z-index:4}
.az-stage:not(.in) .az-kw{opacity:0;translate:var(--fx,0) var(--fy,0);scale:.4}
.az-stage.in .az-kw{transition-delay:var(--dl0,0s)}
.az-stage.ready .az-kw,.az-stage.ready .az-cube{transition-delay:0s}

/* ---------- the Translation core the cubes stand around ---------- */
.az-core{position:absolute;z-index:3;padding:0;border:0;background:none;cursor:pointer;outline:none;width:var(--p);height:var(--ph);transition:opacity .5s,transform .9s cubic-bezier(.2,.85,.2,1)}
.az-core .plate{position:absolute;left:50%;top:calc(var(--p) * .37);width:calc(var(--p) * .71);height:calc(var(--p) * .71);margin:calc(var(--p) * -.355) 0 0 calc(var(--p) * -.355);
  border-radius:16%;transform:rotateX(62deg) rotateZ(45deg);transform-style:preserve-3d;
  background:conic-gradient(from 225deg,var(--H),var(--A),var(--L),var(--E),var(--H));opacity:.85;
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 18px 40px -10px rgba(0,0,0,.35);transition:box-shadow .5s,opacity .5s}
.az-core .plate::after{content:'';position:absolute;inset:9%;border-radius:12%;background:var(--bg);opacity:.86}
.az-core .glow{position:absolute;inset:-35% -20%;border-radius:50%;opacity:0;transition:opacity .5s;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--A) 30%,transparent),color-mix(in srgb,var(--L) 14%,transparent) 55%,transparent)}
.az-core .t{position:absolute;left:50%;top:calc(var(--p) * .37);transform:translate(-50%,-55%);text-align:center;white-space:nowrap;pointer-events:none}
.az-core .t b{display:block;font:700 calc(var(--p) * .092)/1 var(--f-head);letter-spacing:-.01em;
  background:linear-gradient(90deg,var(--H),var(--A) 35%,var(--E) 65%,var(--L));-webkit-background-clip:text;background-clip:text;color:transparent}
.az-core .t small{position:absolute;left:50%;top:calc(var(--p) * .3);transform:translateX(-50%);font:600 12px/1 var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.az-core.on .glow,.az-core:focus-visible .glow{opacity:1}
.az-core.on .plate{opacity:1;box-shadow:0 0 0 1px rgba(255,255,255,.5) inset,0 0 40px 4px color-mix(in srgb,var(--A) 40%,transparent)}
.az-core.part .plate{opacity:1}
.az-stage.lit .az-core:not(.on):not(.part){opacity:.45}
.az-stage:not(.in) .az-core{opacity:0;transform:scale(.6)}
.az-links path.cp{stroke-dasharray:5 6!important;animation:none}
.az-links path.cp.on{stroke-dasharray:5 6!important;animation:azMarch 1s linear infinite}
@keyframes azMarch{to{stroke-dashoffset:-22}}
.az-kw.tr{font-weight:600;padding:8px 13px 8px 11px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--A) 35%,var(--line)),0 8px 20px -12px rgba(0,0,0,.4)}
.az-kw.tr .d{display:none}
.az-kw.tr::before{content:'';width:9px;height:9px;border-radius:2px;background:conic-gradient(var(--H),var(--A),var(--L),var(--E),var(--H))}

/* ---------- info line under the stage ---------- */
.az-info{min-height:104px;margin:8px auto 0;max-width:760px;text-align:center}
.az-info.az-info-in{position:absolute;z-index:2;margin:0;min-height:0;max-width:none;pointer-events:none}
.az-info.az-info-in h3{font-size:20px}
.az-info h3{margin:0 0 4px;font:700 22px/1.2 var(--f-head);letter-spacing:-.02em;color:var(--c,var(--ink));transition:color .3s}
.az-info p{margin:0;color:var(--muted);font-size:15px}
.az-info .pr{margin-top:6px;color:var(--ink);font-weight:600;font-size:14px}
.az-info .chips{display:inline-flex;gap:6px;margin-left:6px;vertical-align:2px}
.az-info .chips span{padding:3px 8px;border-radius:99px;font:600 11px/1 var(--f-body);color:#fff;background:var(--dc)}
.az-hint{opacity:.55;font-size:14px}
.az-info>*{animation:azFade .35s both}
@keyframes azFade{from{opacity:0;transform:translateY(6px)}}

/* narrow stages (set by JS when the stage is < 920px wide) */
.az-stage.mob .az-links{display:none}
.az-stage.mob .az-kw{font-size:12.5px;padding:6px 9px 6px 8px}
.az-stage.mob .az-kw{transition:opacity .3s,left .45s cubic-bezier(.2,.85,.25,1),top .45s cubic-bezier(.2,.85,.25,1),background .35s,box-shadow .35s,scale .35s}
.az-stage.mob{transition:height .35s cubic-bezier(.2,.85,.25,1)}
.az-stage.mob .az-kw.gone{visibility:hidden;opacity:0!important;pointer-events:none;transition:none}
.az-stage.mob.lit .az-kw:not(.on){opacity:.45}
.az-mob .az-info{min-height:120px}
.az-stage.mob .az-core .plate{transform:none;border-radius:99px;width:100%;height:100%;margin:0;left:0;top:0}
.az-stage.mob .az-core .plate::after{inset:2px;border-radius:99px}
.az-stage.mob .az-core .t{top:50%;transform:translate(-50%,-50%)}
.az-stage.mob .az-core .t small{display:none}

/* comic mode: ink outlines and offset shadows, like the rest of the comic site */
[data-site-mode="comic"] .az-big,[data-site-mode="comic"] .az-info h3{font-weight:400;letter-spacing:.02em}
[data-site-mode="comic"] .az-kw{box-shadow:inset 0 0 0 2px var(--ink),3px 3px 0 var(--ink)}
[data-site-mode="comic"] .az-kw.on{box-shadow:inset 0 0 0 2.5px var(--c),3px 3px 0 var(--ink)}
[data-site-mode="comic"] .az-cube .f{box-shadow:inset 0 0 0 2px rgba(0,0,0,.55)}
[data-site-mode="comic"] .az-core .t b{font-weight:400;letter-spacing:.04em}