/* ============================================================
 * virtus-marca.css — Componentes visuais da marca Virtus
 * ------------------------------------------------------------
 * Par de includes/marca.php. Não desenha a logo: ela é um
 * arquivo de imagem. Aqui ficam só tamanho, respiro, halo e
 * as microanimações que o briefing pede.
 *
 * Regra do briefing respeitada: nenhum fundo, caixa, borda ou
 * sombra pesada envolve a logo em nenhuma variante.
 * ============================================================ */

/* ─────────────── Lockup horizontal ─────────────── */

.vlogo{
  position: relative;
  display: inline-block;
  line-height: 0;              /* mata o espaço fantasma abaixo da img */
}
.vlogo__link{ display:inline-block; line-height:0; text-decoration:none; }
.vlogo__link:focus-visible{
  outline: 2px solid rgba(34,211,238,.8);
  outline-offset: 6px;
  border-radius: 6px;
}

.vlogo__img{
  position: relative;
  z-index: 1;                  /* acima do halo */
  display: block;
  width: auto;
  height: var(--vlogo-h, 56px);
  /* Nunca distorcer: a altura manda, a largura acompanha. */
}

.vlogo--login    { --vlogo-h: 72px; }
.vlogo--header   { --vlogo-h: 52px; }
.vlogo--sidebar  { --vlogo-h: 56px; }   /* ~164px de largura: dentro da faixa 150–190 pedida */
.vlogo--compacta { --vlogo-h: 48px; }

/* Halo atrás da esfera — separado do arquivo da logo, como pedido.
   Respira devagar; a intenção é sentir, não notar.
   Fica no .vlogo (e não no marcador) porque precisa transbordar. */
.vlogo::before{
  content:'';
  position: absolute;
  left: -4%; top: -8%;
  width: 46%; height: 116%;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(59,130,246,.34) 0%,
      rgba(139,92,246,.18) 45%,
      transparent 72%);
  filter: blur(15px);
  z-index: 0;
  pointer-events: none;
  animation: vlogo-halo 7s ease-in-out infinite;
}
@keyframes vlogo-halo{
  0%,100%{ opacity:.55; transform:scale(.94); }
  50%    { opacity:1;    transform:scale(1.04); }
}

/* A esfera ocupa os ~39% iniciais da imagem. O marcador cobre só
   essa faixa: é a âncora das partículas orbitais e da lâmina. */
.vlogo__orb{
  position: absolute;
  left: 0.5%;
  top: 4%;
  width: 38%;
  height: 92%;
  z-index: 2;                  /* acima da imagem: a luz soma sobre ela */
  overflow: hidden;            /* sem isto a lâmina escapa e risca a tela */
  pointer-events: none;
  /* O recorte retangular do overflow desenharia um quadrado claro ao
     redor da esfera. A máscara elíptica dissolve as bordas. */
  -webkit-mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 40%, transparent 76%);
          mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 40%, transparent 76%);
}

/* Lâmina de luz ciano cruzando a esfera a cada 8s.
   mix-blend-mode: screen soma luz em vez de cobrir — a logo
   original não é alterada, só iluminada. */
.vlogo__orb::after{
  content:'';
  position:absolute;
  top:-20%; bottom:-20%; width:30%;
  left:-45%;
  background: linear-gradient(100deg, transparent, rgba(180,240,255,.50), transparent);
  filter: blur(5px);
  transform: skewX(-16deg);
  mix-blend-mode: screen;
  animation: vlogo-lamina 8s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes vlogo-lamina{
  0%   { left:-45%; opacity:0; }
  10%  { opacity:1; }
  38%  { left:125%; opacity:0; }
  100% { left:125%; opacity:0; }
}

/* ─────────────── Só o símbolo ─────────────── */

.vsimbolo{
  display: inline-block;
  line-height: 0;
  position: relative;
}
.vsimbolo img{
  display:block;
  width: var(--vs, 40px);
  height: auto;
}

/* ─────────────── Sidebar recolhida ─────────────── */
/* A troca símbolo ↔ lockup é feita por opacidade e largura, não
   por display:none — assim a transição não dá salto. */

.vbrand{
  display: grid;
  align-items: center;
  overflow: hidden;
}
.vbrand > *{ grid-area: 1 / 1; transition: opacity .28s ease, transform .28s cubic-bezier(.16,1,.3,1); }
.vbrand .vlogo   { opacity:1; transform: translateX(0); }
.vbrand .vsimbolo{ opacity:0; transform: translateX(-6px); }

.sidebar--recolhida .vbrand .vlogo   { opacity:0; transform: translateX(-6px); pointer-events:none; }
.sidebar--recolhida .vbrand .vsimbolo{ opacity:1; transform: translateX(0); }

/* ─────────────── Tela de carregamento ─────────────── */

.vload{
  position: fixed; inset: 0;
  z-index: 9999;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  background: radial-gradient(ellipse at 50% 45%, #0b1637 0%, #050b20 60%, #03081a 100%);
  transition: opacity .45s ease, visibility .45s;
}
.vload[hidden], .vload.vload--fim{ opacity:0; visibility:hidden; pointer-events:none; }

.vload__orbe{ position: relative; display: grid; place-items: center; }
.vload__orbe img{ display:block; width:96px; height:auto; }

/* A esfera fica parada e o anel gira: o inverso cansa a vista. */
.vload__anel{
  position:absolute;
  width:150px; height:150px;
  border-radius:50%;
  border:1.5px solid transparent;
  border-top-color: rgba(34,211,238,.9);
  border-right-color: rgba(139,92,246,.55);
  animation: vload-girar 2.6s linear infinite;
}
@keyframes vload-girar{ to{ transform: rotate(360deg); } }

.vload__marca{
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 4px;
  color: #7e93bd;
  margin: 0;
}
.vload__marca b{ color:#dbe6ff; font-weight:800; }

.vload__barra{
  width: 168px; height: 3px;
  border-radius: 99px;
  background: rgba(120,160,255,.14);
  overflow: hidden;
}
.vload__barra i{
  display:block; height:100%; width:42%;
  border-radius:99px;
  background: linear-gradient(90deg, #2563eb, #22d3ee, #8b5cf6);
  animation: vload-correr 1.35s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes vload-correr{
  0%  { transform: translateX(-115%); }
  100%{ transform: translateX(270%); }
}

/* Texto só para leitores de tela. */
.vload__sr{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* ─────────────── Movimento reduzido ─────────────── */
@media (prefers-reduced-motion: reduce){
  .vlogo::before     { animation:none; opacity:.75; transform:none; }
  .vlogo__orb::after { animation:none; opacity:0; }
  .vload__anel       { animation-duration: 6s; }
  .vload__barra i    { animation:none; width:100%; }
  .vbrand > *        { transition:none; }
}