/* Moldura do vídeo: margem em cima e nos lados; embaixo, uma faixa de 20 px do fundo do hero antes de Soluções, em linha reta */
.hero-frame {
  position: relative;
  margin: var(--moldura) var(--moldura) var(--hero-faixa);
  min-height: calc(100vh - var(--moldura) - var(--hero-faixa));
  min-height: calc(100svh - var(--moldura) - var(--hero-faixa));
  border-radius: 20px;
  border: 1px solid var(--janela-filete);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
      120% 90% at 85% 20%,
      rgba(239, 182, 140, 0.16) 0%,
      transparent 55%
    ),
    radial-gradient(100% 80% at 75% 85%, rgba(135, 138, 102, 0.28) 0%, transparent 60%),
    linear-gradient(160deg, var(--cor-floresta-700) 0%, var(--cor-floresta-900) 70%);
}

/* Foto de fundo (poster no desktop, foto no celular): as pessoas ficam na parte de cima, então o recorte parte do topo */
.hero-foto,
.hero-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-foto {
  z-index: 0;
}

.hero-foto img {
  object-fit: cover;
  object-position: 50% 0;
}

/* O vídeo é inserido antes da foto no HTML, então precisa de z-index próprio para ficar por cima dela */
.hero-media video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

.hero-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(14, 34, 20, 0.4);
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    transparent 35%,
    rgba(8, 24, 12, 0.9) 100%
  );
  pointer-events: none;
}

.hero {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--respiro-header) + var(--altura-header) + 80px);
  padding-bottom: 32px;
}

/* Com a etiqueta visível, o conteúdo termina acima dela */
@media (min-width: 640px) {
  .hero {
    padding-bottom: 72px;
  }
}

/* Título numa coluna de até 700 px e texto numa de 430 px */
@media (min-width: 1200px) {
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, var(--hero-coluna-titulo)) minmax(0, var(--hero-coluna-texto));
    justify-content: space-between;
    align-items: end;
    column-gap: 32px;
  }
}

.hero-title {
  font-size: var(--tam-hero);
  color: var(--cor-creme-100);
}

.hero-title .linha {
  display: block;
  overflow: hidden;
}

.hero-title .linha span {
  display: block;
  transform: translateY(100%);
  opacity: 0;
  animation: subida-linha var(--duracao-lenta) var(--curva-principal) forwards;
}

.hero-title .linha:nth-child(1) span {
  animation-delay: 0ms;
}

.hero-title .linha:nth-child(2) span {
  animation-delay: 90ms;
}

.hero-title .linha:nth-child(3) span {
  animation-delay: 180ms;
}

.hero-title em {
  display: inline-block;
  color: rgba(var(--cobre-acento-rgb), 0.45);
  animation: acende-cobre var(--duracao-media) var(--curva-suave) forwards;
  animation-delay: 980ms;
}

@keyframes subida-linha {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes acende-cobre {
  to {
    color: var(--cobre-acento);
  }
}

.hero-side {
  opacity: 0;
  transform: translateY(12px);
  animation: sobe-com-fade var(--duracao-media) var(--curva-suave) forwards;
  animation-delay: 420ms;
}

@keyframes sobe-com-fade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title .linha span,
  .hero-side {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero-title em {
    animation: none;
    color: var(--cobre-acento);
  }
}

/* Hierarquia: destaque em Montserrat 400 de 21 px, texto em 300 de 16 px */
.hero-side {
  max-width: var(--hero-coluna-texto);
}

.hero-lead {
  font-weight: 400;
  font-size: var(--tam-hero-destaque);
  line-height: 1.45;
  color: var(--cor-creme-100);
}

.hero-texto {
  margin-top: 12px;
  margin-bottom: var(--hero-respiro-botoes);
  color: var(--hero-texto-cor);
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-actions .btn {
  width: 100%;
}

@media (min-width: 640px) {
  .hero-actions {
    flex-direction: row;
  }

  .hero-actions .btn {
    width: auto;
  }
}