/* 7 Verde Jardinagem: animações.
   Ideia central: crescimento. As fotos "brotam" de baixo para cima, o sublinhado
   de "com capricho" se desenha como um ramo e a folha balança devagar.
   Só roda com JS ativo e sem preferência por movimento reduzido. */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Entrada do hero ---------- */
  .js .hero__bg { animation: kenburns 2.6s var(--ease-out) both; }
  .js .hero__shade { animation: fade 1.2s ease both; }
  .js [data-hero] { animation: rise .9s var(--ease-out) both; }
  .js [data-hero="1"] { animation-delay: .25s; }
  .js [data-hero="2"] { animation-delay: .35s; }
  .js [data-hero="3"] { animation-delay: .55s; }
  .js [data-hero="4"] { animation-delay: .7s; }
  .js [data-hero="5"] { animation-delay: .85s; }
  .js .chips li { animation: sprout .6s var(--ease-out) both; }
  .js .chips li:nth-child(1) { animation-delay: 1s; }
  .js .chips li:nth-child(2) { animation-delay: 1.07s; }
  .js .chips li:nth-child(3) { animation-delay: 1.14s; }
  .js .chips li:nth-child(4) { animation-delay: 1.21s; }
  .js .chips li:nth-child(5) { animation-delay: 1.28s; }

  .js .stem { animation: grow-up 1.2s var(--ease-grow) both; }
  .js .stem:nth-child(1) { animation-delay: .35s; }
  .js .stem:nth-child(2) { animation-delay: .5s; }
  .js .stem img { animation: settle 2s var(--ease-out) .35s both; }
  .js .stem figcaption { animation: fade .8s ease 1.3s both; }

  /* Parallax suave (valor --py vem do main.js) */
  .js .hero__bg { translate: 0 calc(var(--py, 0) * 60px); }

  /* ---------- Revelação ao rolar ---------- */
  .js [data-reveal] {
    opacity: 0; transform: translateY(28px);
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--stagger));
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  /* Fotos brotando de baixo para cima */
  .js img[data-grow] {
    clip-path: inset(100% 0 0 0);
    scale: 1.14;
    transition: clip-path 1.1s var(--ease-grow), scale 1.6s var(--ease-out), transform .8s var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--stagger) + .15s);
  }
  .js .is-in img[data-grow] { clip-path: inset(0); scale: 1; }

  /* Ramo desenhado sob "com capricho" */
  .js .vine path { stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset 1.4s var(--ease-grow) .5s; }
  .js .is-in .vine path { stroke-dashoffset: 0; }

  /* Destaque "recentes" se preenchendo */
  .js .hl { background: linear-gradient(var(--mist-2), var(--mist-2)) no-repeat left / 0% 100%; transition: background-size .9s var(--ease-grow) .35s; }
  .js .is-in .hl { background-size: 100% 100%; }

  /* Folha balançando ao vento */
  .js .leaf { transform-origin: 20% 90%; }
  .js .tile--forest.is-in .leaf { animation: sway 4.5s ease-in-out .8s infinite; }

  /* Acordeão: conteúdo entra suave ao abrir */
  .acc__inner > * { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .5s var(--ease-out); }
  .acc__item.is-open .acc__inner > * { opacity: 1; transform: none; transition-delay: .15s; }

  /* Contato: logo e chamada entram em sequência */
  .js .contact .contact__copy > * { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .8s var(--ease-out); }
  .js .contact.is-in .contact__copy > * { opacity: 1; transform: none; }
  .js .contact.is-in .contact__copy > :nth-child(2) { transition-delay: .1s; }
  .js .contact.is-in .contact__copy > :nth-child(3) { transition-delay: .2s; }
  .js .contact.is-in .contact__copy > :nth-child(4) { transition-delay: .3s; }
  .js .contact.is-in .contact__copy > :nth-child(5) { transition-delay: .4s; }

  .swipe-hint svg { animation: nudge 1.6s var(--ease-out) infinite; }

  @keyframes kenburns { from { transform: scale(1.15); } to { transform: none; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  @keyframes sprout { from { opacity: 0; transform: translateY(10px) scale(.85); } to { opacity: 1; transform: none; } }
  @keyframes grow-up { from { clip-path: inset(100% 0 0 0 round 28px); } to { clip-path: inset(0 0 0 0 round 28px); } }
  @keyframes settle { from { transform: scale(1.22); } to { transform: none; } }
  @keyframes sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-9deg); } }
  @keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateX(6px); } }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  .nav > a { opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .4s var(--ease-out); }
  .nav.is-open > a { opacity: 1; transform: none; }
  .nav.is-open > a:nth-child(1) { transition-delay: .04s; }
  .nav.is-open > a:nth-child(2) { transition-delay: .08s; }
  .nav.is-open > a:nth-child(3) { transition-delay: .12s; }
  .nav.is-open > a:nth-child(4) { transition-delay: .16s; }
  .nav.is-open > a:nth-child(5) { transition-delay: .2s; }
  .nav.is-open > a:nth-child(6) { transition-delay: .26s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .svc__stage img { transform: none; transition: opacity .2s linear; }
  .acc__panel { transition: none; }
}