/* TRANSIÇÕES ENTRE PÁGINAS (etapa 4, 09/11/2026) — static/js/transicoes.js decide o TIPO de cada navegação.
   View Transitions entre documentos (@view-transition) onde o navegador tem; sem suporte (ou site e sistema em domínios
   diferentes) = camada .vt-saida na página que sai (só no site/login). Só transform / opacity / clip-path.
   prefers-reduced-motion = nada anima. Tipos (html[data-vt]):
     sistema     → páginas do sistema logado: topo e menu PARADOS, só o conteúdo (<main>) troca
     ir-login    → site → login: círculo da marca abre a partir do botão "Entrar"
     ir-cadastro → site → cadastro de currículo: a página nova entra varrendo da direita, em diagonal
   Voltar para o site (login → site) = cortinas FECHANDO no login (.vt-saida[data-ir=site], sempre) e o site chega com a
   ABERTURA abrindo as mesmas cortinas (site_abertura.css) — encadeado, sem View Transition no meio (não pisca duas vezes).
   Para DESLIGAR tudo: tirar o <link>/<script> de transicoes.* dos templates (ou a linha @view-transition abaixo).
   VARREDURA FINAL (09/11/2026): site → login/cadastro = SEMPRE a camada .vt-saida (círculo/diagonal) e o login/cadastro chega
   com a ABERTURA própria com o logo (aberturas.css) — igual no mesmo domínio e entre domínios. As RÁPIDAS com o logo
   (página do sistema, abas, âncoras do site, telas irmãs do login) usam a constante central --vq-dur abaixo. */
:root {
  /* ===== DURAÇÃO DAS TRANSIÇÕES RÁPIDAS COM O LOGO (usuário 09/11/2026: "ter tempo de VER o logo" e, no extra 5,
     "logo ~0,6 s → ícone + nome do destino ~0,8 s", total 1,4–1,8 s) =====
     Vale para: troca de página do painel (logo girando → ícone + nome), troca de abas (logo deslizando → ícone + nome da
     aba), âncoras do site (logo desenhado por clip-path) e telas irmãs do login (pulso/carimbo/chave). As fases são % desta
     duração. Achou lento no dia a dia? Baixe AQUI (ex.: 1s) — o JS lê este mesmo valor. A página nova carrega POR BAIXO;
     clique/tecla pula na hora. */
  --vq-dur: 1.6s;
  --vt-rapida: 180ms;
  --vt-media: 280ms;
  --vt-lenta: 560ms;
  --vt-curva: cubic-bezier(.16, 1, .3, 1);
  --vt-curva-sai: cubic-bezier(.55, .05, .4, 1);
  --vt-marca: var(--brand, #008080);
  --vt-marca-escura: var(--brand-darker, #006666);
  --vt-marca-luz: #4da6a6;
  --vt-x: 50%;
  --vt-y: 50%;
}

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ------------------------------------------------------------ SISTEMA LOGADO: topo/menu parados, conteúdo troca */
/* os nomes só existem DURANTE a transição (html.vt-nav): view-transition-name fixo criaria contexto de empilhamento no
   <main> e as janelas (modais) de dentro ficariam atrás do fundo escuro do Bootstrap. */
html.vt-nav body > header.topbar { view-transition-name: vt-topo; }
html.vt-nav .admin-sidebar { view-transition-name: vt-menu; }
html.vt-nav body > main { view-transition-name: vt-conteudo; }
html.vt-nav #global-loader { view-transition-name: vt-loader; }

html[data-vt="sistema"]::view-transition-group(vt-topo),
html[data-vt="sistema"]::view-transition-group(vt-menu),
html[data-vt="sistema"]::view-transition-old(vt-topo),
html[data-vt="sistema"]::view-transition-new(vt-topo),
html[data-vt="sistema"]::view-transition-old(vt-menu),
html[data-vt="sistema"]::view-transition-new(vt-menu) { animation: none; }
html[data-vt="sistema"]::view-transition-group(vt-conteudo) { animation: none; }
html[data-vt="sistema"]::view-transition-old(vt-conteudo) { animation: vtConteudoSai var(--vt-rapida) var(--vt-curva-sai) both; mix-blend-mode: normal; }
html[data-vt="sistema"]::view-transition-new(vt-conteudo) { animation: vtConteudoEntra var(--vt-media) var(--vt-curva) both; mix-blend-mode: normal; }
/* o overlay padrão fica POR CIMA de tudo e não pisca (old e new iguais quando os dois estão à vista) */
html[data-vt="sistema"]::view-transition-group(vt-loader) { z-index: 50; animation-duration: var(--vt-rapida); }
html[data-vt="sistema"]::view-transition-old(root),
html[data-vt="sistema"]::view-transition-new(root) { animation-duration: var(--vt-rapida); }
@keyframes vtConteudoSai { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtConteudoEntra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ ANIMAÇÃO RESERVA (sem View Transition de verdade)
   Mesma entrada do conteúdo, aplicada por JS (html.vt-reserva, retirada em 0,7 s). Sem JS a classe não existe = visível. */
html.vt-reserva body > main,
html.vt-reserva .login-side-form { animation: vtConteudoEntra var(--vt-media) var(--vt-curva) both; }

/* ------------------------------------------------------------ SITE → LOGIN: círculo abrindo do botão "Entrar" */
html[data-vt="ir-login"]::view-transition-old(root) { animation: vtSiteRecua var(--vt-lenta) var(--vt-curva) both; mix-blend-mode: normal; }
html[data-vt="ir-login"]::view-transition-new(root) { animation: vtCirculoAbre var(--vt-lenta) var(--vt-curva) both; mix-blend-mode: normal; }
@keyframes vtSiteRecua { to { opacity: .35; transform: scale(.96); } }
@keyframes vtCirculoAbre { from { clip-path: circle(0% at var(--vt-x) var(--vt-y)); } to { clip-path: circle(150% at var(--vt-x) var(--vt-y)); } }

/* ------------------------------------------------------------ SITE → CADASTRO: varredura diagonal da direita */
html[data-vt="ir-cadastro"]::view-transition-old(root) { animation: vtSiteDesliza var(--vt-lenta) var(--vt-curva) both; mix-blend-mode: normal; }
html[data-vt="ir-cadastro"]::view-transition-new(root) { animation: vtVarreDireita var(--vt-lenta) var(--vt-curva) both; mix-blend-mode: normal; }
@keyframes vtSiteDesliza { to { opacity: .4; transform: translateX(-8%); } }
@keyframes vtVarreDireita { from { clip-path: polygon(100% 0, 130% 0, 130% 100%, 115% 100%); transform: translateX(30px); }
                            to { clip-path: polygon(-30% 0, 130% 0, 130% 100%, -15% 100%); transform: none; } }

/* ------------------------------------------------------------ SEM View Transitions (ou outro domínio): camada na página que sai */
.vt-saida { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; }
.vt-saida[data-ir="login"] { background: linear-gradient(135deg, var(--vt-marca-escura), var(--vt-marca) 60%, var(--vt-marca-luz));
  animation: vtCirculoAbre var(--vt-media) var(--vt-curva-sai) both; }
.vt-saida[data-ir="cadastro"] { background: linear-gradient(120deg, var(--vt-marca-escura), var(--vt-marca));
  animation: vtVarreDireita var(--vt-media) var(--vt-curva-sai) both; }
/* voltar ao site = cortinas FECHANDO (o site chega com a abertura abrindo as mesmas cortinas — site_abertura.css) */
.vt-saida[data-ir="site"]::before,
.vt-saida[data-ir="site"]::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50.5%;
  background: linear-gradient(135deg, var(--vt-marca-escura), var(--vt-marca)); animation: vtCortinaFechaE var(--vt-media) var(--vt-curva-sai) both; }
.vt-saida[data-ir="site"]::before { left: 0; }
.vt-saida[data-ir="site"]::after { right: 0; animation-name: vtCortinaFechaD; }
@keyframes vtCortinaFechaE { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes vtCortinaFechaD { from { transform: translateX(100%); } to { transform: none; } }

/* ------------------------------------------------------------ CAMADA DA TROCA DE PÁGINA (#vqCamada — extra 6, decisão final)
   Camada PRÓPRIA (o #global-loader não muda): só no clique de navegação para outra tela do painel, recarregar, voltar/avançar
   e na aba que busca dados. Fica POR CIMA do overlay de hoje (z-index 100000 > 99999 — os dois nunca aparecem juntos):
     fase 1 (~0,7 s): o V da Vencer GIRANDO num disco de vidro · fase 2: cartão de vidro com "Indo para" + ÍCONE + NOME + pontinhos,
   até a página nova ficar pronta (transicoes.js); lenta = "Aguarde mais um pouco" (.vq-lenta); sai com .vq-saindo.
   --vq-desde (negativo) = o tempo desde o clique (a fase 1 não repete na página que chega). Só transform/opacity. */
.vq-camada { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, rgba(15, 118, 110, .9) 0%, rgba(0, 128, 128, .88) 55%, rgba(20, 184, 166, .86) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
.vq-camada > .vq-fase1, .vq-camada > .vq-fase2 { grid-area: 1 / 1; }
.vq-camada .vq-fase1 { width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .7); border: 1.5px solid rgba(255, 255, 255, .95);
  box-shadow: 0 18px 48px -16px rgba(0, 40, 40, .55), inset 0 1px 0 rgba(255, 255, 255, .95);
  animation: vqCamLogo .72s var(--vt-curva) var(--vq-desde, 0ms) both; }
.vq-camada .vq-fase1 svg { width: 72px; height: auto; overflow: visible; animation: vqCamGira .6s var(--vt-curva) var(--vq-desde, 0ms) both; }
.vq-camada .vq-v { fill: var(--vt-marca); }
.vq-camada .vq-arco { fill: none; stroke: var(--ouro, #f5b942); stroke-width: 3.4; stroke-linecap: round; }
.vq-camada .vq-fase2 { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: min(260px, 80vw);
  max-width: min(86vw, 380px); padding: 22px 30px 18px; border-radius: 24px; text-align: center; background: rgba(255, 255, 255, .95);
  border: 1.5px solid #fff; box-shadow: 0 22px 56px -18px rgba(0, 40, 40, .6);
  animation: vqCamNome .4s var(--vt-curva) calc(.62s + var(--vq-desde, 0ms)) both; }
.vq-camada.vq-sem-nome .vq-fase2 { visibility: hidden; }
.vq-destino .vq-icone { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--vt-marca-escura), var(--vt-marca)); color: #fff; font-size: 25px;
  box-shadow: 0 8px 18px -8px rgba(0, 80, 80, .7); }
.vq-destino .vq-nome { color: var(--vt-marca-escura); font: 800 1.28rem/1.25 'Poppins', system-ui, sans-serif; letter-spacing: -.01em;
  overflow-wrap: anywhere; }
.vq-camada .vq-indo { color: var(--vt-marca); font: 600 .78rem/1 'Poppins', system-ui, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; opacity: .85; }
.vq-camada .vq-pontos { display: inline-flex; gap: 6px; margin-top: 2px; }
.vq-camada .vq-pontos i { width: 7px; height: 7px; border-radius: 50%; background: var(--vt-marca); animation: vqPonto 1s ease-in-out infinite; }
.vq-camada .vq-pontos i:nth-child(2) { animation-delay: .15s; }
.vq-camada .vq-pontos i:nth-child(3) { animation-delay: .3s; }
.vq-camada .vq-aguarde { display: none; color: var(--vt-marca-escura); font: 600 .85rem/1.2 'Poppins', system-ui, sans-serif; }
.vq-camada.vq-lenta .vq-aguarde { display: block; animation: vqCamNome .3s var(--vt-curva) both; }
.vq-camada.vq-saindo { animation: vqCamSai .3s var(--vt-curva-sai) forwards; }
@keyframes vqCamLogo { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1.04); } 22% { transform: scale(1); }
                       86% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.7); } }
@keyframes vqCamGira { from { transform: perspective(500px) rotateY(-180deg); } to { transform: perspective(500px) rotateY(0); } }
@keyframes vqCamNome { from { opacity: 0; transform: scale(.82); } 70% { opacity: 1; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes vqPonto { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@keyframes vqCamSai { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ta-logo, .sp-chegada-logo { display: none !important; }
  .vq-camada .vq-fase1 { display: none; }
  .vq-camada .vq-fase2, .vq-camada .vq-pontos i, .vq-camada.vq-saindo, .vq-camada.vq-lenta .vq-aguarde { animation: none !important; opacity: 1; transform: none; }
  .vt-saida { display: none !important; }
  html.vt-reserva body > main, html.vt-reserva .login-side-form { animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* recarregar / voltar / 1ª entrada: enquanto a página é lida, o logo gira parado na fase 1 (.vq-espera); depois a linha do
   tempo começa do logo já à vista (.vq-depois-espera: sem piscar) — transicoes.js */
.vq-camada.vq-espera .vq-fase1 { opacity: 1; animation: none; }
.vq-camada.vq-espera .vq-fase1 svg { animation: vqCamGiraSempre 1.2s linear infinite; }
.vq-camada.vq-espera .vq-fase2 { opacity: 0; animation: none; }
.vq-camada.vq-depois-espera .vq-fase1 { animation-name: vqCamLogoSegue; }
@keyframes vqCamGiraSempre { from { transform: perspective(500px) rotateY(0); } to { transform: perspective(500px) rotateY(360deg); } }
@keyframes vqCamLogoSegue { 0%, 86% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) {
  .vq-camada.vq-espera .vq-fase2 { opacity: 1; }
  .vq-camada.vq-espera .vq-fase1 svg { animation: none; }
}