/* A ABERTURA COM A LOGO — REGRA dos nossos sites (Livio, 30/10/2026: "achei que estava muito boa, vamos manter ela de regra").
   É a do site da TB de hoje (territorios.css › .abre, com as cores que o Lucas escolheu no mural): o símbolo se desenha traço
   a traço e se preenche, o nome entra numa cortina da esquerda, a frase sobe, e a tela dá um zoom pra dentro e some.
   Pra outro cliente: trocar o SVG/o nome (abertura.js › ABERTURA) e as 6 cores abaixo. Peça: abertura.css + abertura.js. */
:root{
  --ab-fundo:#f8f7f3;      /* o fundo da tela de abertura */
  --ab-preenche:#ffffff;   /* o símbolo, depois de desenhado */
  --ab-traco:#7d6f64;      /* o traço que desenha o símbolo · a frase · a barrinha */
  --ab-brilho:217,179,115; /* o halo dourado atrás (r,g,b) */
  --ab-nome-filtro:brightness(0); --ab-nome-opac:.85;   /* nome em PNG branco → escuro no fundo claro */
}
.abre{position:fixed;inset:0;z-index:100;background:var(--ab-fundo);display:grid;place-items:center;transition:opacity 1s cubic-bezier(.4,0,.2,1) .3s}
.abre .brilho{position:absolute;left:50%;top:50%;width:min(760px,120vw);height:min(760px,120vw);transform:translate(-50%,-50%);border-radius:50%;opacity:0;transition:opacity 1.2s ease;
  background:radial-gradient(closest-side,rgba(var(--ab-brilho),.26) 0%,rgba(var(--ab-brilho),.09) 45%,rgba(var(--ab-brilho),0) 72%)}
.abre.on .brilho{opacity:1}
.abre .miolo-ab{position:relative;display:flex;flex-direction:column;align-items:center;gap:28px;will-change:transform,opacity}
.abre svg{width:min(118px,26vw);height:auto;overflow:visible}
.abre svg path{fill:var(--ab-preenche);fill-opacity:0;stroke:var(--ab-traco);stroke-width:2.4;stroke-linejoin:miter;stroke-dasharray:var(--L,600);stroke-dashoffset:var(--L,600);
  transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1) var(--d,0s),fill-opacity .7s ease calc(var(--d,0s) + .95s),stroke-opacity .6s ease calc(var(--d,0s) + 1.2s)}
.abre.on svg path{stroke-dashoffset:0;fill-opacity:1;stroke-opacity:0}
.abre .nome{height:clamp(22px,4vw,34px);width:auto;clip-path:inset(0 100% 0 0);opacity:0;filter:var(--ab-nome-filtro);
  transition:clip-path 1.1s cubic-bezier(.4,0,.2,1) 1.15s,opacity .4s ease 1.15s}
.abre.on .nome{clip-path:inset(0 0 0 0);opacity:var(--ab-nome-opac)}
.abre .sub{font:400 10px/1.8 Arial,Helvetica,sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--ab-traco);opacity:0;transform:translateY(6px);transition:opacity .8s ease 2s,transform .8s ease 2s}
.abre.on .sub{opacity:1;transform:none}
.abre .carrega{width:110px;height:1px;background:rgba(125,111,100,.22);overflow:hidden;opacity:0;animation:ab-aparece .6s ease 3.4s forwards}
.abre .carrega::after{content:"";display:block;width:38%;height:100%;background:var(--ab-traco);animation:ab-corre 1.3s ease-in-out infinite}
@keyframes ab-aparece{to{opacity:1}}
@keyframes ab-corre{0%{transform:translateX(-100%)}100%{transform:translateX(270%)}}
.abre.sai .miolo-ab{transition:transform 1.1s cubic-bezier(.7,0,.84,0),opacity .55s ease .45s;transform:scale(3.4);opacity:0}
.abre.sai{opacity:0}
html.abrindo,html.abrindo body{overflow:hidden}
@media (prefers-reduced-motion:reduce){.abre{display:none}}
/* 30/10 — o ESMAECER entre as páginas (abertura.js): o véu escuro cobre a página que sai (0,45 s) e descobre a que chega (0,9 s) */
html::after{content:"";position:fixed;inset:0;z-index:90;background:#1f1c18;opacity:0;pointer-events:none;transition:opacity .9s cubic-bezier(.4,0,.2,1)}
html.veu::after{opacity:1;transition:opacity .45s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){html::after{display:none}}