/* =========================================================
   WPG | Em breve
   HTML + CSS puro, sem dependencias externas.
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  /* Cor de seguranca: se a imagem falhar, nunca aparece branco. */
  background-color: #1f3312;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* =========================================================
   HERO - ocupa 100% da viewport
   ========================================================= */

.hero {
  /* Largura da logo. A altura segue sempre a proporcao real do arquivo
     (largura / 1.5, ou seja, 1536x1024 = 3:2), o que permite ancorar a
     base da logo em uma posicao exata da tela. */
  /* O 36vh garante que a altura da logo (largura / 1.5) nunca passe de 24vh,
     preservando respiro acima dela em telas baixas (ex.: 1366x768). */
  --logo-w: clamp(280px, min(46vw, 45vh), 620px);
  /* Linha onde a base da logo se apoia: acima do horizonte da fotografia. */
  --logo-baseline: 30vh;
  /* Linha onde comeca o "EM BREVE": abaixo do horizonte, sobre a lavoura,
     onde a folhagem e mais escura e o branco ganha contraste. */
  --text-line: 40vh;

  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;

  width: 100%;
  min-height: 100vh;   /* fallback universal */
  min-height: 100svh;  /* evita "pulo" com a barra do navegador no mobile */
  min-height: 100dvh;  /* unidade moderna, quando suportada */

  padding: 0 clamp(20px, 5vw, 64px);

  background-image: url("img/hero.png");
  background-size: cover;          /* nunca distorce a fotografia */
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Overlay escuro sutil: leve no ceu (onde fica a logo preta) e um pouco
   mais presente na lavoura (onde fica o texto branco). Da profundidade
   sem escurecer demais a fotografia. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.14) 0%,
    rgba(0, 0, 0, 0.08) 28%,
    rgba(0, 0, 0, 0.24) 52%,
    rgba(0, 0, 0, 0.34) 100%
  );
  pointer-events: none;
}

/* =========================================================
   CONTEUDO
   ========================================================= */

.hero__content {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  width: 100%;
  max-width: 100%;

  /* Ancora a BASE da logo exatamente em --logo-baseline. */
  margin-top: calc(var(--logo-baseline) - (var(--logo-w) / 1.5));
}

/* ---------- Logo ---------- */

.hero__logo {
  display: block;
  width: var(--logo-w);
  height: auto;                 /* preserva a proporcao original do arquivo */
  max-width: 88vw;

  animation: reveal 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* ---------- "EM BREVE" ---------- */

.hero__message {
  /* Distancia da base da logo ate a linha do texto. */
  margin: calc(var(--text-line) - var(--logo-baseline)) 0 0;

  font-size: clamp(28px, 4.6vw, 50px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;

  color: #ffffff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Cada letra e um elemento proprio: a margem substitui o letter-spacing
   e, como a ultima letra nao tem margem, o texto fica centralizado sem
   precisar de nenhum hack de text-indent. */
.hero__letter {
  display: inline-block;
  margin-right: 0.2em;
  opacity: 0;
  animation: letter-in 700ms cubic-bezier(0.16, 0.84, 0.44, 1) both;
  animation-delay: calc(500ms + var(--i) * 60ms);
}

.hero__letter:last-child {
  margin-right: 0;
}

.hero__letter--space {
  margin-right: 0.08em;
}

/* Traco fino que se desenha da esquerda para a direita depois que a
   ultima letra termina de entrar. Reforca a sensacao de "revelacao"
   sem virar um elemento decorativo continuo. */
.hero__underline {
  display: block;
  width: 0;
  height: 2px;
  margin: clamp(14px, 2.4vh, 24px) auto 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0;
  animation: underline-in 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 1020ms both;
}

/* =========================================================
   ANIMACAO DE ENTRADA (unica, discreta, sem loop)
   ========================================================= */

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cada letra sobe com leve giro em profundidade e um pequeno "overshoot"
   (passa do tamanho final e assenta), efeito de peso e presenca. */
@keyframes letter-in {
  0% {
    opacity: 0;
    transform: translateY(55%) scale(0.7);
    filter: blur(6px);
  }
  60% {
    opacity: 1;
    transform: translateY(-8%) scale(1.06);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes underline-in {
  from {
    width: 0;
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  to {
    width: min(200px, 42vw);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__logo,
  .hero__letter,
  .hero__underline {
    animation: none;
  }

  .hero__letter {
    opacity: 1;
  }

  .hero__underline {
    width: min(200px, 42vw);
    opacity: 1;
  }
}

/* =========================================================
   AJUSTES RESPONSIVOS
   ========================================================= */

/* Tablets (768x1024, 1024x768) */
@media (max-width: 1024px) {
  .hero {
    --logo-w: clamp(280px, min(62vw, 36vh), 540px);
  }
}

/* Retrato: o cover corta as laterais, entao mantemos o miolo da foto. */
@media (orientation: portrait) {
  .hero {
    background-position: 50% 50%;
  }
}

/* Celulares (430x932, 390x844, 360x800) */
@media (max-width: 600px) {
  .hero {
    --logo-w: min(96vw, 38vh);
    --logo-baseline: 22vh;
    --text-line: 36vh;
    padding: 0 18px;
  }

  .hero__message {
    font-size: clamp(34px, 18.2vw, 46px);
  }

  .hero__letter {
    margin-right: 0.16em;
  }
}

/* Telas muito baixas (celular deitado) */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    --logo-w: clamp(140px, min(30vw, 32vh), 320px);
    --logo-baseline: 24vh;
    --text-line: 42vh;
  }

  .hero__message {
    font-size: clamp(18px, 5vh, 32px);
  }
}

/* Monitores ultrawide: mantem a faixa central (horizonte) enquadrada. */
@media (min-aspect-ratio: 21/9) {
  .hero {
    background-position: center 42%;
  }
}