/* Hero — árvore vetorial animada atrás do notebook (arvore-predict) */

.hero-tree {
  position: absolute;
  z-index: -1;
  left: 20%;
  bottom: 8%;
  width: 54%;
  opacity: .55;
  pointer-events: none;
  filter: drop-shadow(0 0 26px rgba(98, 84, 191, .16));
}

.hero-tree__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero-tree__branch {
  fill: #6254BF;
}

/* Duas camadas sobrepostas da mesma arte (via <use>): o tronco entra com
   um wipe reto de baixo para cima; a copa entra depois, com um reveal
   radial genuinamente partindo de raio 0 no ponto onde os galhos começam
   — como o tronco já está visível numa camada própria, a copa não
   precisa de um raio inicial grande só para não "sumir" com ele. */
.hero-tree__layer--trunk {
  clip-path: inset(100% 0 0 0);
}
.hero-tree__layer--canopy {
  clip-path: circle(0% at 46.9% 68.9%);
}

/* estado estático (sem JS / reduced-motion): árvore completa, sem animação */
.hero-tree.is-static .hero-tree__layer--trunk,
.hero-tree.is-static .hero-tree__layer--canopy {
  clip-path: none;
}

@media (min-width: 1440px) {
  /* monitores — cresce acompanhando a mesma lógica de escala da foto */
  .hero-tree { width: 56%; }
}

@media (max-width: 1439px) and (min-width: 1025px) {
  /* notebook — leve redução em relação a monitores */
  .hero-tree { width: 52%; }
}

/* iPad landscape — #hero empilha em coluna única aqui; o notebook
   (e a árvore, aninhada nele) continua visível, só recentraliza.
   No mobile/iPad retrato, .hero-product já vira display:none e a
   árvore some junto, sem precisar de regra própria. */
@media (max-width: 1024px) and (min-width: 835px) {
  .hero-tree { width: 58%; opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-tree__layer--trunk,
  .hero-tree__layer--canopy { clip-path: none; }
}