/* ==========================================================================
   MARCA — Entre Raízes e Flores (só o que é desta marca)

   ANIMAÇÕES (só CSS, na linha da Novaré Joias; o gatilho é o .is-visible que
   o js/main.js do núcleo põe nos [data-reveal] quando entram na tela):
     abertura   logo surge do desfoque e fica "respirando", com reflexo de luz;
                título sobe em máscara e "feitos à mão" se escreve;
                raminho dourado se desenha e as folhinhas brotam
     fundo      folhas caindo em balanço e pólen flutuando (cores do logo)
     cards      (arte em PNG) brotam de baixo para cima, arte com zoom que
                assenta, brilho que atravessa de tempos em tempos
     catálogo   título em máscara, fotos entram uma a uma
     final      título em máscara, botão com brilho e halo pulsando
     rolagem    o topo se afasta e os cards passam por cima
                (só onde há animation-timeline; o resto ignora)
   Tudo desliga com prefers-reduced-motion.
   ========================================================================== */

body {
  --suave:   cubic-bezier(.22, 1, .36, 1);
  --cortina: cubic-bezier(.77, 0, .18, 1);
  --mola:    cubic-bezier(.34, 1.56, .64, 1);
}

html { scroll-behavior: smooth; }
#catalogo { scroll-margin-top: 16px; }

/* ---- Flores no topo: a arte "inferior-bg" espelhada de cabeça para baixo
   (creme já removido, webp transparente), presa no alto do hero.
   ::after com z-index -1 fica acima do .hero__bg (creme e folhas caindo) e
   abaixo do logo. Não anda com o parallax. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  aspect-ratio: 1440 / 462;
  background: url("../assets/fundo-superior.webp") center top / 100% auto no-repeat;
  pointer-events: none;
  animation: flores-descem 2s var(--suave) .2s both;
}
@keyframes flores-descem {
  from { opacity: 0; translate: 0 -30px; }
  to   { opacity: 1; translate: 0 0; }
}
/* fechamento com o mesmo respiro em cima e embaixo */
.cta { padding-block: clamp(64px, 8vw, 96px); }

/* ==========================================================================
   FUNDO DO TOPO: folhas caindo e pólen
   ========================================================================== */
.hero__bg {
  container-type: size;              /* as folhas caem a altura do topo (cqh) */
  overflow: hidden;
}

.folha {
  position: absolute;
  top: -40px;
  left: var(--x);
  width: var(--s);
  aspect-ratio: 1;
  border-radius: 0 100% 0 100%;      /* folha: dois cantos opostos arredondados */
  background: linear-gradient(135deg,
    var(--c) 0 47%,
    color-mix(in srgb, var(--c) 55%, #fff) 49% 51%,   /* nervura */
    var(--c) 53%);
  opacity: 0;
  animation: cair var(--t) ease-in-out var(--a) infinite;
  will-change: translate, rotate;
}
.folha:nth-child(1) { --x:  8%; --s: 30px; --c: #4f7a4a; --t: 14s; --a: .6s;  --dx:  50px; --r: 260deg;  --o: .7; }
.folha:nth-child(2) { --x: 86%; --s: 24px; --c: #c17914; --t: 12s; --a: 1.4s; --dx: -40px; --r: -220deg; --o: .7; }
.folha:nth-child(3) { --x: 24%; --s: 18px; --c: #356160; --t: 16s; --a: 3.2s; --dx:  34px; --r: 300deg;  --o: .6; }
.folha:nth-child(4) { --x: 70%; --s: 28px; --c: #4f7a4a; --t: 13s; --a: 5s;   --dx: -56px; --r: -280deg; --o: .65; }
.folha:nth-child(5) { --x: 46%; --s: 16px; --c: #b6400d; --t: 12s; --a: 7s;   --dx:  40px; --r: 240deg;  --o: .6; }
.folha:nth-child(6) { --x: 94%; --s: 20px; --c: #356160; --t: 17s; --a: 2.4s; --dx: -30px; --r: 200deg;  --o: .6; }
.folha:nth-child(7) { --x:  2%; --s: 22px; --c: #c17914; --t: 15s; --a: 8.5s; --dx:  44px; --r: -240deg; --o: .65; }

@keyframes cair {
  0%   { translate: 0 0;                              rotate: 0deg;                    opacity: 0; }
  8%   {                                                                               opacity: var(--o); }
  25%  { translate: var(--dx) 28cqh; }
  50%  { translate: calc(var(--dx) * -.6) 56cqh;      rotate: calc(var(--r) * .5); }
  75%  { translate: var(--dx) 84cqh; }
  90%  {                                                                               opacity: var(--o); }
  100% { translate: 0 calc(100cqh + 60px);            rotate: var(--r);                opacity: 0; }
}

/* pólen: as bolinhas que o logo tem em volta, flutuando devagar */
.polen {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c);
  opacity: 0;
  animation:
    polen-surge 1.6s var(--suave) var(--a) forwards,
    flutuar var(--t) ease-in-out var(--a) infinite alternate;
}
.polen:nth-child(8)  { --x: 12%; --y: 22%; --s: 7px; --c: #c17914; --t: 7s;  --a: 1.4s; --dx:  14px; --dy: -18px; }
.polen:nth-child(9)  { --x: 84%; --y: 18%; --s: 6px; --c: #b6400d; --t: 8s;  --a: 1.7s; --dx: -12px; --dy:  16px; }
.polen:nth-child(10) { --x: 90%; --y: 62%; --s: 8px; --c: #356160; --t: 9s;  --a: 2s;   --dx: -16px; --dy: -14px; }
.polen:nth-child(11) { --x:  6%; --y: 70%; --s: 6px; --c: #4f7a4a; --t: 6s;  --a: 2.2s; --dx:  12px; --dy:  14px; }
.polen:nth-child(12) { --x: 30%; --y: 9%;  --s: 5px; --c: #b6400d; --t: 7.5s; --a: 2.5s; --dx:  10px; --dy:  12px; }
.polen:nth-child(13) { --x: 70%; --y: 86%; --s: 6px; --c: #c17914; --t: 8.5s; --a: 2.8s; --dx: -10px; --dy: -16px; }

@keyframes polen-surge { to { opacity: .55; } }
@keyframes flutuar {
  from { translate: 0 0; }
  to   { translate: var(--dx) var(--dy); }
}

/* ==========================================================================
   ABERTURA: logo, título, raminho
   ========================================================================== */

/* o contêiner fica parado: quem anima são as peças de dentro */
.hero__inner.reveal,
.vitrine__cabecalho.reveal,
.trilho.reveal,
.cta__title.reveal { opacity: 1; transform: none; }

/* logo com reflexo de luz (máscara = o próprio logo, que tem fundo transparente) */
.logo {
  position: relative;
  display: block;
  width: min(var(--hero-logo), 82vw);
  margin: 0 auto 6px;
  line-height: 0;
  opacity: 0;
}
.logo .hero__logo { width: 100%; max-width: none; margin: 0; }
.logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 250, 235, .9) 50%, transparent 58%) 100% 0 / 300% 100% no-repeat;
  -webkit-mask: url("../assets/logo.webp") center / 100% 100% no-repeat;
          mask: url("../assets/logo.webp") center / 100% 100% no-repeat;
}
.hero__inner.is-visible .logo {
  animation:
    logo-surge 1.6s var(--suave) .15s both,
    respirar 7s ease-in-out 1.75s infinite;
}
.hero__inner.is-visible .logo::after { animation: reflexo 7s ease-in-out 2.4s infinite; }

@keyframes logo-surge {
  from { opacity: 0; scale: .86; filter: blur(12px); }
  to   { opacity: 1; scale: 1;   filter: blur(0); }
}
@keyframes respirar {
  0%, 100% { translate: 0 0;    rotate: 0deg; }
  50%      { translate: 0 -7px; rotate: -.8deg; }
}
@keyframes reflexo {
  0%        { background-position: 100% 0; }
  30%, 100% { background-position: 0 0; }
}

/* títulos: cada linha sobe por trás de uma máscara */
.anima-linhas .linha {
  display: block;
  overflow: hidden;
  padding: .06em 0 .2em;             /* folga para acentos e descendentes */
  margin: -.06em 0 -.2em;
}
.anima-linhas .linha > span {
  display: block;
  translate: 0 115%;
}
.anima-linhas .linha:nth-child(2) > span { --n: 1; }
.is-visible .anima-linhas .linha > span,
.anima-linhas.is-visible .linha > span {
  animation: linha-sobe 1.15s var(--suave) both;
  animation-delay: calc(var(--d, 0s) + var(--n, 0) * .14s);
}
@keyframes linha-sobe {
  from { translate: 0 115%; }
  to   { translate: 0 0; }
}

.hero__title { --d: .55s; }
.vitrine__titulo { text-wrap: balance; }

/* "feitos à mão" se escreve da esquerda para a direita */
.hero__title em {
  display: inline-block;
  padding: 0 .18em;                  /* o itálico passa da caixa */
  font-style: italic;
  font-weight: 500;
  color: var(--acao);
  clip-path: inset(-30% 100% -30% 0);
}
.hero__inner.is-visible .hero__title em {
  animation: escrever 1.7s cubic-bezier(.65, 0, .35, 1) 1s both;
}
@keyframes escrever { to { clip-path: inset(-30% -5% -30% 0); } }

/* raminho dourado que se desenha, com as folhinhas brotando */
.ramo {
  display: block;
  width: 160px;
  margin: 14px auto 0;
  overflow: visible;
}
.ramo__haste {
  fill: none;
  stroke: var(--acento);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
}
.ramo__folha,
.ramo__fruto {
  transform-box: fill-box;
  transform-origin: center;
  scale: 0;
}
.ramo__folha { fill: var(--rotulo-cor); }
.ramo__fruto { fill: var(--acao); }

.hero__inner.is-visible .ramo__haste { animation: desenhar 1.8s var(--suave) 1.3s both; }
.hero__inner.is-visible .ramo__folha {
  animation: brotar-folha .8s var(--mola) both;
  animation-delay: calc(1.8s + var(--i) * .18s);
}
.hero__inner.is-visible .ramo__fruto {
  animation: brotar-folha .6s var(--mola) both;
  animation-delay: calc(2.5s + var(--i) * .12s);
}
@keyframes desenhar { to { stroke-dashoffset: 0; } }
@keyframes brotar-folha {
  from { scale: 0; rotate: -40deg; }
  to   { scale: 1; rotate: 0deg; }
}

/* indicador de rolagem aparece por último */
.scroll-hint { opacity: 0; }
.hero__inner.is-visible .scroll-hint {
  animation:
    surgir 1s var(--suave) 2.6s both,
    hintFade 3s ease-in-out 3.6s infinite;
}

@keyframes surgir {
  from { opacity: 0; translate: 0 18px; filter: blur(8px); }
  to   { opacity: 1; translate: 0 0;    filter: blur(0); }
}

/* ==========================================================================
   CARDS: brotam de baixo para cima
   ========================================================================== */
/* O card começa só invisível (opacity do núcleo): um card 100% recortado por
   clip-path nunca "entra na tela" para o IntersectionObserver. O recorte fica
   no keyframe "from", que o fill both segura durante o atraso. */
.cards .card:nth-child(1) { --d: 1s;    --brilho: 4s; }
.cards .card:nth-child(2) { --d: 1.18s; --brilho: 5s; }

.cards .card.is-visible { animation: brotar 1.3s var(--cortina) var(--d) both; }
@keyframes brotar {
  from { opacity: 1; clip-path: inset(100% 0 0 0 round var(--raio)); translate: 0 40px; }
  to   { opacity: 1; clip-path: inset(-40px -40px -70px -40px round var(--raio)); translate: 0 0; }
}

.cards .card img { scale: 1.12; }
.cards .card.is-visible img { animation: assentar 2.4s var(--suave) var(--d) both; }
@keyframes assentar { from { scale: 1.12; } to { scale: 1; } }

/* brilho que atravessa o card de tempos em tempos */
.cards .card { position: relative; }
.cards .card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 248, 230, .35) 50%, transparent 65%);
  translate: -120% 0;
}
.cards .card.is-visible::before {
  animation: varrer 7s ease-in-out calc(var(--d) + var(--brilho)) infinite;
}
@keyframes varrer {
  0%        { translate: -120% 0; }
  20%, 100% { translate: 120% 0; }
}

/* ==========================================================================
   CATÁLOGO: esteira contínua de fotos em retrato (3:4), sem legenda,
   de ponta a ponta da tela (sai da largura de 880px da página)
   ========================================================================== */
html, body { overflow-x: clip; }      /* a faixa usa 100vw: sem rolagem lateral */

/* respiro amplo: cards -> catálogo -> fechamento */
.vitrine { padding: clamp(72px, 10vw, 120px) 0 0; }
.vitrine__cabecalho { margin-bottom: 24px; }

.vitrine .trilho {
  margin-inline: calc(50% - 50vw);
  padding-inline: 0;
  gap: 18px;
  /* degradê nas pontas: as fotos somem suavemente e o olhar fica no meio */
  --esmaecer: clamp(60px, 16vw, 260px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--esmaecer), #000 calc(100% - var(--esmaecer)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--esmaecer), #000 calc(100% - var(--esmaecer)), transparent 100%);
}
.vitrine .slide { width: clamp(260px, 24vw, 380px); }
.vitrine .slide__foto { aspect-ratio: 3 / 4; }
.vitrine .pontos { display: none; }   /* na esteira os pontos só ficam piscando */

/* título em máscara, fotos uma a uma */
/* só o título, centralizado (sem rótulo e sem setas: a esteira anda sozinha) */
.vitrine__cabecalho { justify-content: center; text-align: center; }

.slide { opacity: 0; }
.slide:nth-child(2) { --i: 1; }
.slide:nth-child(3) { --i: 2; }
.slide:nth-child(n+4) { --i: 3; }
.trilho.is-visible .slide {
  animation: slide-entra 1.1s var(--suave) both;
  animation-delay: calc(.15s + var(--i, 0) * .14s);
}
@keyframes slide-entra {
  from { opacity: 0; translate: 70px 0; scale: .94; filter: blur(6px); }
  to   { opacity: 1; translate: 0 0;    scale: 1;   filter: blur(0); }
}
.slide__foto { scale: 1.15; }
.trilho.is-visible .slide__foto {
  animation: assentar-foto 2.2s var(--suave) both;
  animation-delay: calc(.15s + var(--i, 0) * .14s);
}
@keyframes assentar-foto { from { scale: 1.15; } to { scale: 1; } }

/* ==========================================================================
   FINAL: botão com brilho e halo
   ========================================================================== */
.cta__title { --d: 0s; }

.cta__btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cta__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                       /* entre o fundo do botão e o texto */
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  translate: -120% 0;
  animation: varrer 5s ease-in-out 2s infinite;
}
.cta__btn.is-visible { animation: halo 2.8s ease-out 1.2s infinite; }
.cta__btn:hover { animation: none; }
@keyframes halo {
  0%   { box-shadow: 0 8px 22px rgba(var(--acao-rgb), .3), 0 0 0 0    rgba(var(--acao-rgb), .45); }
  70%  { box-shadow: 0 8px 22px rgba(var(--acao-rgb), .3), 0 0 0 16px rgba(var(--acao-rgb), 0); }
  100% { box-shadow: 0 8px 22px rgba(var(--acao-rgb), .3), 0 0 0 16px rgba(var(--acao-rgb), 0); }
}

/* ==========================================================================
   ROLAGEM (onde o navegador suporta): o topo se afasta, os cards passam por cima
   ========================================================================== */
@supports (animation-timeline: scroll()) {
  .hero__inner {
    animation: hero-sai linear both;
    animation-timeline: scroll(root);
    animation-range: 0px 560px;
  }
  @keyframes hero-sai {
    to { opacity: .15; translate: 0 120px; scale: .92; }
  }
}

/* ---- Celular ----------------------------------------------------------- */
@media (max-width: 560px) {
  .logo { width: min(var(--hero-logo-mobile), 78vw); }
  .ramo { width: 130px; margin-top: 10px; }
  .slide:nth-child(n+2) { --i: 1; }  /* no celular só um slide aparece por vez */
  .vitrine .slide { width: 70vw; }
  /* flores maiores no celular; o corte cai nas folhas da direita, a flor fica inteira */
  .hero::after {
    inset: 0 auto auto -8%;
    width: 135%;
    background-size: 100% auto;
  }
  .vitrine .trilho { gap: 12px; --esmaecer: 44px; }
}

/* ---- Quem pede menos movimento: tudo parado e visível ------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .folha, .polen, .logo::after, .cards .card::before, .cta__btn::after { display: none; }
  .hero::after, .hero__inner, .logo, .anima-linhas .linha > span, .hero__title em, .ramo__haste,
  .ramo__folha, .ramo__fruto, .scroll-hint, .cards .card, .cards .card img,
  .slide, .slide__foto, .cta__btn {
    animation: none !important;
    opacity: 1;
    translate: none;
    scale: none;
    filter: none;
    clip-path: none;
    stroke-dashoffset: 0;
  }
}