@font-face {
  font-family: "Alegreya";
  src: url("assets/fonts/alegreya-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("assets/fonts/alegreya-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --palha: #F0DEC8; /* mesmo tom do fundo do logotipo */
  --tinta: #3A2210;
  --tinta-suave: #5E4A2E;
  --urucum: #B0700A;
  --fio: 14px; /* largura de cada fio da trama */
}

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto auto;
  background: var(--palha);
  color: var(--tinta);
  font-family: "Alegreya Sans", "Gill Sans", "Trebuchet MS", sans-serif;
}

.anuncio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vh, 2.5rem);
  padding: 3rem 1.5rem 2.5rem;
  text-align: center;
}

.marca img {
  display: block;
  /* O arquivo tem margens amplas; a margem negativa desconta esse respiro no layout. */
  --logo: min(100vw, clamp(360px, 50vw, 520px));
  width: var(--logo);
  height: auto;
  margin-block: calc(var(--logo) * -0.11);
}

.mensagem {
  font-family: "Alegreya", Georgia, serif;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
}

/* A trama fica por terminar: os fios seguem soltos até a borda da página. */
.trama {
  height: calc(var(--fio) * 4);
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    var(--urucum) 2px 12px,
    transparent 12px var(--fio)
  );
}

.trama__tecido {
  width: 70%;
  height: 100%;
  background: url("assets/img/trama.svg") left top / calc(var(--fio) * 4) repeat;
  animation: tecer 1.8s steps(40) both;
}

@keyframes tecer {
  from {
    width: 0;
  }
}

.credito {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  color: var(--tinta-suave);
  font-size: 0.875rem;
}

.credito a {
  display: block;
  border-radius: 2px;
}

.credito img {
  display: block;
  width: auto;
  height: 20px;
}

.credito a:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .trama__tecido {
    animation: none;
  }
}