/* ==========================================================================
   Camada de TEXTO da tela do CloudPilot dentro da arte 2.5
   (docs/ARTE-CLOUDPILOT-CODIGO.md, §15)

   A arte `cp-demo.webp` (1920x658) e' a cena 3D: notebook, servidores, nuvem
   holografica e os tres provedores. NESTA arte a interface do produto ja vem
   DESENHADA no raster -- icones, cartoes, trilho, circulos numerados,
   chevrons e os botoes de acao. Por isso a camada de HTML aqui e' SO DE
   TEXTO: cada string e' posicionada no espaco reservado que o raster deixou.

   O texto nao pode ser "colado" no vidro: a tela esta em PERSPECTIVA. Para
   que as letras caiam exatamente nos cartoes do raster, o navegador precisa
   da mesma projecao perspectiva da arte -- `perspective` no pai + `transform`
   (matrix3d) no filho.

   GEOMETRIA (medida, 29/10/2026)
   -----------------------------
   O painel do app e' um trapezio de perspectiva real:

       TL (1009,29 ; 132,06)   TR (1719,64 ;  85,76)
       BL ( 971,60 ; 505,68)   BR (1705,32 ; 524,15)

   Residuo das retas: topo 0,13 px | base 0,06 px | esquerda 1,84 px |
   direita 1,66 px. A camera foi fechada por tres restricoes independentes
   (tools-dev/_fechar_camera_v5.py e _ancoras_v5.py):

       ponto principal  o = (740,3 ; 540,3)     f = 1901,6 px
       retangulo PLANO  = 717,372 x 435,131 u  (aspecto 1,6486)

       badge '?' (circulo no plano)  -> bbox plano 1,0000
       avatar   (quadrado no plano) -> bbox plano 0,9905
       as 3 linhas de recomendacao   -> largura 538,8 / 536,7 / 537,3 u (0,4%)

   A reprojecao dos 4 cantos do trapezio tem erro de 0,0000 px.

   Unidade
   -------
   O palco (`.cp-ill__stage`) e' o container de consulta: `--u` vale 1 unidade
   de arte (1/1920 da largura da arte). Todos os comprimentos sao
   `calc(N * var(--u))`.

   >>> ATENCAO: use `--u` para TODO comprimento. Nao use `em` em comprimento:
   >>> `em` se resolve no font-size do PROPRIO elemento, e um `left: 133em`
   >>> num texto de 19px vale 2527px. `em` so aparece no `max-width` da
   >>> medida de leitura (34em do proprio paragrafo, como no design system).

   COORDENADAS DOS TEXTOS
   ----------------------
   Todas as posicoes abaixo estao no PLANO (o elemento `.cp-tela` e' o
   retangulo plano, com o topo-esquerdo em 0,0). Medidas em
   tools-dev/_ancoras_v5.py:

       pílula de busca ........ x 114,2..500,7   y  14,6.. 52,3
       magnifier .............. ate x ~148        (o texto comeca em 155)
       balão da pergunta ..... x 122,5..502,2   y  71,2..125,9
       badge '?' .............. x 137,2..171,7   y  84,1..118,3
       cartão de resposta ..... x 119,1..680,9   y 133,6..268,1
       avatar (nuvem) ........ x 138,6..191,7   y 152,2..202,9
       ícones de ação ........ x 550,7..665,3   y 161,1..187,6
       linha 1 ............... x 139,4..677,9   y 264,9..310,8
       linha 2 ............... x 142,2..678,6   y 315,5..366,1
       linha 3 ............... x 141,5..678,5   y 363,5..421,0
       glifo do ícone (linha 1) x 221,3..252,6  (o texto comeca em 267)
       chevron (linha 1) ..... x 646,7..660,5

   ORDEM DA CASCATA (armadilha ja paga uma vez)
   --------------------------------------------
   Os `@media` deste arquivo ficam no FIM, de proposito. Um `@media` nao
   ganha de uma regra base por ser mais especifica: `media` e' uma condicao, nao
   um seletor. Com a mesma especificidade, vale a ORDEM DO ARQUIVO -- e a
   regra base, escrita antes, venceria. Os blocos estao aqui, depois de todas
   as regras base, na ordem 1439 -> 1023 -> 639 (a mais estreita precisa vir
   depois).
   ========================================================================== */

/* ---------- janela da arte ------------------------------------------------

   A arte e' um raster (assets/img/cloudpilot/cp-demo.webp) e a camada de
   texto do produto e' HTML por cima. Para os dois ficarem SEMPRE na mesma
   posicao -- inclusive quando a faixa recorta a arte no celular -- o recorte
   acontece num ANCESTOR COMUM:

     .cp-ill          a janela visivel (o que o visitante ve)
     .cp-ill__stage   o espaco da arte, em 1920 x 658
     .cp-ill__bg      a arte, preenchendo o palco
     .cp-ill__screen  a projecao perspectiva (o pai da tela)
     .cp-tela         a camada de TEXTO, projetada no painel

   O palco tem a proporcao da arte e e' dimensionado como `object-fit: cover`:
   a largura e' o maior valor entre a largura da janela e 1920/658 vezes a
   altura dela. No desktop a ancora e' o centro (como `object-position:
   center`); no celular, a direita (como `object-position: right center`, que
   mantem o notebook e as marcas dos provedores e descarta a esquerda oca). */
.cp-ill {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: size;
}
.cp-ill__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100cqw, calc(1920 * 100cqh / 658));
  aspect-ratio: 1920 / 658;
  transform: translate(-50%, -50%);
  /* Container do texto: a partir daqui `100cqw` e' a largura do palco, e
     `--u` vale 1 unidade de arte (1/1920). */
  container-type: inline-size;
  --u: calc(100cqw / 1920);
}
.cp-ill__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- a projecao ---------------------------------------------------

   O pai carrega a perspectiva; a camada de texto (filha) e' o retangulo
   plano. A `perspective-origin` e' o centro do painel medido -- o ponto em
   que a projecao nao desloca nada. */
.cp-ill__screen {
  position: absolute;
  inset: 0;
  perspective: calc(3000 * var(--u));
  perspective-origin: calc(1345.62 * var(--u)) calc(304.95 * var(--u));
}

/* ---------- a camada de texto -------------------------------------------

   O retangulo plano e' 717,372 x 435,131 u de arte, posicionado para que o
   centro caia no centro do painel medido. A matriz 3D abaixo projeta esse
   retangulo no trapezio do painel (erro de reprojecao 0,0000 px).

   A camada NAO tem fundo, borda nem sombra: a interface (fundo, cartoes,
   trilho, icones) ja esta no raster. Aqui so entra o texto. */
.cp-tela {
  position: absolute;
  left: calc(963.992 * var(--u));
  top: calc(91.033 * var(--u));
  width: calc(717.372 * var(--u));
  height: calc(435.131 * var(--u));
  transform-origin: 50% 50%;
  /* matrix3d recebe 16 valores em 4 GRUPOS DE 4 (coluna a coluna): o grupo 1
     e' a 1a coluna da matriz, o 2 a 2a, o 3 a 3a e o 4 a translacao. Os 9
     valores da matriz 3x3 ocupam os 3 primeiros grupos, 3 por grupo, e o 4o
     valor de cada grupo e' 0. (Distribuir 4/4/1 embaralha a matriz e a tela
     inteira cai num ponto so.) */
  transform: matrix3d(
    1.00487974, -0.02181844, 0.67261317, 0,
    -0.06243557, 0.92646879, 0.26309074, 0,
    -0.62889533, -0.30636955, 0.92962747, 0,
    0, 0, 0, 1
  );

  font-family: inherit;
  color: #daecff;
}

/* ======================= texto dentro da tela ============================= */

/* ---------- pílula de busca ---------------------------------------------
   O campo de busca e' o raster. O placeholder entra depois do magnifier
   (que termina em x ~148) e fica centrado na altura da pílula (14,6..52,3). */
.cp-tela__busca-txt {
  position: absolute;
  left: calc(155 * var(--u));
  top: calc(25.6 * var(--u));
  margin: 0;
  font-size: calc(13 * var(--u));
  font-weight: 400;
  line-height: 1.2;
  color: #b6d0ff;
  white-space: nowrap;
}

/* ---------- cartão da pergunta ------------------------------------------
   Balão branco com o badge '?' a esquerda (que termina em x 171,7). O texto
   comeca em 183,3 e vai ate a borda do balão (502,2): 318 u de largura. Sao
   duas linhas de 14 u -- cabem nos 54,6 u de altura do balão. */
.cp-tela__balao-texto {
  position: absolute;
  left: calc(183.3 * var(--u));
  top: calc(79.6 * var(--u));
  width: calc(318 * var(--u));
  margin: 0;
  font-size: calc(14 * var(--u));
  font-weight: 600;
  line-height: 1.35;
  color: #0f1c3d;
}

/* ---------- cartão da resposta ------------------------------------------
   O avatar de nuvem fica a esquerda (138,6..191,7) e os ícones de acao a
   direita (550,7..665,3). O nome "CloudPilot" divide a faixa com os icones
   (centro 174,4); a resposta e o subtitulo descem abaixo dessa faixa, no
   espaco livre ate a base do cartao (268,1).

   A RESPOSTA fica numa COLUNA ESTREITA de proposito. A caixa ia de 0 a 461 u --
   ou seja, passava por BAIXO dos icones de acao (que comecam em 550,7 u), e a
   1a linha terminava em "(R$ 42.560,00)," encostada no botao de copiar. O
   mockup de referencia do cliente resolve assim: a coluna do texto termina
   ANTES dos icones, e a 1a linha quebra em "...no Amazon EC2".

   Medido no navegador (tools-dev/_ancoras_v5.py para as ancoras, quebra de
   linha medida com Range numa copia sem a perspectiva):

       largura  corpo  1a linha (PT)                       folga ate o icone
       320 u    14 u   "O maior custo ... no Amazon EC2"   46 px
       330 u    15 u   "O maior custo ... no Amazon EC2"   31 px
       461 u    15 u   "O maior custo ... (R$ 42.560,00),"   0 px  <- colado

   Em EN (texto 20% mais longo) so ha uma combinacao que reproduz a quebra do
   mockup nos DOIS idiomas: 320 u com corpo 14 u. Com 15 u o PT aceita 330 u e
   o EN exige 345 u -- nao existe largura comum. O corpo cai 1 u (de 15 para
   14), o que a 1440 px vale 10,4 px em vez de 11,1 px: imperceptivel.

   A base do cartao e' a 268,11 u, e o bloco ocupa 198..257 u -- sobra de folga
   ate a borda. */
.cp-tela__nome {
  position: absolute;
  left: calc(204 * var(--u));
  top: calc(166.6 * var(--u));
  margin: 0;
  font-size: calc(13 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  color: #f2fbff;
}
.cp-tela__resposta {
  position: absolute;
  left: calc(204 * var(--u));
  top: calc(198 * var(--u));
  width: calc(320 * var(--u));
  margin: 0;
  font-size: calc(14 * var(--u));
  font-weight: 400;
  line-height: 1.35;
  color: #daecff;
}
.cp-tela__sub {
  position: absolute;
  left: calc(204 * var(--u));
  top: calc(242 * var(--u));
  margin: 0;
  font-size: calc(12.5 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  color: #f7ffff;
}

/* ---------- recomendações -----------------------------------------------
   Numeros, icones e chevrons ja vem no raster. O texto entra entre o glifo
   do icone (que termina em x 252,6) e o chevron (que comeca em 646,7):
   380 u de largura. Cada linha tem a sua altura -- a perspectiva cresce para
   baixo, entao a linha 3 e' maior que a linha 1. */
.cp-tela__rec-txt {
  position: absolute;
  left: calc(267 * var(--u));
  margin: 0;
  font-size: calc(14 * var(--u));
  font-weight: 400;
  line-height: 1.2;
  color: #cfe3ff;
  white-space: nowrap;
}
.cp-tela__rec-txt--1 { top: calc(280.3 * var(--u)); }
.cp-tela__rec-txt--2 { top: calc(335 * var(--u)); }
.cp-tela__rec-txt--3 { top: calc(387.9 * var(--u)); }

/* ==========================================================================
   AJUSTES POR LARGURA
   ========================================================================== */

/* ---------- ate 1439px: a faixa empilha ----------------------------------

   Abaixo de 1440px a arte nao comporta o texto ao lado sem que o texto invada
   a ilustracao. Nesses tamanhos o texto sobe e a arte vira a faixa de largura
   total abaixo dele (cloudpilot.css, §6). O palco passa a se ancorar pela
   DIREITA, senao a camada de texto sairia do notebook. */
@media (max-width: 1439px) {
  .cp-ill {
    height: auto;
    aspect-ratio: 2 / 1;
  }
  .cp-ill__stage {
    left: auto;
    right: 0;
    transform: translateY(-50%);
  }
}

/* ---------- ate 1023px: a tela encolhe, a leitura fica no limite ---------

   A faixa empilha e a arte e' recortada pela direita. Com a janela na razao
   1,72 a arte visivel vai de x 789 a x 1920 (a pilha de servidores, o
   notebook e os provedores) e a escala fica em 100cqh/658: a 768px o texto
   de 15 u do cartao de resposta cai para 10,2px. Abaixo disso o recorte
   muda. */
@media (max-width: 1023px) {
  .cp-ill {
    aspect-ratio: 1.72 / 1;
  }
}

/* ---------- no celular: recorte no painel do app ------------------------

   Em 390px a janela na razao 1,72 deixa a escala em 0,55 u de arte por px e
   o texto interno da tela cairia para 4,4px, ilegivel. O recorte passa a
   mostrar so o PAINEL DO APP (arte x 968..1720), o que dobra a escala para
   0,52 e leva o texto a 7,8px -- o mesmo patamar da arte 2.3, que ja foi
   aprovada.

   A razao da janela e' a do recorte: 752/658 = 1,143 (o recorte e' so
   horizontal -- a arte inteira continua visivel na vertical).

   E o palco precisa DESLOCAR para a esquerda: com a ancora pela direita, a
   borda direita da arte (x = 1920) cairia na borda da janela e o painel
   (que termina em x = 1720) ficaria cortado. Deslocar o palco em 200
   unidades de arte (1920 - 1720) traz a borda do painel para a borda da
   janela. A unidade aqui e' `100cqh` da propria janela: 200/658 do palco. */
@media (max-width: 639px) {
  .cp-ill {
    aspect-ratio: 1.143 / 1;
  }
  .cp-ill__stage {
    right: calc(-200 * 100cqh / 658);
    transform: translateY(-50%);
  }
}