/* ===== ESCRITÓRIO VIRTUAL — cortina LOCAL (via .office-bg) + rótulo centrado no viewport
   (07/07/2026, rev4). Dirigido por html[data-office="predraw|drawing|drawn|hiding"]. ===== */

/* CORTINA LOCAL = o PRÓPRIO .office-bg (o painel onde os agentes aparecem). Ele já está
   DENTRO do .center-panel e, por design, ATRÁS dos agentes (office-bg z0 < artboard z1 no
   mesmo stacking context) — logo NUNCA cobre os agentes. Aqui só o deixamos ESCURO nos
   dois temas (os agentes são dourados em ambos → brilham) e o fazemos DESCER via @keyframes
   (clip-path), em sincronia com o reveal. Sem injetar nós no React, sem z-index externo. */
.office-bg{
  background:
    radial-gradient(ellipse 84% 42% at 50% 22%, rgba(227,27,35,0.10), transparent 66%),
    radial-gradient(120% 95% at 50% 34%, rgba(19,25,37,0.95), rgba(6,9,15,0.985) 72%) !important;
  border:1px solid rgba(226,189,105,0.16) !important;
  box-shadow:0 30px 70px rgba(0,0,0,0.45) !important;
  opacity:1 !important;                     /* visibilidade controlada pelo clip (não pela opacity do React) */
  clip-path: inset(0 0 100% 0);             /* recolhida no topo (invisível) */
  will-change: clip-path;
}
@keyframes deltaCurtainReveal { 0%{ clip-path: inset(0 0 100% 0);} 100%{ clip-path: inset(0 0 0 0);} }
@keyframes deltaCurtainHide   { 0%{ clip-path: inset(0 0 0 0);} 100%{ clip-path: inset(0 0 100% 0);} }
/* descendo: anima até cobrir a área (em sincronia com o desenho dos agentes) */
html[data-office="drawing"] .office-bg{ animation: deltaCurtainReveal 2.9s cubic-bezier(.45,0,.2,1) forwards; }
/* revelada: estado final estável */
html[data-office="drawn"]   .office-bg{ clip-path: inset(0 0 0 0); }
/* escondendo: recolhe de baixo p/ cima */
html[data-office="hiding"]  .office-bg{ animation: deltaCurtainHide 2.9s cubic-bezier(.45,0,.2,1) forwards; }
/* intro: recolhida no topo */
html[data-office="predraw"] .office-bg,
html:not([data-office])     .office-bg{ clip-path: inset(0 0 100% 0); animation: none; }

/* O rótulo "ESCRITÓRIO VIRTUAL IA" + seta é centrado no VIEWPORT via translateX
   (delta-office.js, recalculado no resize) → igual em toda resolução. Altura = a do design. */