/* ==========================================================================
   THE SCENT FLOW - camada visual do site da Elis Maia
   --------------------------------------------------------------------------
   Este arquivo NAO redesenha nada. Ele so cria uma camada decorativa que
   fica ATRAS do conteudo, para dar a impressao de perfume atravessando o
   ambiente. Tirar as duas linhas que chamam scent.css e scent.js devolve o
   site exatamente como estava.

   COMO A CAMADA FICA ATRAS DO TEXTO
   O estilo.css ja tem, na linha 254:
       section > .wrap { position:relative; z-index:1 }
   Ou seja: todo conteudo de secao ja mora no nivel 1. Entao basta a camada
   de perfume ficar no nivel 0 que ela nunca cobre texto, foto nem botao.
   No hero e diferente: la o .wrap e a foto estao no nivel 2 e a poeira que
   ja existia esta no 1, entao a fita entra no 1 tambem - atras da Elis,
   passando pelos vaos.

   E o section ja tem overflow:hidden (mesma linha 254), entao peca larga
   nao cria barra de rolagem lateral em tela nenhuma.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A CAMADA
   position:absolute para nao empurrar nada; pointer-events:none para nunca
   roubar um clique do botao que esta por cima.
   -------------------------------------------------------------------------- */
.scent-camada{
  position:absolute;
  z-index:0;
  pointer-events:none;
  opacity:0;                      /* o JS assume a partir daqui */
  transform:translate3d(0,0,0);
  /* mix-blend-mode:screen garante que a peca so CLAREIA o fundo, nunca
     escurece. E a protecao de contraste: nenhuma foto de produto pode
     ficar mais escura por causa do enfeite. */
  mix-blend-mode:screen;
  backface-visibility:hidden;
}
.scent-camada > img{
  display:block;
  width:100%;
  height:auto;
}
/* will-change so enquanto a secao esta na tela. Deixar fixo em todas as
   camadas reserva memoria de GPU para peca que ninguem esta vendo. */
.scent-camada.scent-ativa{ will-change:transform, opacity; }

.hero .scent-camada{ z-index:1; }


/* --------------------------------------------------------------------------
   A ELIS RECORTADA
   Com a foto sem fundo, a fita de perfume passa ATRAS dela de verdade: a
   camada esta no nivel 1 e ela no 2, entao o desenho aparece por todo o
   espaco que antes era fundo preto do estudio.

   Duas correcoes que o recorte exige:

   1. O .hero-photo:after do site pinta degrades da cor do fundo na ESQUERDA
      e na DIREITA. Eles existiam para dissolver a borda reta da foto antiga.
      Com recorte nao ha borda nenhuma para esconder - e esses degrades
      passariam a escurecer os bracos dela. Ficam so o de baixo, que agora
      serve para assentar a figura no escuro em vez de corta-la.

   2. object-fit:cover cortaria os bracos dela numa linha reta vertical.
      Com contain a figura inteira cabe, ancorada embaixo.
   -------------------------------------------------------------------------- */
/* O :after do site e uma CAMADA POR CIMA, do tamanho da coluna (400px).
   Como a figura recortada passa dessa coluna, o escurecimento de baixo
   terminava numa LINHA RETA VERTICAL bem no meio das caixas - o risco.
   Solucao: a sobreposicao sai, e o esmaecimento de baixo passa a ser uma
   MASCARA na propria imagem. Mascara acompanha a imagem, entao nao existe
   borda onde ela possa terminar. */
.hero-photo.hero-recorte::after{ display:none !important; }
/* TAMANHO DA FIGURA
   Regra: ela SO cresce para a direita, para dentro da sobra de tela que
   existe fora do conteudo (o .wrap trava em 1240px). Para a esquerda ela
   nunca avanca sobre a coluna de texto.

   Os numeros abaixo nao sao chute: foram medidos em 375, 430, 768, 1024,
   1280, 1440 e 1920, conferindo a folga entre a borda esquerda dela e a
   palavra mais a direita do texto. Em nenhuma largura a folga e negativa.
   O "right" negativo empurra a figura para essa sobra de tela. */
.hero-photo.hero-recorte img{
  position:absolute;
  bottom:0;
  right:calc(0px - max(0px, (100vw - 1264px) / 2));
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  object-fit:contain !important;
  /* assenta a figura no escuro, seguindo a propria imagem */
  -webkit-mask-image:linear-gradient(to top, transparent 0, #000 8%);
          mask-image:linear-gradient(to top, transparent 0, #000 8%);
}
/* Sem sobra de tela, ela cabe exatamente na coluna e nao transborda nada. */
@media(min-width:1301px){
  .hero-photo.hero-recorte img{ width:118% !important; }
}
@media(min-width:1601px){
  .hero-photo.hero-recorte img{ width:150% !important; }
}

/* CELULAR
   Aqui o hero empilha: a foto em cima, o texto embaixo. Nao ha coluna de
   texto ao lado para respeitar, entao ela pode ocupar a largura toda,
   centralizada e ancorada embaixo - e a leitura fica melhor do que
   espremida num canto. */
@media(max-width:900px){
  .hero-photo.hero-recorte img{
    position:absolute;
    right:auto !important; left:50% !important;
    transform:translateX(-50%);
    width:auto !important; height:100% !important;
  }
}


/* --------------------------------------------------------------------------
   BORDA SUAVE NAS FOTOS   (opcional - so com ?suave=1 no endereco)
   O site ja faz isso no hero: o .hero-photo:after dissolve as bordas da foto
   na cor do fundo, e a nota no estilo.css conta que foi de proposito, porque
   o olho pegava a emenda. Aqui a mesma ideia vira mascara nas fotos grandes
   das secoes escuras.

   NAO arredonda canto: o site usa raio so em circulo e botao: foto de canto
   reto e escolha da identidade, nao descuido.

   So as fotos GRANDES entram. Cartao de produto fica de fora: apagar a
   beirada de um rotulo e apagar informacao.
   -------------------------------------------------------------------------- */
html.scent-suave .chegando img,
html.scent-suave .foto-dupla img,
html.scent-suave .faixa-foto img,
html.scent-suave .s-img img,
html.scent-suave .hub-fotos img,
html.scent-suave .mosaico img,
html.scent-suave .ig-grade img,
html.scent-suave .galeria img{
  -webkit-mask-image:
     linear-gradient(to right,  transparent 0, #000 6%, #000 94%, transparent 100%),
     linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image:
     linear-gradient(to right,  transparent 0, #000 6%, #000 94%, transparent 100%),
     linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
html.scent-suave img[src*="logo"]{
  -webkit-mask-image:none !important;
          mask-image:none !important;
}


/* --------------------------------------------------------------------------
   PAGINA DA COLECAO  (/collection/)
   La os blocos principais sao <div>, nao <section>, entao nao herdam o
   "position:relative; overflow:hidden" que o estilo.css da as secoes. Sem
   isso a camada de perfume escaparia e criaria rolagem lateral.

   O cartao de produto NAO ganha borda dissolvida: o .card-foto tem fundo
   proprio claro (--ivory-2), e apagar a beirada revelaria um halo claro em
   volta da foto. Ali a borda reta e o desenho do cartao.
   -------------------------------------------------------------------------- */
.col-topo, #grade{ position:relative; overflow:hidden; }
.col-topo > .wrap{ position:relative; z-index:1; }
#grade > .card{ z-index:1; }

/* --------------------------------------------------------------------------
   DIVISOR
   Entra com mascara, da esquerda para a direita. Roda uma vez por visita,
   quando a secao aparece - nao e animacao continua.
   -------------------------------------------------------------------------- */
.scent-divisor{
  clip-path:inset(0 100% 0 0);
  -webkit-clip-path:inset(0 100% 0 0);
  transition:clip-path 1.9s cubic-bezier(.22,.61,.36,1),
             -webkit-clip-path 1.9s cubic-bezier(.22,.61,.36,1);
}
.scent-divisor.scent-revelado{
  clip-path:inset(0 0 0 0);
  -webkit-clip-path:inset(0 0 0 0);
}

/* --------------------------------------------------------------------------
   BRILHO DO BOTAO PRINCIPAL
   Luz de ambiente quente atras do "Book a consultation". Nao e botao neon:
   o brilho fica FORA do botao, desfocado, e so cresce um pouco no hover.
   -------------------------------------------------------------------------- */
.scent-cta{ position:relative; }
.scent-cta::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:230%; height:340%;
  transform:translate3d(-50%,-50%,0) scale(.92);
  background:radial-gradient(closest-side,
              rgba(235,50,3,.34), rgba(235,50,3,.12) 45%, transparent 72%);
  opacity:.55;
  pointer-events:none;
  z-index:-1;
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
.scent-cta:hover::before,
.scent-cta:focus-visible::before{
  opacity:.9;
  transform:translate3d(-50%,-50%,0) scale(1.06);
}

/* --------------------------------------------------------------------------
   MOVIMENTO REDUZIDO
   Quem pediu para o sistema parar de animar recebe a peca PARADA, nao a
   peca sumida: o desenho continua, so nao se mexe.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .scent-camada{ transition:none !important; }
  .scent-divisor{
    clip-path:inset(0 0 0 0) !important;
    -webkit-clip-path:inset(0 0 0 0) !important;
    transition:none !important;
  }
  .scent-cta::before{ transition:none !important; }
}

/* --------------------------------------------------------------------------
   MODO DEPURACAO   ?scentDebug=true
   So aparece quando o endereco pede. Em uso normal nada disto existe.
   -------------------------------------------------------------------------- */
.scent-debug .scent-camada{
  outline:1px dashed rgba(242,100,58,.85);
  mix-blend-mode:normal;
}
.scent-debug .scent-camada::after{
  content:attr(data-scent);
  position:absolute; left:0; top:0;
  font:600 10px/1.5 ui-monospace,Consolas,monospace;
  letter-spacing:.04em;
  background:rgba(242,100,58,.92); color:#12100F;
  padding:1px 6px; white-space:nowrap;
}
.scent-debug [data-scent-secao]{
  outline:1px solid rgba(120,200,255,.35);
  outline-offset:-1px;
}
.scent-debug [data-scent-secao]::before{
  content:attr(data-scent-secao);
  position:absolute; right:0; top:0; z-index:9;
  font:600 10px/1.6 ui-monospace,Consolas,monospace;
  background:rgba(120,200,255,.9); color:#06131C;
  padding:1px 8px;
}
.scent-painel{
  position:fixed; right:12px; bottom:12px; z-index:9999;
  max-height:52vh; overflow:auto;
  background:rgba(10,7,8,.94); border:1px solid rgba(242,100,58,.5);
  border-radius:8px; padding:10px 12px;
  font:11.5px/1.5 ui-monospace,Consolas,monospace; color:#E8E1D7;
  pointer-events:none; min-width:262px;
}
.scent-painel h4{
  margin:0 0 6px; font:600 11px/1.4 ui-monospace,Consolas,monospace;
  letter-spacing:.08em; text-transform:uppercase; color:#F2643A;
}
.scent-painel .l{ display:flex; justify-content:space-between; gap:14px; }
.scent-painel .l b{ font-weight:600; color:#B7ACA1; }
.scent-painel .barra{
  height:3px; background:#2B2422; border-radius:2px; margin:2px 0 5px;
}
.scent-painel .barra i{ display:block; height:100%; background:#F2643A; border-radius:2px; }