/* ==========================================================================
   Preloader
   Fundo escuro com brilho e granulação sutis (ecoa a fumaça do vídeo de referência).
   O logo é um SVG inline com duas camadas por letra: contorno (DrawSVG) e
   preenchimento (revelado por um retângulo de clipPath por linha).
   ========================================================================== */

.preloader {
  display: none;
}

.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
}

.preloader-failed .preloader {
  display: none;
}

.preloader__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 46%, rgba(59, 63, 68, 0.9) 0%, rgba(29, 29, 27, 0) 70%),
    var(--color-black);
}

/* "fumaça": manchas grafite desfocadas, bem lentas */
.preloader__bg::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 28% 62%, rgba(59, 63, 68, 0.55) 0%, rgba(59, 63, 68, 0) 32%),
    radial-gradient(circle at 74% 34%, rgba(59, 63, 68, 0.45) 0%, rgba(59, 63, 68, 0) 30%),
    radial-gradient(circle at 60% 80%, rgba(59, 63, 68, 0.35) 0%, rgba(59, 63, 68, 0) 28%);
  filter: blur(40px);
  animation: preloader-smoke 14s ease-in-out infinite alternate;
}

/* granulação */
.preloader__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: overlay;
}

@keyframes preloader-smoke {
  from { transform: translate3d(-3%, 2%, 0) scale(1); }
  to   { transform: translate3d(3%, -2%, 0) scale(1.08); }
}

.preloader__logo {
  position: relative;
  width: min(62vw, 720px);
  height: auto;
  aspect-ratio: 538.17 / 213.912;
  overflow: visible;
  visibility: hidden; /* o JS mostra depois de zerar o traço, sem piscar o contorno pronto */
  will-change: transform;
}

.preloader__stroke path {
  fill: none;
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.preloader__stroke-baic {
  stroke: var(--color-logo-red);
}

.preloader__stroke-proeste {
  stroke: var(--color-white);
}

.preloader__fill-baic {
  fill: var(--color-logo-red);
}

.preloader__fill-proeste {
  fill: var(--color-white);
}