/* ==========================================================================
   GLOBO EM CANVAS — esfera de pontos que gira pelo scroll
   Prefixo: globe-
   Tokens usados: --fg-2 --rule --accent --ease
   O desenho em si é canvas: cor, raio e opacidade vivem no script, que lê
   --accent do elemento. Aqui só o posicionamento e a entrada.
   ========================================================================== */

.globe-sec{position:relative;overflow:hidden}
.globe-media{position:absolute;inset:0;z-index:0}
.globe-sec > .wrap{position:relative;z-index:2}

/* Entra por fade quando a seção aparece — o canvas já desenhou antes, mas
   surgir do nada é pior que surgir suave. */
.globe-canvas{position:absolute;top:0;right:0;opacity:0;transition:opacity 1.4s var(--ease)}
.globe-sec.is-drawn .globe-canvas{opacity:1}

/* Placeholder do conteúdo — some quando um componente real ocupar o slot. */
.globe-slot{margin-top:clamp(38px,6vh,60px);min-height:220px;border:1px dashed var(--rule);
  border-radius:12px;display:flex;align-items:center;padding:clamp(20px,3vw,32px)}
.globe-hint{font-size:14px;line-height:1.7;color:var(--fg-2);max-width:52ch}

/* No mobile o globo sai de trás do texto: vira um bloco próprio, de altura
   fixa, no fluxo normal, acima do título. Atrás do texto numa tela estreita
   ele só atrapalharia a leitura. */
@media(max-width:900px){
  .globe-media{
    position:relative;inset:auto;
    height:clamp(260px,75vw,364px);
    margin-bottom:clamp(16px,3vh,28px);
  }
  .globe-canvas{top:0;left:0;right:auto}
}

@media(prefers-reduced-motion:reduce){
  .globe-canvas{transition:none}
}