/* ============================================================
   4. ONLINE / OFFLINE — duas figuras com fita em espiral

   Duas figuras sobre o MESMO fundo de tinta, sem divisoria. Em volta
   de cada uma, uma fita que enrola o corpo: sobe em voltas, passando
   na frente em metade do percurso e atras na outra.

   O que faz a volta convencer e a troca frente/tras cair exatamente
   na borda do corpo. Por isso o raio da espiral em cada altura vem do
   perfil medido da silhueta (js/dados-onoff.js), nao de uma elipse.

   O quadro e compartilhado: o <img> e os dois <svg> ocupam o mesmo
   retangulo, e o viewBox e W x H da propria foto. Sem isso o tracado
   cai fora do lugar. O palco usa width: fit-content justamente para
   ter a largura exata da imagem.
   ============================================================ */

.onoff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--tinta);     /* um fundo so: nao ha divisoria */
  min-height: 100svh;
  overflow: hidden;
}

.onoff-lado {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
}

/* O afastamento abre o vao central onde moram os botoes.
   --oo-afast e ajustavel por ?oo_afast=N */
#lado-online  { --dir: -1; }
#lado-offline { --dir:  1; }

.onoff-palco {
  position: relative;
  z-index: 1;
  width: fit-content;           /* = largura da imagem, exatamente */
  height: fit-content;
  transform: translateX(calc(var(--dir) * var(--oo-afast, 92px)));
}

/* A figura e limitada pelos DOIS lados, e a largura e quem manda.
   Com o afastamento a figura sai do meio do painel, entao ela tem de
   caber no que sobra do lado de dentro — onde tambem mora o botao.
   Sem o limite de largura ela vazava 63px pela borda da tela e
   passava por baixo do botao; sem o de altura, a cabeca e os pes
   ficavam cortados.
      2 x afastamento  descentraliza a figura
      8rem             reserva o vao do botao (o do offline e o mais
                       largo dos dois: e ele que manda)
   Com width/height auto o navegador respeita os dois limites e
   mantem a proporcao nativa. */
.onoff-fig {
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  height: auto;
  max-height: 88svh;
  max-width: calc(50vw - 2 * var(--oo-afast, 92px) - 8rem);
}

/* Os dois SVG cobrem o mesmo retangulo da imagem. overflow visible
   porque em alguns pontos a espiral passa alguns px fora do quadro. */
.fita-atras,
.fita-frente {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.fita-atras  { z-index: 1; }
.fita-frente { z-index: 3; }

.fita-atras path,
.fita-frente path {
  fill: none;
  stroke: var(--ambar);
  stroke-width: 15px;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* sem isto a espessura escalaria junto com o viewBox */
  vector-effect: non-scaling-stroke;
}

/* ---------------- texto sobre a figura ---------------- */
.onoff-tx {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
             translateX(calc(var(--dir) * var(--oo-afast, 92px)));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  text-align: center;
  pointer-events: none;
  width: max-content;
  max-width: 88%;
}

/* NAO voltar com camada escura atras do texto.
   Havia aqui um .onoff-tx::before com radial-gradient numa caixa de
   560x300. Ele desenhava aresta reta: radial-gradient(ellipse at
   center) usa farthest-corner, entao so chega a transparente nos
   CANTOS — no meio de cada lado da caixa ainda sobra tom, e o corte
   da caixa aparecia como linha reta sobre a foto.
   A legibilidade agora depende so de text-shadow, que nao tem borda
   e nao cria retangulo. Se algo sumir sobre o notebook, aumentar a
   sombra ou o peso da fonte — nao devolver a caixa. */

.onoff-nome {
  margin: 0;
  font-family: var(--fonte-texto);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -.02em;
  line-height: .95;
  font-size: clamp(30px, 5.2vw, 74px);
  color: var(--osso);
  text-shadow: 0 2px 20px rgba(12, 10, 9, .85), 0 0 46px rgba(12, 10, 9, .6);
}

.onoff-pilula {
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: .1em;
  background: var(--osso);
  color: var(--tinta);
  border-radius: 99px;
  padding: .42em 1.05em;
  white-space: nowrap;
}

.onoff-frase {
  margin: 0;
  font-size: 15px;
  /* 500 e nao 400: sobre o notebook cinza do lado online o peso
     normal media 4.1:1, abaixo dos 4.5:1 de AA. Peso, nao caixa. */
  font-weight: 500;
  color: var(--osso);
  opacity: .82;
  /* A primeira sombra e CURTA e opaca: ela escurece o fundo colado
     no glifo e e o que levanta o contraste sobre o notebook cinza.
     Como acompanha a forma da letra, nao desenha retangulo nenhum.
     As duas seguintes sao o halo difuso, que so afasta do fundo. */
  text-shadow: 0 0 5px rgba(12, 10, 9, 1),
               0 1px 12px rgba(12, 10, 9, .9),
               0 0 28px rgba(12, 10, 9, .7);
}

/* ---------------- botoes, no vao central ----------------
   Fora das figuras: cada um encostado na borda do seu painel que da
   para o centro. --oo-btny e ajustavel por ?oo_btny=N */
.onoff-btn {
  position: absolute;
  z-index: 6;
  top: var(--oo-btny, 74%);
  font-family: var(--fonte-mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--ambar);
  border: 1px solid var(--ambar);
  border-radius: 99px;
  padding: .62em 1.25em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}
#lado-online  .onoff-btn { right: 5%; }
#lado-offline .onoff-btn { left: 5%; }

.onoff-btn:hover,
.onoff-btn:focus-visible {
  background: var(--ambar);
  color: var(--tinta);
}

/* ---------------- entrada ----------------
   A fita se desenha por stroke-dashoffset; o texto e o botao entram
   logo depois. O atraso entre os dois lados vem de --oo-atraso. */
.js .fita-atras path,
.js .fita-frente path {
  stroke-dashoffset: var(--L);
  transition: stroke-dashoffset 1.6s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--oo-atraso, 0ms);
}
.js .onoff-tx,
.js .onoff-btn {
  opacity: 0;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--oo-atraso, 0ms) + 900ms);
}
.js .onoff-tx  { transform: translate(-50%, -50%)
                 translateX(calc(var(--dir) * var(--oo-afast, 92px)))
                 translateY(12px); }
.js .onoff-btn { transform: translateY(12px); }

.js .onoff-lado.entrou .fita-atras path,
.js .onoff-lado.entrou .fita-frente path { stroke-dashoffset: 0; }
.js .onoff-lado.entrou .onoff-tx {
  opacity: 1;
  transform: translate(-50%, -50%)
             translateX(calc(var(--dir) * var(--oo-afast, 92px)));
}
.js .onoff-lado.entrou .onoff-btn { opacity: 1; transform: translateY(0); }

/* ---------------- mobile ----------------
   Uma figura por vez, empilhadas, sem afastamento: com 92px de
   deslocamento numa coluna estreita a figura sairia da tela. */
/* No estreito os dois ficam LADO A LADO, so menores. Empilhar perdia
   a comparacao, que e o sentido da secao. */
@media (max-width: 900px) {
  /* minmax(0,1fr) e nao 1fr: o minimo automatico do 1fr e o
     min-content, e os botoes tem white-space: nowrap. Sem isto eles
     esticavam as colunas para 200/355 e a secao vazava a tela. */
  .onoff { min-height: auto; padding-bottom: 18px;
           grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .onoff-lado { min-height: 62vh; }
  #lado-online  { --dir: -1; }
  #lado-offline { --dir:  1; }
  .onoff-palco { transform: translateX(calc(var(--dir) * 18px)); }
  .onoff-fig { max-height: 82%; max-width: calc(50vw - 2 * 18px - 12px); }

  /* O texto fica centrado no PAINEL, nao sobre a figura deslocada:
     com o afastamento de 18px o "OFFLINE" terminava a 1px da borda
     direita, e numa tela de 360px passaria. */
  .onoff-tx { transform: translate(-50%, -50%); max-width: 96%; }
  .js .onoff-tx { transform: translate(-50%, -50%) translateY(12px); }
  .js .onoff-lado.entrou .onoff-tx { transform: translate(-50%, -50%); }
  .onoff-nome { font-size: 7.4vw; }
  /* nao cabem em meia tela: saem */
  .onoff-pilula,
  .onoff-frase { display: none; }
  .onoff-tx::before { width: 46vw; height: 150px; }

  /* Os botoes saem do vao central, que fica estreito demais, e vao
     para uma linha ABAIXO dos dois paineis. Por isso a secao vira
     grid de duas linhas. */
  .onoff { grid-template-rows: auto auto; }
  .onoff-btn {
    position: static;
    margin-top: 12px;
    font-size: 11px;
    padding-inline: .9em;
    white-space: normal;      /* pode quebrar: meia tela e estreita */
    text-align: center;
    min-height: 40px;
  }
  /* 12px entre eles = 6px de cada lado */
  #lado-online  .onoff-btn { right: auto; justify-self: end;   margin-right: 6px; }
  #lado-offline .onoff-btn { left: auto;  justify-self: start; margin-left: 6px; }
  .js .onoff-btn { transform: translateY(12px); }
  .js .onoff-lado.entrou .onoff-btn { transform: none; }
}

/* ---------------- sem movimento ----------------
   Fita parada, ja desenhada, sem entrada. */
@media (prefers-reduced-motion: reduce) {
  .js .fita-atras path,
  .js .fita-frente path { stroke-dashoffset: 0 !important; transition: none; }
  .js .onoff-tx,
  .js .onoff-btn { opacity: 1 !important; transition: none; }
  .js .onoff-tx { transform: translate(-50%, -50%)
                  translateX(calc(var(--dir) * var(--oo-afast, 92px))) !important; }
  .js .onoff-btn { transform: none !important; }
}