/* ==========================================================================
   TVI Mayia — abertura de marca ("sinal travado")
   Vinheta curta da logo: risco de sinal → abre a placa → imprime os glifos
   → um pulso de halo. Mesma linguagem do LED "no ar" e do halo do código
   de pareamento. Só transform/opacity (as TVs são hardware fraco).

   Uso: veja abertura.js — TVIAbertura.tocar() / TVIAbertura.inline(el)
   Geometria medida do marca-vertical.png: placa 726×259, raio 64,
   glifos 555×117 a 80px da esquerda e 71px do topo.
   ========================================================================== */

.tvi-ab {
  --ab-verde: #22DD00;
  --ab-tinta: #111111;
  --ab-larg: 300px;              /* largura da placa; o resto deriva daqui */
  --ab-dur: 1150ms;              /* duração da revelação */
  --ab-espera: 420ms;            /* quanto a marca fica parada antes de sair */
  --ab-saida: 380ms;

  --ab-alt: calc(var(--ab-larg) * 0.35675);   /* 259/726 */
  --ab-raio: calc(var(--ab-larg) * 0.08815);  /* 64/726  */

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ab-larg);
  height: var(--ab-alt);
  isolation: isolate;
}

/* modo tela cheia: cobre tudo enquanto a página carrega */
.tvi-ab--tela {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: radial-gradient(65% 60% at 50% 45%, rgba(34, 221, 0, .10), transparent 70%), #0E1115;
}
.tvi-ab--tela .tvi-ab__palco {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tvi-ab__palco {
  position: relative;
  width: var(--ab-larg);
  height: var(--ab-alt);
}

/* ---------- halo: um pulso de sinal quando a marca trava ---------- */
.tvi-ab__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--ab-larg) * 1.9);
  height: calc(var(--ab-larg) * 1.9);
  margin: calc(var(--ab-larg) * -0.95) 0 0 calc(var(--ab-larg) * -0.95);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 221, 0, .38) 0%, rgba(34, 221, 0, .12) 38%, transparent 66%);
  opacity: 0;
  pointer-events: none;
  animation: ab-halo calc(var(--ab-dur) * .62) ease-out calc(var(--ab-dur) * .60) both;
}

/* ---------- a placa verde ---------- */
.tvi-ab__placa {
  position: absolute;
  inset: 0;
  background: var(--ab-verde);
  border-radius: var(--ab-raio);
  overflow: hidden;
  transform-origin: 50% 50%;
  animation: ab-placa calc(var(--ab-dur) * .68) cubic-bezier(.22, .61, .28, 1) both;
}

/* brilho do risco: forte enquanto é linha, some quando a placa abre */
.tvi-ab__brilho {
  position: absolute;
  inset: calc(var(--ab-larg) * -0.06);
  border-radius: calc(var(--ab-raio) * 1.6);
  background: radial-gradient(60% 100% at 50% 50%, rgba(34, 221, 0, .75), transparent 72%);
  opacity: 0;
  pointer-events: none;
  animation: ab-brilho calc(var(--ab-dur) * .68) ease-out both;
}

/* ---------- glifos (montanha + TVI) impressos na placa ---------- */
.tvi-ab__glifos {
  position: absolute;
  left: 11.019%;                 /* 80/726  */
  top: 27.413%;                  /* 71/259  */
  width: 76.446%;                /* 555/726 */
  height: 45.174%;               /* 117/259 */
  background: var(--ab-tinta);
  -webkit-mask: url("marca-glifos.png") center / contain no-repeat;
  mask: url("marca-glifos.png") center / contain no-repeat;
  clip-path: inset(0 100% 0 0);
  animation: ab-glifos calc(var(--ab-dur) * .40) cubic-bezier(.36, .8, .3, 1) calc(var(--ab-dur) * .52) both;
}

/* clarão que corre na frente da revelação dos glifos */
.tvi-ab__clarao {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 26%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .92), transparent);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  animation: ab-clarao calc(var(--ab-dur) * .46) ease-out calc(var(--ab-dur) * .50) both;
}

/* interferência: duas faixas horizontais varrendo a placa, bem discretas */
.tvi-ab__ruido {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 30%;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .22)) left 0% / 100% 20% no-repeat,
    linear-gradient(rgba(14, 17, 21, .16), rgba(14, 17, 21, .16)) left 55% / 100% 10% no-repeat;
  opacity: 0;
  will-change: transform;
  animation: ab-ruido calc(var(--ab-dur) * .34) linear calc(var(--ab-dur) * .56) both;
}

/* ---------- assinatura opcional embaixo da marca ---------- */
.tvi-ab__rotulo {
  position: absolute;
  left: 50%;
  top: calc(100% + var(--ab-alt) * .30);
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: "Conthrax", "Chakra Petch", system-ui, sans-serif;
  font-weight: 700;
  font-size: calc(var(--ab-larg) * .048);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #7C877F;
  opacity: 0;
  animation: ab-rotulo calc(var(--ab-dur) * .34) ease-out calc(var(--ab-dur) * .74) both;
}

/* ---------- modo espera: a marca revela e FICA respirando enquanto carrega ----------
   O pulso é só opacidade + scale de um halo já existente (composta na GPU, sem layout).
   Entra depois que a revelação termina, pra não competir com ela. */
.tvi-ab--esperando .tvi-ab__halo {
  animation: ab-respira 1900ms ease-in-out var(--ab-dur) infinite;
}
.tvi-ab--esperando .tvi-ab__rotulo::after {
  content: "";
  display: inline-block;
  width: 1.1em;
  text-align: left;
  animation: ab-reticencias 1400ms steps(4, end) infinite;
}
@keyframes ab-respira {
  0%, 100% { opacity: .18; transform: scale(.92); }
  50%      { opacity: .55; transform: scale(1.06); }
}
@keyframes ab-reticencias {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: "..."; }
}

/* ---------- saída (só no modo tela) ---------- */
.tvi-ab--saindo {
  animation: ab-saida var(--ab-saida) cubic-bezier(.4, 0, .8, .4) both;
}

/* ==========================================================================
   Keyframes
   ========================================================================== */

/* risco cresce no eixo X, segura um instante ("trava o sinal"), abre no Y */
@keyframes ab-placa {
  0%   { transform: scaleX(.02) scaleY(.014); opacity: 0; }
  8%   { opacity: 1; }
  38%  { transform: scaleX(1) scaleY(.014); }
  48%  { transform: scaleX(1) scaleY(.014); }
  74%  { transform: scaleX(1) scaleY(1.07); }
  88%  { transform: scaleX(1) scaleY(.975); }
  100% { transform: scaleX(1) scaleY(1); opacity: 1; }
}

@keyframes ab-brilho {
  0%   { opacity: 0; transform: scaleX(.3); }
  22%  { opacity: .95; transform: scaleX(1); }
  48%  { opacity: .8; }
  100% { opacity: 0; }
}

@keyframes ab-glifos {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes ab-clarao {
  0%   { transform: translateX(-115%); opacity: 0; }
  14%  { opacity: .85; }
  86%  { opacity: .55; }
  100% { transform: translateX(400%); opacity: 0; }
}

@keyframes ab-ruido {
  0%   { opacity: 0; transform: translateY(-110%); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(340%); }
}

@keyframes ab-halo {
  0%   { opacity: 0; transform: scale(.55); }
  30%  { opacity: .9; }
  100% { opacity: 0; transform: scale(1.15); }
}

@keyframes ab-rotulo {
  0%   { opacity: 0; transform: translate(-50%, 6px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes ab-saida {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); }
}

/* ==========================================================================
   Acessibilidade: quem pediu menos movimento vê a marca, não a vinheta
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .tvi-ab__placa,
  .tvi-ab__glifos,
  .tvi-ab__rotulo {
    animation-duration: 220ms;
    animation-delay: 0ms;
    animation-timing-function: ease-out;
    animation-name: ab-surge;
  }
  .tvi-ab__glifos { clip-path: none; }
  .tvi-ab__placa { transform: none; }
  .tvi-ab__brilho,
  .tvi-ab__clarao,
  .tvi-ab__ruido,
  .tvi-ab__halo { animation: none; opacity: 0; }
  .tvi-ab--saindo { animation-duration: 180ms; }
  /* espera sem movimento: marca parada, sem respiro nem reticências animadas */
  .tvi-ab--esperando .tvi-ab__halo { animation: none; opacity: 0; }
  .tvi-ab--esperando .tvi-ab__rotulo::after { animation: none; content: "..."; }
}
@keyframes ab-surge {
  from { opacity: 0; }
  to   { opacity: 1; }
}