/* ==========================================================================
   Seção: SOBRE MIM — ABERTURA
   A arte aprovada (olhos + selo do cão) com os olhos vivos.
   Os olhos são um rig em canvas (js/sections/sobre-olhos.js): íris separada
   que se move com sacadas humanas, pálpebras que descem de verdade levando a
   linha dos cílios, piscada e brilho dinâmico.
   Clique no brasão → os olhos se fecham → tudo apaga → GENJUTSU: o Mangekyō
   aparece no escuro → a câmera mergulha na pupila e a seção aparece por ela.
   Só existe com JS (classe .com-revelar); sem JS a seção aparece direto.
   Depende de sobre.css (tokens --sm-*, keyframes sm-gira).
   ========================================================================== */
.sobre.selada { height: 100vh; height: 100svh; }
.sobre.selada .in, .sobre.selada .revela, .sobre.selada .enso { animation-play-state: paused; }

/* a seção fica abaixo do hero: a entrada da abertura espera ela aparecer na tela
   (.aguarda sai pelo IntersectionObserver em js/sections/sobre.js) */
.sobre.aguarda .olhos,
.sobre.aguarda .revelar__letreiro,
.sobre.aguarda .revelar__ui { animation-play-state: paused; }

/* palco ainda não montado: sobre.js tira .palco-dormindo quando o visitante chega à seção
   (ou encosta no brasão). Antes disso o navegador não monta nem baixa nada dele. */
.sobre.palco-dormindo .sobre__stage { content-visibility: hidden; }

.revelar { display: none; }
.sobre.com-revelar .revelar {
  display: block;
  position: absolute; left: 0; right: 0; top: 0;
  height: 100vh; height: 100svh;
  z-index: 60;
  background: #000;
  overflow: hidden;
  /* ENQUADRAMENTO
     --ah  altura da arte na tela (a arte é 3:2)
     --lf  letra do letreiro "Quem se esconde" (escala do título do Portfólio,
           menor em janela baixa); --lh é a altura do bloco do letreiro
     --respiro  espaço livre entre o TOPO DO CABELO e o letreiro. O cabelo fica
           visível a partir de 2,5% da altura da arte (medido na imagem); antes
           o respiro contava da testa (12,7%) e o texto encostava nos fios —
           o Victor reclamou duas vezes ("texto muito próximo da cabeça")
     --ui  botão (mesma medida do .revelar__botao) + dica + os 10px acima dele +
           folga para o símbolo do divisor, que sobe ~15px a partir da emenda
     --at  topo da arte: centraliza letreiro + respiro + arte + botão na altura útil
     A altura útil (--vh) desconta a navbar fixa do site (--nav-h).
     Conjunto: letreiro (--lh) + respiro (.10 ah) + arte do cabelo ao punho
     (.918 − .025 = .893 ah) + botão (--ui) → a arte é limitada por (… ) / .993.
     Mais espaço: subir o .10 do --respiro e somar a mesma diferença no .993. */
  --nav: var(--nav-h, 0px);
  --vh: calc(100svh - var(--nav));
  --lf: clamp(28px, min(4.4vw, 7vh), 76px);
  --lh: calc(var(--lf) * 2.2);      /* ensō que sobra acima (.35em) + título (1em) + espaço + linha pequena */
  --ui: calc(clamp(62px, 5.2cqw, 84px) + 52px);
  --ah: min(calc(var(--vh) * .78), 64cqw, calc((var(--vh) - var(--ui) - var(--lh) - 12px) / .993));
  --respiro: calc(var(--ah) * .10);
  --at: calc(var(--nav) + var(--vh) / 2 - (.943 * var(--ah) + var(--ui) - var(--lh) - var(--respiro)) / 2);
}

.revelar__cena { position: absolute; inset: 0; }
.revelar__vinheta {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .8) 100%);
  z-index: 2; pointer-events: none;
}

/* a arte inteira (1536×1024): olhos na linha y=23,4%, pupilas a 25,2% da largura uma da outra */
.olhos {
  position: absolute; left: 50%; top: var(--at);
  height: var(--ah); aspect-ratio: 3 / 2;
  translate: -50% 0;
  transform-origin: 50% 30%;
  transform: translate(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -8px));
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
  animation: rv-cena-entra 1.6s ease .1s both, rv-respira 6s ease-in-out 1.8s infinite alternate;
}
/* camadas: corpo (base/canvas: rosto + cabelo, sem os braços) → braços da pose
   inicial (.olhos__maos) → braços no selo (.olhos__selo, só no clique).
   Saem de originais/sobre/rig-abertura/selo/separa-maos.js */
.olhos__base, .olhos__canvas, .olhos__maos, .olhos__selo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* mangas e punho somem no escuro */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%), linear-gradient(to bottom, #000 89%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%), linear-gradient(to bottom, #000 89%, transparent 100%);
          mask-composite: intersect;
}
.olhos.pronto .olhos__base { visibility: hidden; }
.olhos__maos, .olhos__selo { transform-origin: 50% 100%; pointer-events: none; }
/* mão da pose inicial um pouco menor, no porte das mãos do selo (pedido do cliente:
   "diminui um pouquinho essa mão pra ficar parecida com a outra"). A camada inteira
   encolhe pelo pé, com a máscara junto: as mangas continuam chegando embaixo e
   sumindo nas bordas. 84%: a 88% ainda ficava maior que o selo; a 82% já igualava. */
.olhos__maos { scale: .84; }
.olhos__selo { opacity: 0; }

.revelar__flash {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(34% 24% at 50% calc(var(--at) + var(--ah) * .234), rgba(255, 30, 30, .5), rgba(140, 0, 0, .14) 55%, transparent 80%);
  mix-blend-mode: screen;
  opacity: 0;
}

/* letreiro "Quem se esconde / por trás dessa sessão?": o MESMO título das outras
   seções (componente titulo-secao: Cinzel + textura + ensō) e a linha pequena no
   estilo do "ICARO —— TATUADOR" do Sobre. O Victor pediu igual aos outros títulos
   (antes era uma arte de pincel, hoje em originais/sobre/titulos-anteriores/).
   A base do bloco fica --respiro acima do topo do cabelo: o translate -100% alinha pela base. */
.revelar__letreiro {
  position: absolute; left: 50%;
  top: calc(var(--at) + var(--ah) * .025 - var(--respiro));   /* base do bloco: respiro acima do topo do cabelo */
  translate: -50% -100%;
  margin: 0;
  display: grid; justify-items: center; gap: .5em;
  font-size: var(--lf);
  z-index: 3;
  animation: rv-entra 1.6s cubic-bezier(.2, .7, .2, 1) .5s both;
}
.revelar__kicker {
  display: flex; align-items: center; gap: .9em;
  font: 500 max(10px, .3em)/1 var(--sm-body);
  letter-spacing: .42em; padding-left: .42em;
  text-transform: uppercase;
  color: var(--sm-bone);
  white-space: nowrap;
}
.revelar__kicker i { width: 2.4em; height: 1px; background: var(--sm-line); }
.revelar__kicker b { font-weight: 500; color: var(--sm-blood); }

.revelar__ui {
  position: absolute; left: 50%;
  top: calc(var(--at) + var(--ah) * .918 + 10px);
  translate: -50% 0;
  width: max-content;
  display: grid; justify-items: center; gap: 10px;
  z-index: 4;
  animation: rv-entra 1.2s cubic-bezier(.2, .7, .2, 1) 1.3s both;
}
.revelar__botao {
  position: relative;
  width: clamp(62px, 5.2cqw, 84px); aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(236, 229, 223, .22);
  border-radius: 50%;
  background: rgba(7, 5, 5, .72);
  color: var(--sm-blood);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .3s, transform .3s cubic-bezier(.2, .7, .2, 1);
}
.revelar__botao:hover { border-color: rgba(195, 18, 28, .7); transform: scale(1.06); }
.revelar__botao:active { transform: scale(.94); }
.revelar__botao:focus-visible { outline: 2px solid var(--sm-bone); outline-offset: 6px; }
.revelar__pulso {
  position: absolute; inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(195, 18, 28, .7);
  animation: rv-pulso 2.6s ease-out infinite;
  pointer-events: none;
}
.revelar__icone {
  position: absolute; inset: 22%; width: 56%; height: 56%;
  animation: sm-gira 16s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255, 30, 30, .7));
  transition: filter .3s;
}
.revelar__botao:hover .revelar__icone { animation-duration: 4s; filter: drop-shadow(0 0 12px rgba(255, 30, 30, .9)); }
.revelar__dica {
  margin: 0;
  font-family: var(--sm-body);
  font-size: clamp(10px, .75cqw, 13px);
  letter-spacing: .42em;
  padding-left: .42em;
  text-transform: uppercase;
  color: var(--sm-bone);
  opacity: .75;
}

/* ---- sequência do clique ----
   (animação, não transição: a animação de entrada mantém opacity 1 e ganharia de uma regra comum)
   SELO: as mãos da pose inicial descem e somem; as do selo sobem e travam no lugar.
   No impacto (.4s = SELO_IMPACTO em sobre.js) o Sharingan gira, a cena dá um tranco
   e as pálpebras descem. Peças inteiras se movendo, sem deformar o desenho. */
.sobre.fechando .revelar__ui { animation: rv-some .35s ease forwards; pointer-events: none; }
.sobre.fechando .revelar__letreiro { animation: rv-letreiro-some .8s ease .2s forwards; }
.sobre.fechando .olhos__maos { animation: rv-maos-sai .16s cubic-bezier(.5, 0, .9, .5) forwards; }
.sobre.fechando .olhos__selo { animation: rv-selo-entra .3s cubic-bezier(.16, .84, .3, 1) .11s both; }
.sobre.fechando .revelar__flash { animation: rv-flash .8s ease-out .4s both; }
.sobre.fechando .revelar__cena { animation: rv-tranco .32s linear .4s both; }
.revelar__apagao {
  position: absolute; inset: 0; z-index: 5;
  background: #000;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.sobre.apagando .revelar__apagao { opacity: 1; }
.sobre.em-genjutsu .revelar__cena, .sobre.em-genjutsu .revelar__ui { visibility: hidden; }

/* ---- GENJUTSU: o Mangekyō no escuro ---- */
.genjutsu {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center;
  visibility: hidden; pointer-events: none;
  --gd: min(62vmin, 600px);                  /* tamanho do Mangekyō */
}
.sobre.em-genjutsu .genjutsu { visibility: visible; pointer-events: auto; cursor: pointer; }
.genjutsu > * { grid-area: 1 / 1; }
.genjutsu__atmosfera {                       /* o escuro fica vermelho: o mundo do genjutsu */
  position: absolute; inset: 0;
  background:
    radial-gradient(closest-side at 50% 50%, rgba(120, 0, 8, .5), rgba(60, 0, 4, .32) 55%, transparent 100%),
    radial-gradient(150% 120% at 50% 50%, transparent 40%, rgba(40, 0, 2, .55) 100%);
  opacity: 0;
}
.genjutsu__ondas { position: absolute; inset: 0; display: grid; place-items: center; }
.genjutsu__ondas i {
  grid-area: 1 / 1;
  width: var(--gd); aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(225, 20, 30, .55);
  box-shadow: 0 0 18px rgba(225, 20, 30, .35), inset 0 0 18px rgba(225, 20, 30, .25);
  opacity: 0;
}
.genjutsu__zoom {
  position: relative;
  width: var(--gd); aspect-ratio: 1;
  will-change: transform;
}
.genjutsu__zoom::before {                    /* brilho vermelho atrás do olho */
  content: ""; position: absolute; inset: -30%;
  background: radial-gradient(closest-side, rgba(235, 15, 25, .55), rgba(150, 0, 10, .22) 58%, transparent 100%);
  opacity: 0;
  transition: opacity .3s ease;
}
.genjutsu__giro { position: absolute; inset: 0; }
.genjutsu__olho { display: block; width: 100%; height: 100%; opacity: 0; }
.genjutsu__kanji {
  position: absolute; left: 50%; top: calc(50% + var(--gd) / 2 + 3.2vmin);
  translate: -50% 0;
  margin: 0;
  font-family: var(--sm-jp); font-weight: 700;
  font-size: clamp(16px, 2.8vmin, 30px);
  letter-spacing: .6em; padding-left: .6em;
  color: var(--sm-blood);
  text-shadow: 0 0 16px rgba(255, 20, 20, .55);
  opacity: 0;
}
/* tempos encurtados a pedido do Victor (o genjutsu inteiro dura ~1,3s antes do mergulho) */
.sobre.em-genjutsu .genjutsu__atmosfera { animation: gj-atmosfera 1.6s ease-out both; }
.sobre.em-genjutsu .genjutsu__olho { animation: gj-entra .8s cubic-bezier(.12, .8, .2, 1) both; }
.sobre.em-genjutsu .genjutsu__zoom::before { animation: gj-brilho 1.4s ease-in-out .3s infinite alternate; }
.sobre.em-genjutsu .genjutsu__giro { animation: sm-gira 5s linear .5s infinite; }
.sobre.em-genjutsu .genjutsu__ondas i { animation: gj-onda 1.6s cubic-bezier(.2, .6, .3, 1) .25s infinite; }
.sobre.em-genjutsu .genjutsu__ondas i:nth-child(2) { animation-delay: .75s; }
.sobre.em-genjutsu .genjutsu__ondas i:nth-child(3) { animation-delay: 1.25s; }
.sobre.em-genjutsu .genjutsu__kanji { animation: gj-kanji 1s ease .35s both; }
/* mergulho na pupila (o zoom e o furo são feitos no js) */
.sobre.apresenta .genjutsu { pointer-events: none; }
.sobre.apresenta .genjutsu__ondas,
.sobre.apresenta .genjutsu__kanji,
.sobre.apresenta .genjutsu__atmosfera { animation: rv-some .35s ease forwards; }
.sobre.apresenta .genjutsu__zoom::before { animation: none; opacity: 0; }

@keyframes gj-atmosfera {
  0%   { opacity: 0; transform: scale(.6); }
  45%  { opacity: 1; }
  100% { opacity: .85; transform: none; }
}
@keyframes gj-entra {
  0%   { opacity: 0; transform: scale(.28) rotate(-600deg); filter: blur(10px); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes gj-brilho { from { opacity: .55; } to { opacity: 1; } }
@keyframes gj-onda {
  0%   { opacity: 0; transform: scale(.96); }
  12%  { opacity: .75; }
  100% { opacity: 0; transform: scale(2.5); }
}
@keyframes gj-kanji {
  from { opacity: 0; filter: blur(6px); letter-spacing: 1.4em; padding-left: 1.4em; }
  to   { opacity: .9; filter: none; }
}

@keyframes rv-cena-entra { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
@keyframes rv-respira { from { scale: 1; } to { scale: 1.014; } }
@keyframes rv-tranco {
  0%, 100% { transform: none; }
  20% { transform: translate(-0.5%, 0.35%); }
  40% { transform: translate(0.4%, -0.4%); }
  60% { transform: translate(-0.25%, 0.25%); }
  80% { transform: translate(0.15%, -0.1%); }
}
@keyframes rv-maos-sai {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(16%) scale(.97); }
}
@keyframes rv-selo-entra {
  0%   { opacity: 0; transform: translateY(24%) scale(.97); }
  30%  { opacity: 1; }
  75%  { transform: translateY(-.8%) scale(1.004); }
  100% { opacity: 1; transform: none; }
}
@keyframes rv-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rv-some { from { opacity: 1; } to { opacity: 0; } }
@keyframes rv-letreiro-some { from { opacity: 1; filter: none; } to { opacity: 0; filter: blur(3px); } }
@keyframes rv-entra {
  from { opacity: 0; transform: translateY(14px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes rv-pulso {
  0%   { transform: scale(1);   opacity: .9; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (max-width: 900px) {
  /* a arte fica mais larga que a tela (as mangas saem pelas bordas) para os olhos ficarem grandes */
  /* (o terceiro termo do --ah e o 7vh da letra: celular deitado, onde nada cabia) */
  .sobre.com-revelar .revelar {
    --lf: clamp(28px, min(9vw, 7vh), 52px);
    --ah: min(93cqw, calc(var(--vh) * .46), calc((var(--vh) - var(--ui) - var(--lh) - 12px) / .993));
  }
  .revelar__dica { font-size: 11px; letter-spacing: .3em; }
  .genjutsu { --gd: min(74vmin, 480px); }
}