/* ============================================================
   Perto Digital — Composições 3D em CSS
   Quatro objetos na linguagem dos renders do site, em CSS puro:
   perspective + preserve-3d, so `transform` (sem layout nem paint),
   movimento SO sob `prefers-reduced-motion: no-preference` e com pausa
   global por `[data-movimento="pausado"]` no <html>.

   Sao ORNAMENTO, nunca informacao: entram com aria-hidden, atras ou ao
   lado do conteudo, e nunca substituem o logo oficial.

   Central de Identidade · out/2026
   ============================================================ */

/* === base === */
.c3d {
  --c3d-turquesa: #0B5A6A;
  --c3d-ciano: #01889D;
  --c3d-lima: #B3F169;
  --c3d-oliva-ini: #82A341;
  --c3d-oliva-fim: #C1DC89;
  --c3d-gelo: #F8FEFE;
  --c3d-bg: #00171D;
  --c3d-vidro: linear-gradient(135deg, rgba(11, 90, 106, .46), rgba(0, 31, 36, .66));
  --c3d-borda: rgba(127, 227, 236, .36);
  --c3d-brilho: linear-gradient(115deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 42%);
  position: relative;
  perspective: 1200px;
  perspective-origin: 50% 42%;
  pointer-events: none;            /* decorativo: nunca fica na frente de um clique */
  user-select: none;
}
.c3d, .c3d * { box-sizing: border-box; }
.c3d-cena, .c3d-idle { position: absolute; inset: 0; transform-style: preserve-3d; }
/* a cena recebe a paralaxe do ponteiro (--rx/--ry vindas do JS);
   a camada idle recebe a animacao continua -- por isso sao duas */
.c3d-cena { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .55s ease-out; }
.c3d img { display: block; }
@media (prefers-reduced-motion: reduce) { .c3d-cena { transition: none; } }
/* === /base === */

/* === marca ===
   A marca em vidro: o tile do logo como placa com espessura, o circulo
   como esfera, a figura na frente, o detalhe como esfera menor. As
   proporcoes sao as do vetor oficial (57 x 58). E o mesmo objeto do
   ornamento pontilhado orn3d_marca, na linguagem dos renders. */
.c3d-marca { --c3d-tam: 240px; }
.c3d-marca .c3d-idle { transform: rotateX(10deg) rotateY(-16deg); }
.c3d-marca .c3d-tile {
  position: absolute; left: 50%; top: 50%;
  width: var(--c3d-tam); height: calc(var(--c3d-tam) * 1.0175);
  margin: calc(var(--c3d-tam) * -.509) 0 0 calc(var(--c3d-tam) / -2);
  transform-style: preserve-3d;
}
.c3d-marca .c3d-tile::before, .c3d-marca .c3d-tile::after, .c3d-marca .c3d-face {
  content: ""; position: absolute; inset: 0; border-radius: 19.5%;
}
/* espessura: duas placas atras, cada uma mais escura; a de tras projeta a sombra */
.c3d-marca .c3d-tile::after  { transform: translateZ(-9px);  background: #0B4A56; }
.c3d-marca .c3d-tile::before { transform: translateZ(-18px); background: #06303A; box-shadow: 0 34px 70px rgba(0, 23, 29, .6); }
.c3d-marca .c3d-face {
  background: var(--c3d-vidro); border: 1px solid var(--c3d-borda);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -24px 48px rgba(0, 23, 29, .28);
  transform: translateZ(0);
}
.c3d-marca .c3d-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--c3d-brilho); }
/* esferas: gradiente oliva oficial do icone, luz de cima a esquerda */
.c3d-marca .c3d-esfera {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--c3d-oliva-fim) 0%, #9CB865 38%, var(--c3d-oliva-ini) 68%, #5B7A2A 100%);
  box-shadow: inset -10px -14px 28px rgba(0, 23, 29, .35), inset 6px 8px 14px rgba(255, 255, 255, .18);
}
.c3d-marca .c3d-sombra { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(0, 23, 29, .55), rgba(0, 23, 29, 0) 70%); transform: translateZ(1px); }
.c3d-marca .c3d-esfera-g { left: 21.9%; top: 23.0%; width: 53.6%; height: 52.6%; transform: translateZ(calc(var(--c3d-tam) * .06)); }
.c3d-marca .c3d-sombra-g { left: 24%;   top: 28%;   width: 56%;   height: 54%; }
/* a esfera menor e VIDRO, como no vetor oficial (fill #82A341 a 16% com
   desfoque de fundo): uma bolha translucida com borda clara, e o que esta
   atras continua visivel atraves dela */
.c3d-marca .c3d-esfera-p {
  left: 58%;   top: 54.5%; width: 26.8%; height: 26.3%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .55) 0%, rgba(193, 220, 137, .36) 30%, rgba(130, 163, 65, .22) 62%, rgba(91, 122, 42, .34) 100%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: inset -6px -8px 16px rgba(0, 23, 29, .16), inset 4px 6px 10px rgba(255, 255, 255, .4), 0 10px 24px rgba(0, 23, 29, .16);
  transform: translateZ(calc(var(--c3d-tam) * .17));
}
.c3d-marca .c3d-sombra-p { left: 60%;   top: 60%;   width: 30%;   height: 29%;   transform: translateZ(calc(var(--c3d-tam) * .062)); }
/* a figura de acessibilidade: a camada cobre o tile inteiro e o SVG usa o
   quadro do icone (0 0 57 58) -- a figura cai exatamente onde o vetor a
   desenha, inteira, e fica na frente de tudo (nada a cobre) */
.c3d-marca .c3d-figura {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: #fff; transform: translateZ(calc(var(--c3d-tam) * .19));
  filter: drop-shadow(0 6px 10px rgba(0, 23, 29, .35));
}
/* === /marca === */

/* === orbita ===
   O ecossistema em orbita: os icones de produto giram em dois aneis ao
   redor do tile da marca. Cada tile faz a rotacao inversa do anel, entao
   fica sempre de frente -- e passa por tras do centro de verdade. */
.c3d-orbita { --c3d-r1: 150px; --c3d-r2: 232px; --c3d-tile: 58px; --c3d-centro: 92px; }
.c3d-orbita .c3d-idle { transform: rotateX(14deg); }
/* o centro e o icone oficial, que ja traz o tile branco: nada em volta */
.c3d-orbita .c3d-centro {
  position: absolute; left: 50%; top: 50%; width: var(--c3d-centro); height: var(--c3d-centro);
  margin: calc(var(--c3d-centro) / -2) 0 0 calc(var(--c3d-centro) / -2);
  filter: drop-shadow(0 18px 30px rgba(0, 23, 29, .55));
  transform: translateZ(0);
}
.c3d-orbita .c3d-centro img { width: 100%; height: 100%; object-fit: contain; }
.c3d-anel { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.c3d-anel-1 { --c3d-r: var(--c3d-r1); --c3d-ax: 0deg; }
.c3d-anel-2 { --c3d-r: var(--c3d-r2); --c3d-ax: -58deg; transform: rotateX(var(--c3d-ax)); }
.c3d-giro { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.c3d-sat { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: rotateY(var(--t)) translateZ(var(--c3d-r)); }
.c3d-tile-p {
  position: absolute; width: var(--c3d-tile); height: var(--c3d-tile);
  margin: calc(var(--c3d-tile) / -2) 0 0 calc(var(--c3d-tile) / -2);
  border-radius: 22%; background: #fff; padding: calc(var(--c3d-tile) * .19);
  box-shadow: 0 10px 24px rgba(0, 23, 29, .45), inset 0 0 0 1px rgba(11, 90, 106, .12);
  transform: rotateY(calc(-1 * var(--t))) rotateX(calc(-1 * var(--c3d-ax)));
}
.c3d-tile-p img { width: 100%; height: 100%; object-fit: contain; }
/* === /orbita === */

/* === vitrine ===
   Tres caixas de vidro com profundidade real, como as dos avatares no video
   do Libras -- mas com o canto arredondado do tile do logo (19% do lado):
   nunca um quadrado seco. O que faz ler como vidro e a LUZ, nao a cor: topo
   mais claro (a luz vem de cima), reflexo diagonal na frente, brilho turquesa
   por dentro, o conteudo claro brilhando atraves, e uma sombra no chao. */
.c3d-vitrine {
  --c3d-w: 150px; --c3d-h: 200px; --c3d-d: 110px; --c3d-gap: 44px;
  --c3d-r: calc(var(--c3d-w) * .19);          /* o canto do tile do logo (10,9 / 57) */
  --c3d-corda: calc(var(--c3d-r) * .5176);    /* 2 r sen 15: largura de cada faceta do canto */
  --c3d-apotema: calc(var(--c3d-r) * .9659);  /* r cos 15: distancia da faceta ao centro do arco */
}
.c3d-vitrine .c3d-idle { transform: rotateX(8deg) rotateY(-16deg); }
.c3d-caixa {
  position: absolute; left: 50%; top: 50%; width: var(--c3d-w); height: var(--c3d-h);
  margin-top: calc(var(--c3d-h) / -2); transform-style: preserve-3d;
  /* --z traz a caixa do meio para a frente: profundidade entre as tres */
  transform: translateX(calc((var(--i) - 1) * (var(--c3d-w) + var(--c3d-gap)) - var(--c3d-w) / 2))
             translateZ(var(--z, 0px));
}
.c3d-parede { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* frente e fundo: o retangulo arredondado do logo. A frente e clara em cima,
   quase nada embaixo, com o reflexo diagonal */
.c3d-frente {
  border-radius: var(--c3d-r);
  background: linear-gradient(180deg, rgba(226, 246, 249, .30) 0%, rgba(160, 225, 235, .10) 45%, rgba(11, 90, 106, .08) 100%);
  border: 1px solid rgba(255, 255, 255, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 44px rgba(127, 227, 236, .10);
  transform: translateZ(calc(var(--c3d-d) / 2));
}
.c3d-frente::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 43%, rgba(255, 255, 255, .05) 52%, transparent 60%);
}
/* fundo: o brilho turquesa que ilumina a caixa por dentro */
.c3d-tras {
  border-radius: var(--c3d-r);
  background: radial-gradient(62% 56% at 50% 46%, rgba(127, 227, 236, .36), rgba(11, 90, 106, .12) 68%, transparent 100%);
  border: 1px solid rgba(255, 255, 255, .14);
  transform: translateZ(calc(var(--c3d-d) / -2));
}
/* paredes retas: so o trecho entre os arcos, e sem borda -- parede curva nao
   tem aresta, e uma linha vertical aqui leria como canto vivo */
.c3d-esq, .c3d-dir { width: var(--c3d-d); left: calc(50% - var(--c3d-d) / 2); top: var(--c3d-r); height: calc(100% - 2 * var(--c3d-r)); }
.c3d-esq { background: linear-gradient(90deg, rgba(226, 246, 249, .18), rgba(226, 246, 249, .05)); transform: rotateY(-90deg) translateZ(calc(var(--c3d-w) / 2)); }
.c3d-dir { background: linear-gradient(270deg, rgba(226, 246, 249, .10), rgba(226, 246, 249, .03)); transform: rotateY(90deg)  translateZ(calc(var(--c3d-w) / 2)); }
.c3d-topo, .c3d-base { height: var(--c3d-d); top: calc(50% - var(--c3d-d) / 2); left: var(--c3d-r); width: calc(100% - 2 * var(--c3d-r)); }
/* topo: a face mais clara -- e por onde a luz entra */
.c3d-topo { background: linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(226, 246, 249, .26)); transform: rotateX(90deg) translateZ(calc(var(--c3d-h) / 2)); }
.c3d-base { background: rgba(226, 246, 249, .08); transform: rotateX(-90deg) translateZ(calc(var(--c3d-h) / 2)); }
/* os cantos: cada arco e um quarto de cilindro feito de tres facetas (a 15, 45
   e 75 graus do topo), sem borda. --cx/--cy (-1 ou 1) dizem o canto, --a o
   angulo e --alfa o brilho, interpolado entre a tampa (ou a base) e a parede
   vizinha -- e isso que faz o canto ler como curva e nao como chanfro. A
   faceta nasce como "topo" a apotema do centro do arco e gira */
.c3d-canto {
  position: absolute; width: var(--c3d-corda); height: var(--c3d-d);
  left: calc(50% - var(--c3d-corda) / 2); top: calc(50% - var(--c3d-d) / 2);
  background: rgba(240, 250, 252, var(--alfa));
  transform: translate(calc(var(--cx) * (var(--c3d-w) / 2 - var(--c3d-r))), calc(var(--cy) * (var(--c3d-h) / 2 - var(--c3d-r))))
             rotateZ(var(--a)) rotateX(90deg) translateZ(var(--c3d-apotema));
}
/* sombra no chao: 6px abaixo da base, ancora a caixa no espaco */
.c3d-chao {
  position: absolute; left: -22%; width: 144%; height: var(--c3d-d); top: calc(50% - var(--c3d-d) / 2);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 23, 29, .75), transparent 72%);
  transform: rotateX(-90deg) translateZ(calc(var(--c3d-h) / 2 + 6px));
}
/* o conteudo: lockup de fundo ESCURO (claro por dentro), brilhando atraves do
   vidro. No MEIO da caixa e mais estreito que ela: fundo demais, a paralaxe
   da rotacao o empurrava contra a parede e parecia cortado. object-fit em
   vez de max-width: numa grade o trilho cresce ate a largura natural da
   imagem e o lockup estourava a caixa */
.c3d-dentro {
  position: absolute; inset: 22% 17%;
  transform: translateZ(0);
}
.c3d-dentro img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 14px rgba(127, 227, 236, .55)); }
/* === /vitrine === */

/* === painel ===
   Um cartao em destaque pairando sobre uma base de vidro -- o gesto do video
   do Docs, em que o painel do produto flutua na frente da pagina. Tres camadas
   em profundidade: a base, um cartao de apoio em vidro e o cartao branco com
   o asset, cuja sombra cai no de tras. Tudo com o canto do tile do logo (19%
   do lado menor). A luz vem de cima a esquerda; o brilho turquesa do site
   entra pelo canto superior direito; a nuvem de pixel dissolve embaixo. */
.c3d-painel { --c3d-w: 440px; --c3d-h: 270px; --c3d-r: calc(var(--c3d-h) * .19); }
.c3d-painel .c3d-idle { transform: rotateX(14deg) rotateY(-17deg); }
.c3d-painel .c3d-base-painel {
  position: absolute; left: 50%; top: 50%; width: var(--c3d-w); height: var(--c3d-h);
  margin: calc(var(--c3d-h) / -2) 0 0 calc(var(--c3d-w) / -2); border-radius: var(--c3d-r);
  background: var(--c3d-vidro); border: 1px solid var(--c3d-borda);
  box-shadow: 0 34px 80px rgba(0, 23, 29, .6), inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -30px 60px rgba(0, 23, 29, .28);
  transform-style: preserve-3d;
}
/* a pele: o que fica NA base (brilho, reflexo, nuvem de pixel) -- plana e
   recortada no canto; a base continua preserve-3d para os cartoes acima */
.c3d-painel .c3d-pele { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.c3d-painel .c3d-pele::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 70% at 100% 0%, rgba(9, 139, 166, .45), transparent 70%);
}
.c3d-painel .c3d-pele::after { content: ""; position: absolute; inset: 0; background: var(--c3d-brilho); }
.c3d-painel .c3d-nuvem {
  position: absolute; inset: 0; color: rgba(127, 227, 236, .34);
  background-image: conic-gradient(at 2px 2px, currentColor 25%, transparent 0); background-size: 9px 9px;
  -webkit-mask-image: radial-gradient(55% 75% at 8% 100%, #000, transparent 70%);
  mask-image: radial-gradient(55% 75% at 8% 100%, #000, transparent 70%);
}
/* cartao de apoio: vidro mais claro, um degrau acima da base, com o icone
   oficial em marca-d'agua */
.c3d-painel .c3d-apoio {
  position: absolute; left: 8%; top: 13%; width: 58%; height: 72%; border-radius: calc(var(--c3d-h) * .72 * .19);
  background: linear-gradient(135deg, rgba(226, 246, 249, .16), rgba(11, 90, 106, .18));
  border: 1px solid rgba(255, 255, 255, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 18px 40px rgba(0, 23, 29, .35);
  transform: translateZ(34px);
}
.c3d-painel .c3d-marca-dagua { position: absolute; left: 7%; top: 12%; height: 76%; width: auto; opacity: .14; }
/* o cartao em destaque, branco, com o asset -- e a sombra que ele projeta no de tras */
.c3d-painel .c3d-flutua, .c3d-painel .c3d-sombra-flutua {
  position: absolute; left: 40%; top: 24%; width: 50%; height: 60%; border-radius: calc(var(--c3d-h) * .6 * .19);
}
.c3d-painel .c3d-sombra-flutua { background: rgba(0, 23, 29, .6); filter: blur(18px); transform: translate(22px, 34px) translateZ(36px); }
.c3d-painel .c3d-flutua {
  background: linear-gradient(180deg, #ffffff, var(--c3d-gelo)); padding: 9% 10%;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(11, 90, 106, .10);
  transform: translateZ(88px);
}
.c3d-painel .c3d-flutua img { width: 100%; height: 100%; object-fit: contain; }
/* === /painel === */

/* === movimento ===
   So quem NAO pediu menos movimento ve animacao. Velocidades lentas:
   volta completa em 48 s, oscilacoes de 14-16 s. Nada pisca. */
@media (prefers-reduced-motion: no-preference) {
  .c3d-marca .c3d-idle    { animation: c3d-oscila-marca 14s ease-in-out infinite alternate; }
  .c3d-orbita .c3d-giro   { animation: c3d-gira 48s linear infinite; }
  .c3d-orbita .c3d-tile-p { animation: c3d-contragira 48s linear infinite; }
  .c3d-anel-2 .c3d-giro, .c3d-anel-2 .c3d-tile-p { animation-duration: 64s; animation-direction: reverse; }
  .c3d-vitrine .c3d-idle  { animation: c3d-oscila-vitrine 16s ease-in-out infinite alternate; }
  .c3d-painel .c3d-flutua { animation: c3d-flutua 7s ease-in-out infinite alternate; }
}
/* o botao de pausa da pagina (WCAG 2.2.2): congela no quadro atual */
[data-movimento="pausado"] .c3d * { animation-play-state: paused !important; }

@keyframes c3d-oscila-marca   { from { transform: rotateX(10deg) rotateY(-24deg); } to { transform: rotateX(8deg) rotateY(-8deg); } }
@keyframes c3d-oscila-vitrine { from { transform: rotateX(8deg) rotateY(-23deg); }  to { transform: rotateX(8deg) rotateY(-9deg); } }
@keyframes c3d-flutua         { from { transform: translateZ(70px); } to { transform: translateZ(90px); } }
@keyframes c3d-gira           { to { transform: rotateY(360deg); } }
@keyframes c3d-contragira {
  from { transform: rotateY(calc(-1 * var(--t)))          rotateX(calc(-1 * var(--c3d-ax))); }
  to   { transform: rotateY(calc(-1 * var(--t) - 360deg)) rotateX(calc(-1 * var(--c3d-ax))); }
}
/* === /movimento === */