/* ═══════════════════════════════════════════════════════════════
   Dev Factory · iso.css — ilustrações isométricas interativas
   Usa os tokens de styles.css (--ink --muted --card --stroke --grad-brand --ease).
   Markup e contrato: ver o comentário no topo de js/iso.js.
   QUADRO (subpáginas .iso-block e revisão .iso-split): a cena colorida original
   num painel com borda 1px em degradê, fundo levemente distinto da seção
   (--pg-frame, de pages.css; fallback --bg-soft) e rótulo "FIG. 01 — título"
   no canto (título opcional em data-fig no .iso). A legenda ao lado vira lista
   com filetes; a estação ativa ganha selo em degradê e filete arco-íris.
   ═══════════════════════════════════════════════════════════════ */

/* ---------- superfícies das cenas (variáveis lidas pelos SVGs) ---------- */
.iso{
  --iso-floor-1:#F8F4FF; --iso-floor-2:#EAF3FE; --iso-grid:#E2D8F6;
  --iso-edge-l:#D9CCF6;  --iso-edge-r:#C2B1EF;
  --iso-ink-1:#7A3FD0;   --iso-ink-2:#8A7FB0;   --iso-ink-3:#2B3086;
  --iso-leader:#2B3086;  --iso-badge-ring:#fff;
  --iso-shadow:rgba(43,48,134,.18);
  --iso-dim:.32;
}
:root:not([data-theme="light"]) .iso{
  --iso-floor-1:#1E2552; --iso-floor-2:#141A3C; --iso-grid:#2B3468;
  --iso-edge-l:#2E3577;  --iso-edge-r:#232966;
  --iso-ink-1:#D3A6F7;   --iso-ink-2:#9AA3D6;   --iso-ink-3:#C9CEF5;
  --iso-leader:#8E97D6;  --iso-badge-ring:#0B1027;
  --iso-shadow:rgba(0,0,0,.45);
  --iso-dim:.46;
}

/* ---------- contêiner ---------- */
.iso{position:relative;width:100%;aspect-ratio:4/3;min-width:0;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent}
.iso>svg{display:block;width:100%;height:100%;overflow:visible}
.iso.is-loading::before{content:"";position:absolute;inset:18% 22%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(173,71,234,.16),transparent);animation:isoBreath 1.6s ease-in-out infinite}
.iso.is-error{display:none}
@keyframes isoBreath{50%{opacity:.4}}

/* proporções (evita salto de layout antes do SVG chegar) */
.iso[data-iso="fabrica"]{aspect-ratio:770/606}
.iso[data-iso="camada-servicos"]{aspect-ratio:408/536}
.iso[data-iso="conta-cliente"]{aspect-ratio:633/474}
.iso[data-iso="torre-controle"]{aspect-ratio:584/594}
.iso[data-iso="portal-scan"]{aspect-ratio:607/507}
.iso[data-iso="pipeline"]{aspect-ratio:633/456}
.iso[data-iso="cenario-custos"]{aspect-ratio:521/463}
.iso[data-iso="cenario-shadow"]{aspect-ratio:704/472}
.iso[data-iso="cenario-modernizacao"]{aspect-ratio:616/550}

/* ---------- estações ---------- */
.iso [data-station]{cursor:pointer;transition:opacity .5s var(--ease)}
.iso svg.has-active [data-station].is-dim{opacity:var(--iso-dim)}
.iso svg.has-active [data-station].is-active{opacity:1}
.iso svg.has-active .tree{opacity:.7;transition:opacity .5s}
.iso [data-station]:focus{outline:none}
.iso [data-station]:focus-visible{outline:2px solid var(--roxo);outline-offset:2px}

/* selos numerados */
.iso .nb{pointer-events:none}
.iso .nb.is-off{display:none}
.iso .nb .nb-c{transform-box:fill-box;transform-origin:center;transition:transform .45s var(--ease)}
.iso svg.has-active .nb.is-dim{opacity:.55}
.iso .nb.is-active .nb-c{transform:scale(1.22)}
.iso .nb.is-active .nb-c{filter:drop-shadow(0 0 6px rgba(173,71,234,.75))}
.iso .nb text{pointer-events:none}

/* ---------- entrada ---------- */
.iso:not(.is-in) svg .pop{opacity:0}
.iso.is-in svg .pop{animation:isoPop .9s var(--ease) backwards;animation-delay:var(--d,0s)}
.iso.is-in svg .pop.up{animation-name:isoPopUp}
@keyframes isoPop{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
@keyframes isoPopUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- vida (sutil) ---------- */
.iso svg .walk,.iso svg .flow{stroke-dasharray:5 6;animation:isoDash 1.6s linear infinite}
.iso svg .promo{stroke-dasharray:5 5;animation:isoDash 1.2s linear infinite}
.iso svg .beam{stroke-dasharray:6 6;animation:isoDash 1s linear infinite}
@keyframes isoDash{to{stroke-dashoffset:-22}}

.iso svg .bob{animation:isoBob 4.8s ease-in-out infinite}
@keyframes isoBob{50%{transform:translateY(-5px)}}

.iso svg .spk{transform-box:fill-box;transform-origin:center;animation:isoTwinkle 2.4s ease-in-out infinite}
@keyframes isoTwinkle{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}

.iso svg .bcn{animation:isoBlink 1.8s ease-in-out infinite}
@keyframes isoBlink{50%{opacity:.25}}

.iso svg .puff{opacity:0;animation:isoPuff 3.6s ease-out infinite}
@keyframes isoPuff{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(10px,-34px)}}

.iso svg .stm{animation:isoSteam 2.6s ease-in-out infinite}
@keyframes isoSteam{0%,100%{opacity:.15;transform:translateY(2px)}50%{opacity:.9;transform:translateY(-2px)}}

/* pacotes na esteira da fábrica (direção da esteira original) */
.iso svg .pk{animation:isoBelt 7.2s linear infinite;animation-delay:var(--dl,0s)}
@keyframes isoBelt{0%{transform:translate(0,0);opacity:0}8%{opacity:1}88%{opacity:1}100%{transform:translate(118px,-68px);opacity:0}}

.iso svg .scanln{animation:isoScan 2.2s ease-in-out infinite alternate}
@keyframes isoScan{to{transform:translateY(34px)}}

/* movimento genérico ao longo de um vetor (cenas novas): --mx/--my */
.iso svg .move{animation:isoMove var(--t,6s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes isoMove{0%{transform:translate(0,0);opacity:0}10%{opacity:1}85%{opacity:1}100%{transform:translate(var(--mx,0px),var(--my,0px));opacity:0}}

.iso svg .pulse{transform-box:fill-box;transform-origin:center;animation:isoPulse 2.4s ease-out infinite}
@keyframes isoPulse{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}

.iso svg .glow{animation:isoGlow 3s ease-in-out infinite}
@keyframes isoGlow{50%{opacity:.45}}

/* ---------- legenda ---------- */
.iso-legend{list-style:none;margin:0;padding:0;counter-reset:iso;display:flex;flex-direction:column;gap:4px;
  text-align:left;min-width:0}
.iso-legend li{counter-increment:iso;position:relative;display:grid;grid-template-columns:30px 1fr;column-gap:14px;
  align-items:start;padding:11px 16px 11px 14px;border-radius:16px;border:1px solid transparent;cursor:pointer;
  outline:none;transition:background-color .35s,border-color .35s,box-shadow .35s}
.iso-legend li>*{grid-column:2;min-width:0}
.iso-legend li::before{content:counter(iso);grid-column:1;grid-row:1 / span 3;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--muted);
  background:var(--bg-soft);border:1px solid var(--stroke);
  transition:background .35s,color .35s,border-color .35s,box-shadow .35s}
.iso-legend li::after{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--roxo),var(--azul) 70%,var(--ciano));
  transform:scaleY(0);transition:transform .45s var(--ease)}
.iso-legend li>strong:first-child,.iso-legend li>b:first-child,.iso-legend li>h3:first-child,.iso-legend li>h4:first-child{
  display:block;font-size:clamp(15px,1.25vw,17px);font-weight:700;line-height:1.35;color:var(--ink);
  padding-top:4px;margin:0;letter-spacing:-.005em;transition:color .3s}
.iso-legend li p,.iso-legend li>span{display:block;font-size:clamp(13px,1.05vw,15px);line-height:1.55;color:var(--muted);margin:4px 0 0}
.iso-legend li:hover{background:var(--card)}
.iso-legend li.is-active{background:var(--card);border-color:var(--stroke);box-shadow:var(--shadow)}
.iso-legend li.is-active::before{background:var(--grad-brand);color:#fff;border-color:transparent;
  box-shadow:0 6px 18px -6px rgba(173,71,234,.75)}
.iso-legend li.is-active::after{transform:scaleY(1)}
.iso-legend li:focus-visible{border-color:var(--roxo);box-shadow:0 0 0 3px rgba(173,71,234,.22)}
.iso-legend li.is-dim{opacity:.91}  /* >= 4.5:1 para o texto --muted nos dois temas */
.iso-legend li.is-dim:hover,.iso-legend li.is-dim:focus-visible{opacity:1}
/* com JS: só a estação ativa mostra a descrição (no mobile) */

/* ---------- layout lado a lado ---------- */
.iso-split{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:clamp(24px,3.4vw,56px);
  align-items:center;width:min(1200px,100%);margin-inline:auto}
.iso-split.is-flip{grid-template-columns:minmax(0,42fr) minmax(0,58fr)}
.iso-split.is-flip>.iso{order:2}
.iso-split>.iso{max-height:min(78vh,760px)}

@media (max-width:900px){
  .iso-split,.iso-split.is-flip{grid-template-columns:minmax(0,1fr);gap:18px}
  .iso-split.is-flip>.iso{order:0}
  .iso-split>.iso{max-height:none}
}
@media (max-width:600px){
  /* a cena encosta nas bordas da tela (gutter de 16px) para ganhar escala */
  .iso-split>.iso{width:calc(100% + 32px);margin-inline:-16px}
}
@media (max-width:900px){
  .iso-legend.is-live li:not(.is-active) p,.iso-legend.is-live li:not(.is-active)>span{display:none}
  .iso-legend li{padding:10px 12px 10px 12px}
  .iso-legend li::before{width:28px;height:28px;font-size:12.5px}
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  .iso svg *{animation:none!important}
  .iso:not(.is-in) svg .pop{opacity:1}
  .iso svg .puff{opacity:0}
  .iso [data-station],.iso-legend li,.iso-legend li::after{transition:none}
}

/* ═══════════ QUADRO (.iso-block / .iso-split) ═══════════ */
html{counter-reset:isofig}
:is(.iso-block,.iso-split)>.iso{
  --iso-pad:clamp(14px,2.2vw,30px); --iso-label:30px;
  counter-increment:isofig;
  box-sizing:content-box;                         /* aspect-ratio vale para a cena, não para a moldura */
  width:calc(100% - 2 * var(--iso-pad) - 2px);
  padding:calc(var(--iso-pad) + var(--iso-label)) var(--iso-pad) var(--iso-pad);
  border:1px solid transparent;
  background:linear-gradient(var(--pg-frame,var(--bg-soft)),var(--pg-frame,var(--bg-soft))) padding-box,
             var(--grad-rainbow) border-box;
  isolation:isolate}
/* rótulo numerado no canto */
:is(.iso-block,.iso-split)>.iso::before,
:is(.iso-block,.iso-split)>.iso.is-loading::before{
  content:"FIG. " counter(isofig,decimal-leading-zero);
  position:absolute;inset:auto;left:var(--iso-pad);top:calc(var(--iso-pad) * .6);z-index:1;
  width:auto;height:auto;border-radius:0;background:none;animation:none;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;line-height:1.4;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 2 * var(--iso-pad) - 24px)}
:is(.iso-block,.iso-split)>.iso[data-fig]::before{content:"FIG. " counter(isofig,decimal-leading-zero) "  —  " attr(data-fig)}
/* selo em degradê no canto oposto (pisca enquanto a cena carrega) */
:is(.iso-block,.iso-split)>.iso::after{content:"";position:absolute;right:var(--iso-pad);top:calc(var(--iso-pad) * .6 + 3px);
  width:9px;height:9px;transform:rotate(45deg);background:var(--grad-brand)}
:is(.iso-block,.iso-split)>.iso.is-loading::after{animation:isoBreath 1.2s ease-in-out infinite}

/* legenda: lista com filetes; estação ativa com selo em degradê */
:is(.iso-block,.iso-split) .iso-legend{gap:0;border-top:1px solid var(--stroke)}
:is(.iso-block,.iso-split) .iso-legend li{grid-template-columns:40px 1fr;column-gap:14px;padding:14px 4px 15px 0;
  border:0;border-bottom:1px solid var(--stroke);border-radius:0;background:none;box-shadow:none}
:is(.iso-block,.iso-split) .iso-legend li::before{content:counter(iso,decimal-leading-zero);width:40px;height:24px;border-radius:999px;
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--muted);
  background:transparent;border:1px solid var(--stroke);box-shadow:none}
:is(.iso-block,.iso-split) .iso-legend li::after{left:0;right:0;top:auto;bottom:-1px;width:auto;height:1px;border-radius:0;
  background:var(--grad-rainbow);transform:scaleX(0);transform-origin:0 50%}
:is(.iso-block,.iso-split) .iso-legend li>:is(strong,b,h3,h4):first-child{padding-top:2px;transition:color .3s,transform .45s var(--ease)}
:is(.iso-block,.iso-split) .iso-legend li:hover{background:none}
:is(.iso-block,.iso-split) .iso-legend li:hover::after{transform:scaleX(.18)}
:is(.iso-block,.iso-split) .iso-legend li:hover::before{border-color:var(--ink);color:var(--ink)}
:is(.iso-block,.iso-split) .iso-legend li.is-active{background:none;border-color:var(--stroke);box-shadow:none}
:is(.iso-block,.iso-split) .iso-legend li.is-active::before{background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:none}
:is(.iso-block,.iso-split) .iso-legend li.is-active::after{transform:scaleX(1)}
:is(.iso-block,.iso-split) .iso-legend li.is-active>:is(strong,b,h3,h4):first-child{transform:translateX(4px)}
:is(.iso-block,.iso-split) .iso-legend li:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px;box-shadow:none}

@media (max-width:900px){
  :is(.iso-block,.iso-split) .iso-legend li{padding:11px 2px 12px 0;grid-template-columns:36px 1fr}
  :is(.iso-block,.iso-split) .iso-legend li::before{width:36px;height:22px;font-size:11px}
}
@media (max-width:600px){
  /* o quadro fica dentro do gutter (a borda em degradê some se encostar na tela) */
  :is(.iso-block,.iso-split)>.iso{--iso-pad:10px;--iso-label:24px;width:calc(100% - 2 * var(--iso-pad) - 2px);margin-inline:0}
  :is(.iso-block,.iso-split)>.iso::before{font-size:10px;letter-spacing:.12em}
}

/* ---------- ?rm=1 (pages.js põe html.no-anim): mesma regra do movimento reduzido ---------- */
html.no-anim .iso svg *{animation:none!important}
html.no-anim .iso:not(.is-in) svg .pop{opacity:1}
html.no-anim .iso svg .puff{opacity:0}
html.no-anim .iso [data-station],html.no-anim .iso-legend li,html.no-anim .iso-legend li::after,
html.no-anim .iso-legend li>*{transition:none}
html.no-anim :is(.iso-block,.iso-split)>.iso.is-loading::after{animation:none}
@media (prefers-reduced-motion:reduce){
  :is(.iso-block,.iso-split) .iso-legend li>*{transition:none}
  :is(.iso-block,.iso-split)>.iso.is-loading::after{animation:none}
}