/* Hero em camadas (parallax; inspirado em "Parallax Scrolling" do 21st.dev, código próprio):
   fundo de estúdio, o nome grande atrás, as frases de cobrança, a Rafaella recortada na frente e o texto.
   Ao rolar, cada camada anda num ritmo; no fim um "chão" escuro sobe, cobre tudo e a galeria acende por baixo (hero.js). */

:root{--grain-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}   /* grão de filme, usado no hero e na galeria */
.hf{--hf-bg:#090b0f;--hf-ink:#f2efe9;--hf-muted:rgba(242,239,233,.72);position:relative;z-index:1;color:var(--hf-ink)}   /* sem fundo: no fim do filme a galeria aparece por baixo */
.hf-track{position:relative;height:calc(100svh + 190svh)}
.hf-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--hf-bg)}
/* camadas */
.hfp-fundo{position:absolute;inset:-8% -4%;z-index:0;will-change:transform;
  background:radial-gradient(60% 55% at 50% 34%,#8a7a6c 0%,#5e5249 38%,#3a312c 70%,#1d1816 100%)}
.hfp-nome{position:absolute;z-index:1;left:50%;top:clamp(84px,17svh,190px);margin:0;transform:translateX(-50%);white-space:nowrap;pointer-events:none;will-change:transform,opacity;
  font-family:var(--font-headline);font-weight:900;font-size:min(21vw,40svh);line-height:.9;letter-spacing:-.045em;color:rgba(246,239,225,.88)}
.hfp-pessoa{position:absolute;z-index:3;left:50%;bottom:0;height:min(100svh,128vw);aspect-ratio:1682/1402;transform:translateX(-56.7%);transform-origin:50% 100%;will-change:transform;pointer-events:none}   /* sempre presa na base da tela: o corte da foto original nunca aparece */
.hfp-pessoa img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.hfp-chao{position:absolute;left:-2%;right:-2%;bottom:0;height:120%;z-index:6;pointer-events:none;transform:translateY(100%);will-change:transform;
  background:linear-gradient(180deg,rgba(11,13,17,0) 0%,rgba(11,13,17,.85) 10%,#0b0d11 22%)}
/* leitura do texto sobre a foto: escuro à esquerda (computador) e embaixo (celular) */
.hf-shade{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(0deg,rgba(12,10,9,.94) 0%,rgba(12,10,9,.8) 34%,rgba(12,10,9,.35) 58%,rgba(12,10,9,0) 72%)}
/* grão de filme vivo (24 quadros por segundo), sutil */
.hf-grain{position:absolute;inset:-60%;z-index:4;pointer-events:none;opacity:.085;mix-blend-mode:overlay;background-image:var(--grain-light);background-size:220px 220px;
  animation:hfGrain .42s steps(10) infinite}
@keyframes hfGrain{0%{transform:translate(0,0)}10%{transform:translate(-4%,3%)}20%{transform:translate(3%,-5%)}30%{transform:translate(-6%,-2%)}40%{transform:translate(5%,4%)}
  50%{transform:translate(-2%,6%)}60%{transform:translate(6%,-3%)}70%{transform:translate(-5%,-6%)}80%{transform:translate(2%,5%)}90%{transform:translate(-3%,-4%)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){ .hf-grain{animation:none} }
/* celular: o grão animado com mistura de cores pesa na GPU e engasgava a rolagem; fica parado e leve */
@media (max-width:860px), (pointer:coarse){ .hf-grain{animation:none;mix-blend-mode:normal;inset:0;opacity:.05} }
/* luz que acompanha o cursor */

/* barulho: frases de cobrança que abrem espaço ao cursor e são puxadas para o olho */
.hf-noise{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hf-w{position:absolute;left:0;top:0;white-space:nowrap;font:500 12.5px var(--font-body);letter-spacing:.18em;text-transform:uppercase;
  color:rgba(242,239,233,.42);will-change:transform,opacity}
.hf-w.d1{font-size:11px;color:rgba(242,239,233,.3)}
.hf-w.d2{font-size:14px;color:rgba(242,239,233,.52)}

/* texto */
.hf-copy{position:absolute;z-index:5;left:50%;top:auto;bottom:clamp(36px,6svh,72px);transform:translate(-50%,0);width:min(760px,88vw);text-align:center}   /* o rosto fica no alto, o texto embaixo */
.hf-copy .hf-eyebrow{margin-left:auto;margin-right:auto}
.hf-sub{margin-left:auto;margin-right:auto}
.hf-chips,.hf-cta{justify-content:center}
.hf-eyebrow{display:flex;align-items:center;gap:9px;width:fit-content;margin:0 0 18px;padding:7px 15px 7px 11px;border-radius:999px;
  border:1px solid rgba(242,239,233,.32);font:600 12px var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--hf-muted)}
.hf-eyebrow::before{content:'';width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:url(assets/simbolo-arvore-creme.webp) center/contain no-repeat;mask:url(assets/simbolo-arvore-creme.webp) center/contain no-repeat}
.hf-title{margin:0;font-family:var(--font-headline);font-weight:900;font-size:clamp(2.2rem,3.9vw,3.7rem);line-height:1.02;letter-spacing:-.022em}
.hf-title .ln{display:block;padding-bottom:.04em;white-space:nowrap}
.hf-title .ln>span{display:block}
/* cada letra entra em foco (hero.js separa as letras) e respira perto do cursor */
.hf-title .w{display:inline-block;white-space:nowrap}
.hf-title .ch{display:inline-block;font-variation-settings:'wdth' var(--w,100);opacity:0;filter:blur(14px);transform:translateY(.12em) scale(1.06);
  transition:opacity .9s ease,filter 1.2s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1),font-variation-settings .45s ease;
  transition-delay:calc(var(--i,0) * 26ms + .15s),calc(var(--i,0) * 26ms + .15s),calc(var(--i,0) * 26ms + .15s),0s}
.hf.is-on .hf-title .ch{opacity:1;filter:blur(0);transform:none}
.hf-title.is-done .ch{transition:font-variation-settings .45s ease}
.hf-title .ln:nth-child(2){color:#f59e0b}
/* sublinhado que se desenha embaixo de "chegar no limite" */
.hf-title .ln:nth-child(2)>span{position:relative;display:inline-block}
.hf-title .ln:nth-child(2)>span::after{content:'';position:absolute;left:2%;right:2%;bottom:-.02em;height:.08em;border-radius:99px;background:#f59e0b;opacity:.9;
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.65,0,.35,1) 1.05s}
.hf.is-on .hf-title .ln:nth-child(2)>span::after{transform:scaleX(1)}
.hf-sub{margin:16px auto 0;max-width:none;text-wrap:balance;font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.6;color:var(--hf-muted)}
.hf-sub strong{color:var(--hf-ink);font-weight:600}

/* pergunta interativa */
.hf-ask{margin:20px 0 0;padding:0;border:0}
.hf-ask legend{margin:0 0 12px;padding:0;font-family:var(--font-headline);font-weight:800;font-size:1.12rem;color:var(--hf-ink)}
.hf-chips{display:flex;flex-wrap:wrap;gap:8px}
.hf-chip{padding:9px 16px;border-radius:999px;cursor:pointer;border:1px solid rgba(242,239,233,.34);background:rgba(9,11,15,.35);color:var(--hf-ink);
  font:500 14px var(--font-body);transition:background .35s var(--ease),border-color .35s,color .35s,transform .35s var(--ease)}
.hf-chip:hover{border-color:rgba(242,239,233,.8);transform:translateY(-2px)}
.hf-chip[aria-pressed="true"]{background:var(--hf-ink);color:var(--hf-bg);border-color:var(--hf-ink)}
.hf-chip:focus-visible{outline:2px solid #f59e0b;outline-offset:3px}
.hf-note{margin:12px 0 0;min-height:1.5em;font-size:14px;color:var(--hf-muted)}

  .hf-id{display:none;margin:22px 0 0;padding-top:14px;border-top:1px solid rgba(242,239,233,.2);font-size:13px;color:var(--hf-muted)}
.hf-id b{color:var(--hf-ink);font-weight:600}
.hf-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.hf .btn-ghost{color:var(--hf-ink);border-color:rgba(242,239,233,.5)}


/* entrada do texto ao carregar */
.hf .hf-in{opacity:0;transform:translateY(14px)}
.hf.is-on .hf-in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}

@media (max-width:860px){
  .hf-shade{background:linear-gradient(0deg,rgba(9,11,15,.96) 0%,rgba(9,11,15,.88) 36%,rgba(9,11,15,.2) 62%,rgba(9,11,15,0) 75%)}
  .hf-copy{left:18px;right:18px;top:auto;bottom:clamp(64px,10svh,90px);transform:none;width:auto;text-align:center}
  .hf-eyebrow{margin-bottom:10px;padding:5px 10px 5px 8px;gap:6px;font-size:9px;letter-spacing:.06em;white-space:nowrap}
  .hf-eyebrow::before{width:12px;height:12px}
  .hf-title{font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .hf-sub{display:none}
  .hf-ask{margin-top:16px}
  .hf-ask legend{font-size:1rem;margin-bottom:9px}
  .hf-chip{padding:8px 13px;font-size:13px}
  .hf-id{display:none}
  .hf-cta{margin-top:14px}
  .hf-cta .btn{flex:1 1 auto;justify-content:center;text-align:center}
  .hfp-pessoa{bottom:18svh;height:min(67svh,128vw)}   /* rosto no alto; o corpo se desfaz no escuro atrás do texto (pessoa2 já tem a base esmaecida) */
  .hfp-nome{top:clamp(110px,17.5svh,150px);font-size:min(23vw,18svh)}
  .hf-w.d1,.hf-w.d0:nth-child(odd){display:none}            /* menos barulho no celular */
  .hf-w,.hf-w.d2{font-size:10.5px;color:rgba(242,239,233,.38)}
}


@media (prefers-reduced-motion:reduce){
  .hf-track{height:100svh}
  .hf .hf-in,.hf .hf-title .ch{opacity:1;transform:none;filter:none}
}

/* a foto original corta o braço esquerdo: o recorte (pessoa2) se desfaz nas bordas e na base, sem linha de corte em nenhum tamanho de tela */
/* escurecimento de leitura em curva suave (sem "quina": as paradas antigas desenhavam uma linha a 1/3 da altura) */
.hf-shade{background:linear-gradient(0deg,rgba(10,9,9,.95) 0%,rgba(10,9,9,.9) 16%,rgba(10,9,9,.76) 30%,rgba(10,9,9,.56) 42%,rgba(10,9,9,.34) 53%,rgba(10,9,9,.16) 63%,rgba(10,9,9,.05) 72%,rgba(10,9,9,0) 80%) !important}
/* tablet em pé: foto maior (sobrava espaço embaixo) */
@media (min-width:600px) and (max-width:860px){ .hfp-pessoa{bottom:14svh;height:min(75svh,100vw)} .hfp-nome{top:clamp(100px,13svh,150px)} }

/* fundo do hero: roxo da marca junto com o preto (harmoniza com a paleta), luz atrás da cabeça e bordas escuras */
.hfp-fundo{background:
  radial-gradient(42% 46% at 50% 36%,rgba(150,80,210,.55) 0%,rgba(110,40,170,.32) 38%,rgba(82,17,128,0) 72%),
  radial-gradient(90% 80% at 50% 40%,#3a1858 0%,#24102f 45%,#120a17 78%,#08060a 100%) !important}

/* teste: fundo do "Encontre" no hero (?herofundo=encontre) — ameixa escuro, luzes lavanda e âmbar bem suaves se movendo, grão */
.hf.hf-encontre .hfp-fundo{background:#1b1022 !important;overflow:hidden}
.hf-luz{position:absolute;inset:0;overflow:hidden}
.hf-luz i{position:absolute;width:60vmax;aspect-ratio:1;border-radius:50%;filter:blur(60px);opacity:.55;animation:hfLuz 26s ease-in-out infinite alternate}
.hf-luz i:nth-child(1){left:-15vmax;top:-20vmax;background:rgba(140,80,190,.55)}
.hf-luz i:nth-child(2){right:-18vmax;bottom:-25vmax;background:rgba(214,150,86,.30);animation-duration:32s;animation-direction:alternate-reverse}
@keyframes hfLuz{to{transform:translate(8vmax,6vmax) scale(1.12)}}
@media (prefers-reduced-motion:reduce){ .hf-luz i{animation:none} }