/* ============================================================
   Preloader — a marca entra antes do site
   ============================================================ */
#preloader{
  position:fixed;inset:0;
  z-index:var(--z-preloader);
  display:grid;
  place-items:center;
  background:var(--papel);
  transition:opacity .7s var(--ease),visibility .7s;
}
#preloader.sai{opacity:0;visibility:hidden}

.pre-marca{text-align:center}
.pre-marca h1{
  font-family:var(--display);
  font-size:clamp(3.2rem,12vw,6rem);
  font-weight:800;
  letter-spacing:-.05em;
  background:var(--grad-quente);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  opacity:0;
  animation:surge .9s var(--ease-pulo) .1s forwards;
}

/* barra que enche enquanto o site carrega */
.pre-linha{
  position:relative;
  width:190px;height:6px;
  margin:18px auto 16px;
  border-radius:var(--pilula);
  background:var(--uva-leve);
  overflow:hidden;
}
.pre-linha::after{
  content:"";
  position:absolute;inset:0;
  border-radius:var(--pilula);
  background:var(--grad-quente);
  transform-origin:left;
  animation:cresce-linha 1.9s var(--ease) forwards;
}
.pre-marca span{
  display:block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--tinta-tenue);
  opacity:0;
  animation:surge .8s var(--ease) .55s forwards;
}

@keyframes surge{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
@keyframes cresce-linha{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}