/* ==========================================================================
   Título de seção — o conceito do "Sobre Mim"
   Cinzel 700 com a textura de pedra/papel recortada no texto e um ensō
   vermelho (círculo de pincel) que se desenha atrás da primeira letra.
   Pedido do Victor: usar o conceito do título do Sobre no Portfólio e nos
   Depoimentos. O Sobre continua com a versão original dele (em cqw, no
   sobre.css); este componente é a mesma receita em "em", para servir em
   qualquer seção. Cada seção só define o font-size e a posição.

   Marcação:
     <h2 class="titulo-secao …">
       <img class="titulo-secao__enso" src="assets/ui/titulo/enso.webp" alt="" aria-hidden="true">
       <span class="titulo-secao__sombra" aria-hidden="true">Título</span>
       <span class="titulo-secao__txt">Título</span>
     </h2>

   SOMBRA: é uma cópia do texto, sem cor, só com text-shadow, logo atrás das
   letras. Não usar filter (drop-shadow) no __txt: com background-clip:text o
   Safari do iPhone desenha a sombra da CAIXA inteira — virou um retângulo escuro
   atrás de "Depoimentos" no site publicado.
   As duas cópias ficam EMPILHADAS NA MESMA CÉLULA de uma grade (grid-area 1/1),
   não com position:absolute: com a cópia absoluta o Safari deslocou o título dos
   Depoimentos ~34px para a direita no celular ("título torto").

   Entrada: o ensō se desenha (1,8s) e o texto sobe quando o título aparece na
   tela (js/components/titulo-secao.js tira .ts-aguarda). Sem JS, toca ao carregar.
   A entrada só anima opacidade e posição; cada seção pode trocar o text-shadow
   da __sombra (os Depoimentos somam um halo para ler sobre a lua).
   ========================================================================== */

@property --ts-enso { syntax: "<angle>"; inherits: false; initial-value: 360deg; }

.titulo-secao{
  position:relative;
  isolation:isolate;
  display:grid;                    /* sombra e texto na mesma célula (ver SOMBRA acima) */
  justify-items:start;
  margin:0;
  font-family:"Cinzel","Trajan Pro","Times New Roman",serif;
  font-weight:700;
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
}

/* ensō: atrás da primeira letra, desenhado por uma máscara cônica (sem url) */
.titulo-secao__enso{
  position:absolute;
  left:-.32em;
  top:50%;
  width:1.62em;
  height:auto;
  max-width:none;
  translate:0 -52%;
  z-index:-1;
  pointer-events:none;
  -webkit-mask-image:conic-gradient(from 208deg,#000 var(--ts-enso),transparent calc(var(--ts-enso) + 1deg));
          mask-image:conic-gradient(from 208deg,#000 var(--ts-enso),transparent calc(var(--ts-enso) + 1deg));
  animation:ts-enso 1.8s cubic-bezier(.45,.05,.2,1) .25s both;
}

/* sombra: mesma letra, transparente, só o text-shadow (atrás do __txt) */
.titulo-secao__sombra{
  grid-area:1 / 1;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:0 .05em .28em rgba(0,0,0,.8);
  pointer-events:none;
  user-select:none;
  animation:ts-entra 1s cubic-bezier(.2,.7,.2,1) both;
}

/* texto com a textura do título do Sobre */
.titulo-secao__txt{
  grid-area:1 / 1;
  position:relative;               /* pinta depois (por cima) da __sombra */
  display:inline-block;
  background:url("../../assets/ui/titulo/textura-titulo.webp") center / cover, #ece5df;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:ts-entra 1s cubic-bezier(.2,.7,.2,1) both;
}

.titulo-secao.ts-aguarda .titulo-secao__enso,
.titulo-secao.ts-aguarda .titulo-secao__sombra,
.titulo-secao.ts-aguarda .titulo-secao__txt{ animation-play-state:paused; }

@keyframes ts-enso{ from{ --ts-enso:0deg; } to{ --ts-enso:360deg; } }
@keyframes ts-entra{
  from{ opacity:0; transform:translateY(.22em); }
  to  { opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .titulo-secao__enso,
  .titulo-secao__sombra,
  .titulo-secao__txt{ animation:none; }
}