/* ============================================================================
   IDENTIDADE TPDPLAY — FOTO SEM BRIGAR COM O CONCEITO
   Depende de tokens.css.

   O ACHADO QUE DEFINE TUDO (medido em 21/08 no acervo do Marcio, 439 fotos):

       borda ESCURA .... 340 fotos ... 77%
       borda MEIO ......  49 fotos ... 11%
       borda CLARA .....  50 fotos ... 11%

   **77% do acervo ja nasce sobre fundo preto.** O Marcio fotografa assim ha
   anos. Isso vira a regra em vez de virar problema: a foto NAO precisa de
   moldura — ela precisa DISSOLVER na pagina. Moldura em foto que ja e preta
   e um retangulo desenhado em cima de nada.

   Tres tratamentos, um por tipo de borda. Nao inventar um quarto.
   ========================================================================= */

/* --- 1. FUSAO + AURA — para os 77% (borda escura) ---------------------

   🔴 A RAZAO, e ela nao e estetica (HB, 21/08):
   **Nenhum dente foi feito pra ter algo claro atras.** O protetico fotografa
   no escuro justamente pra reproduzir a CAVIDADE BUCAL do paciente — e a peca
   foi pensada pra ser vista assim. Fundo claro atras de um dente causa
   estranheza imediata em quem entende de protese.

   Entao a aura nao e enfeite: e o contexto natural da peca. E ela resolve
   um segundo problema de graca — **um recorte imperfeito some dentro dela**.
   Chuvisco preto contra escuro ninguem ve. Perseguir recorte cirurgico aqui
   e briga desnecessaria.

   COMO SE FAZ:
     1. `ferramentas/fundir-preto.py foto.jpg`  -> assa o alfa
     2. envolve em `.foto-aura` e usa `.foto-fusao` na imagem              */
.foto-aura { position: relative; display: block; }
.foto-aura::before {                     /* a cavidade: mais densa EMBAIXO */
  content: ""; position: absolute; z-index: 0;
  inset: -18% -14% -24% -14%;
  background:
    radial-gradient(ellipse 58% 52% at 50% 62%,
      rgba(0,0,0,.92) 0%, rgba(0,0,0,.74) 40%,
      rgba(1,6,11,.34) 70%, rgba(5,18,28,0) 100%),
    radial-gradient(ellipse 74% 66% at 50% 46%,
      rgba(1,5,10,.58) 0%, rgba(2,9,16,.26) 62%, rgba(5,18,28,0) 100%);
  pointer-events: none;
}
.foto-aura > * { position: relative; z-index: 1; }

/* .boca - a aura FUNDA, pra peca que vive dentro de um comparador (a
   cortina do BL-03). A aura normal foi feita pra foto solta respirando na
   secao; ali dentro ela some, porque a imagem cobre quase toda a caixa e o
   pouco que sobra fica igual ao fundo da pagina.
   Aqui o preto e mais denso e mais fechado, com uma vinheta por cima: o
   entorno tem que ler como CAVIDADE - fundo de boca - e nao como recorte
   pousado num retangulo azul. Continua degrade, nunca borda dura.       */
/*   ARMADILHA PROVADA (21/08): a 1a versao usava elipses de 98% x 88% dentro
     de uma caixa com inset de -10%. A elipse ainda tinha alfa quando batia na
     borda do ::before - e degrade que nao chegou em zero CORTA. Na tela
     apareceu um retangulo escuro de bordas duras atras da peca: o oposto de
     cavidade, que nao tem borda nenhuma.
     Regra: a caixa cresce (inset maior) e o degrade tem que MORRER antes
     dela (transparent em ~85%). Melhor sobrar caixa que faltar queda.    */
/*   O ACERTO E ENTRE DUAS FALHAS, as duas medidas na tela:
       elipse grande demais (98%) -> nao chega em zero e CORTA em retangulo
       elipse pequena demais (50%) -> o preto fica todo atras da peca e a
                                      margem visivel quase nao escurece
                                      (luz 14,1 contra 16,0 do fundo: nada)
     O raio tem que terminar DENTRO da caixa e ainda assim alcancar a borda
     da figura. Com a caixa 26% maior que a figura, isso e ~58% de raio.  */
.foto-aura.boca::before {
  inset: -14% -12% -20% -12%;
  background:
    radial-gradient(ellipse 58% 54% at 50% 58%,
      rgba(0,0,0,.96) 0%, rgba(0,0,0,.88) 42%,
      rgba(0,0,0,.52) 70%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 72% 66% at 50% 50%,
      rgba(0,0,0,.50) 0%, rgba(0,0,0,.20) 60%, rgba(0,0,0,0) 100%);
}

.foto-fusao { display: block; width: 100%; height: auto; }

/* sangria lateral: a foto morre pro lado do texto (composicao, nao conserto —
   o alfa do arquivo ja tirou o preto)                                      */
.foto-fusao.para-esquerda {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
}
.foto-fusao.para-direita {
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 34%, #000 100%);
  mask-image: linear-gradient(270deg, transparent 0%, #000 34%, #000 100%);
}

/* desvanecimento de BORDA — some com o corte da foto, nao com o fundo.
   ARMADILHA PROVADA (21/08): medi a foto do dente e 73,8% do quadro passa de
   luminancia 20, praticamente sem mudar ate 80. Traducao: a PECA ocupa 3/4 do
   quadro e e CORTADA pela moldura da foto. A borda que aparecia nao era fundo
   sobrando — era a peca cortada. Alfa nenhum conserta isso; so composicao.  */
.foto-fusao {
  -webkit-mask-image: radial-gradient(ellipse 92% 90% at 50% 50%,
    #000 46%, rgba(0,0,0,.86) 68%, rgba(0,0,0,.35) 86%, transparent 100%);
  mask-image: radial-gradient(ellipse 92% 90% at 50% 50%,
    #000 46%, rgba(0,0,0,.86) 68%, rgba(0,0,0,.35) 86%, transparent 100%);
}

/* --- 1b. RETRATO — o fundo E parte da foto ---------------------------
   ARMADILHA PROVADA (21/08): tratei retrato como peca e ficou pessimo — a
   aura de cavidade bucal atras de um ROSTO nao faz sentido nenhum, e somada
   a mascara lateral virou duas manchas brigando.
   Medindo: o fundo do retrato tem mediana 27, nao e preto — e um cinza de
   estudio, e ele FAZ PARTE do retrato. Recortar ali e errado por natureza.
   Retrato nao leva alfa e nao leva aura: leva so desvanecimento de borda.  */
.foto-retrato {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(ellipse 84% 88% at 50% 44%,
    #000 40%, rgba(0,0,0,.9) 62%, rgba(0,0,0,.45) 82%, transparent 100%);
  mask-image: radial-gradient(ellipse 84% 88% at 50% 44%,
    #000 40%, rgba(0,0,0,.9) 62%, rgba(0,0,0,.45) 82%, transparent 100%);
}

/* --- 2. JANELA — para os 11% de borda CLARA ---------------------------
   Aqui a moldura e HONESTA: a foto tem fundo proprio e claro, entao ela e
   uma JANELA para outro lugar (o laboratorio, o dia de trabalho). Assumir
   isso e melhor que tentar dissolver e falhar no meio.                    */
.foto-janela {
  display: block; width: 100%; height: auto;
  border-radius: 16px;
  border: 1px solid rgba(159,196,218,.16);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.foto-janela.reage { transition: transform .3s var(--curva), box-shadow .3s var(--curva); }
.foto-janela.reage:hover { transform: translateY(-3px);
                           box-shadow: 0 30px 70px rgba(0,0,0,.6); }

/* --- 3. VINHETA — para os 11% do MEIO --------------------------------
   Foto com metade escura e metade clara (peca sobre modelo de gesso, por
   exemplo). Nao dissolve sozinha e nao merece moldura. Leva uma queda de luz
   nas bordas, que escurece so o suficiente pra o retangulo sumir.         */
.foto-vinheta { position: relative; display: block; overflow: hidden;
                border-radius: 14px; }
.foto-vinheta img { display: block; width: 100%; height: auto; }
.foto-vinheta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 82% 80% at 50% 46%,
      transparent 40%, rgba(5,18,28,.42) 72%, rgba(5,18,28,.92) 100%),
    linear-gradient(0deg, rgba(5,18,28,.55) 0%, transparent 34%);
}

/* --- legenda: a foto de trabalho SEMPRE tem dono ---------------------- */
.foto-credito {
  margin: var(--e2) 0 0;
  font-size: var(--t-rotulo); color: var(--texto-2);
}
.foto-credito b { color: var(--texto); font-weight: 600; }

/* ============================================================================
   AS REGRAS (nao sao gosto)

   . NUNCA texto por cima de foto sem veu. Foto tem contraste proprio e
     imprevisivel — o mesmo problema do fundo animado: voce mede um ponto e
     erra no outro. Se precisar de texto sobre foto, use `.veu` e AUDITE.
   . Foto de trabalho leva CREDITO. A peca e de alguem, e esse alguem
     enxerga nuance que a gente nao ve. Ver `nunca-alterar-trabalho-de-protetico`.
   . NAO tratar a cor da peca. Nada de "realce", filtro, saturacao. Recorte,
     mascara e vinheta mexem no ENTORNO; a peca sai como entrou.
   . Uma foto por secao. Duas competem, e a segunda perde.
   . DENTE FLUTUANDO SEMPRE LEVA AURA. Sem excecao — mas RETRATO NAO LEVA.
     Cavidade bucal atras de um rosto e absurdo. Retrato usa `.foto-retrato`.
     Aura e para PECA. Peca sobre claro causa
     estranheza imediata em quem entende de protese — e o protetico e o
     publico. A aura tambem cobre imperfeicao de recorte, entao ela paga
     duas contas de uma vez.
   ========================================================================= */