/* SITE PÚBLICO — ABERTURA e navegação (etapa 4, 09/11/2026). Par de static/js/site_abertura.js + o <script> curto no <head>
   de site/index.html (liga html.sp-abrindo SÓ com JS, em TODA chegada à página, sem reduced-motion e fora do robô).
   Sem JS / sem a classe = .sp-abertura nem aparece (o site fica visível direto). Só transform / opacity / clip-path.
   Linha do tempo (< 2 s): 0–0,7 s o "V" é desenhado por traço · 0,35–0,85 s o arco · 0,65–0,95 s o V se preenche ·
   1,0–1,6 s as cortinas abrem · 1,65 s some (mesmo que o JS falhe: a própria animação esconde). */
:root {
  --ab-total: 1.65s;
  --ab-traco: .7s;
  --ab-cortina: .6s;
  --ab-curva: cubic-bezier(.16, 1, .3, 1);
  --ab-curva-abre: cubic-bezier(.77, 0, .18, 1);
  --ab-fundo: linear-gradient(135deg, var(--escuro-1, #006666) 0%, var(--escuro-2, #008080) 60%, var(--brand-luz, #4da6a6) 100%);
  --ab-traco-cor: #ffffff;
  --ab-arco-cor: var(--ouro, #f5b942);
}

.sp-abertura { display: none; }
html.sp-abrindo .sp-abertura { display: block; position: fixed; inset: 0; z-index: 200; cursor: pointer;
  animation: spAbSome var(--ab-total) linear forwards; }
@keyframes spAbSome { 0%, 99% { visibility: visible; } 100% { visibility: hidden; pointer-events: none; } }

.sp-ab-cortina { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--ab-fundo); background-size: 200% 100%;
  animation: spAbCortinaE var(--ab-cortina) var(--ab-curva-abre) 1s both; }
.sp-ab-esq { left: 0; background-position: 0 0; }
.sp-ab-dir { right: 0; background-position: 100% 0; animation-name: spAbCortinaD; }
@keyframes spAbCortinaE { to { transform: translateX(-101%); } }
@keyframes spAbCortinaD { to { transform: translateX(101%); } }

.sp-ab-logo { position: absolute; left: 50%; top: 50%; width: min(34vw, 180px); height: auto; margin: 0; overflow: visible;
  transform: translate(-50%, -50%); animation: spAbLogoSai .5s var(--ab-curva) 1s both; }
@keyframes spAbLogoSai { to { opacity: 0; transform: translate(-50%, -50%) scale(1.18); } }
.sp-ab-v { fill: var(--ab-traco-cor); fill-opacity: 0; stroke: var(--ab-traco-cor); stroke-width: 2.4; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: spAbTraco var(--ab-traco) var(--ab-curva) both, spAbPreenche .3s ease .65s forwards; }
.sp-ab-arco { fill: none; stroke: var(--ab-arco-cor); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: spAbTraco .5s var(--ab-curva) .35s forwards; }
@keyframes spAbTraco { to { stroke-dashoffset: 0; } }
@keyframes spAbPreenche { to { fill-opacity: 1; } }

.sp-ab-pular { position: absolute; right: 16px; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .12);
  color: #fff; font: 600 .85rem/1 'Poppins', system-ui, sans-serif; cursor: pointer; animation: spAbLogoSai .4s ease 1s both; }
.sp-ab-pular:hover, .sp-ab-pular:focus-visible { background: rgba(255, 255, 255, .26); outline: none; }

/* pular (botão, clique, Esc): some rápido */
html.sp-pulando .sp-abertura { animation: spAbPula .18s ease forwards; }
@keyframes spAbPula { to { opacity: 0; visibility: hidden; } }

/* ------------------------------------------------------------ rolagem até a seção (âncoras do menu): "chegada" própria */
.sp-sec { position: relative; }
.sp-chegada { position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, var(--escuro-1, #006666), var(--brand, #008080), var(--ouro, #f5b942));
  transform-origin: 0 50%; animation: spChegaFaixa .9s var(--ab-curva) both; }
.sp-chegou .sp-cab h2, .sp-chegou .sp-hist-txt h2, .sp-chegou .sp-cta h2 { animation: spChegaTitulo .6s var(--ab-curva) both; }
.sp-chegou .sp-kicker::before { animation: spChegaTraco .6s var(--ab-curva) .1s both; transform-origin: 0 50%; }
@keyframes spChegaFaixa { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes spChegaTitulo { from { clip-path: inset(0 100% 0 0); transform: translateY(8px); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes spChegaTraco { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* VARREDURA FINAL (09/11/2026): o LOGO DA VENCER é DESENHADO por clip-path (revela da esquerda, depois recolhe para a direita)
   no alto da seção, junto com a faixa. Duração = --vq-dur do transicoes.css. */
.sp-chegada-logo { position: absolute; top: 14px; left: 50%; z-index: 3; width: 64px; margin-left: -32px; pointer-events: none;
  animation: spChegaLogo var(--vq-dur, 1s) var(--ab-curva) both; }
.sp-chegada-logo svg { display: block; width: 100%; height: auto; overflow: visible; }
.sp-chegada-logo .sp-cl-v { fill: var(--brand, #008080); }
.sp-chegada-logo .sp-cl-arco { fill: none; stroke: var(--ouro, #f5b942); stroke-width: 4; stroke-linecap: round; }
@keyframes spChegaLogo { 0% { clip-path: inset(0 100% 0 0); transform: translateY(6px); }
  40% { clip-path: inset(0 0 0 0); transform: none; } 72% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 100%); opacity: 0; transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .sp-chegada-logo { display: none !important; }
  .sp-abertura { display: none !important; }
  .sp-chegada { display: none; }
}
@media print { .sp-abertura { display: none !important; } }