/* perf.css — PERFUMARIAS, variações do VIVO (12/09/2026).

   A palavra é dele: "perfumarias". Itens decorativos que não carregam
   conteúdo — tirar qualquer um não muda o que a página diz, só o quanto ela
   parece cuidada. Escolhido por data-perf no <html>:

     magnetismo · os botões sentem o cursor chegando; brilho no logo
     caligrafia · traço que se escreve sob o título; número da seção que gira
     leitura    · a página mostra quanto você já leu

   Cautela: cada uma SOMA ao VIVO (que já tem selo, faixa, clarão e luz no
   cursor), então cada uma é uma família pequena, de dois ou três gestos, e
   nunca repete um gesto que o VIVO já faz. */

/* ======================================================== MAGNETISMO ===== */
/* A atração usa a propriedade `translate`, independente de `transform`: ela
   SOMA com o translateY do hover em vez de disputar a mesma propriedade.
   Briga de transform já apagou efeito nesta prévia (ver mov.css). */
[data-perf~="magnetismo"] .botao,
[data-perf~="magnetismo"] .selo {
  translate: var(--pux-x, 0px) var(--pux-y, 0px);
  transition: translate .35s cubic-bezier(.22, .61, .36, 1);
}

/* brilho que passa pelo logo a cada 9 s (eram 12 até 12/09), recortado no FORMATO do logo: só a
   marca brilha, não o retângulo dela */
[data-perf~="magnetismo"] .nav__marca { position: relative; }
[data-perf~="magnetismo"] .nav__marca::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 240, 205, .95) 50%, transparent 62%);
  background-size: 260% 100%;
  -webkit-mask: url("../midia/logo-houzzes-branco.png") center / 100% 100% no-repeat;
  mask: url("../midia/logo-houzzes-branco.png") center / 100% 100% no-repeat;
  animation: lampejo 9s ease-in-out 1.2s infinite;
  pointer-events: none;
}
@keyframes lampejo {
  0%   { background-position: 160% 0; }
  18%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}

/* ======================================================== CALIGRAFIA ===== */
/* um traço dourado curto se escreve embaixo do título quando a seção entra.
   Curto de propósito (4,6 rem; eram 3,2 até ele não ver diferença em 12/09): sublinhado de largura inteira vira moldura. */
[data-perf~="caligrafia"] .secao__topo h2 {
  background-image: linear-gradient(var(--acento), var(--acento));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 3px;
  padding-bottom: .4em;
  transition: background-size 1.1s cubic-bezier(.22, .61, .36, 1) .45s;
}
[data-perf~="caligrafia"] .secao__topo.visivel h2,
html:not(.js-mov)[data-perf~="caligrafia"] .secao__topo h2 { background-size: 4.6rem 3px; }

/* o sublinhado da navegação se desenha no hover, da esquerda para a direita */
[data-perf~="caligrafia"] .nav a {
  background-image: linear-gradient(var(--acento), var(--acento));
  background-repeat: no-repeat;
  background-position: .55rem calc(100% - .12rem);
  background-size: 0 1px;
  transition: background-size .4s cubic-bezier(.22, .61, .36, 1), color var(--lento), background-color var(--lento);
}
[data-perf~="caligrafia"] .nav a:hover { background-size: calc(100% - 1.1rem) 1px; }

/* o número da seção gira como contador (o JS troca os dígitos); aqui só a
   largura fica travada, para o rótulo não tremer enquanto gira */
[data-perf~="caligrafia"] .rotulo b { display: inline-block; min-width: 1.35em;
  font-variant-numeric: tabular-nums; }

/* ========================================================== LEITURA ====== */
.leitura, .topo { display: none; }

/* o fio que enche na borda de baixo da navegação */
[data-perf~="leitura"] .nav { position: sticky; }
[data-perf~="leitura"] .leitura {
  display: block; position: absolute; left: 0; bottom: -1px; height: 3px;
  width: 100%; transform-origin: left;
  transform: scaleX(var(--lido, 0));
  background: linear-gradient(90deg, var(--acento-2), var(--acento));
  pointer-events: none;
}

/* a navegação se condensa depois do primeiro movimento */
[data-perf~="leitura"] .nav__caixa { transition: padding .35s ease; }
[data-perf~="leitura"] .nav.condensada { background: rgba(12, 9, 8, .95); }
[data-perf~="leitura"] .nav.condensada .nav__caixa { padding-top: .28rem; padding-bottom: .28rem; }

/* voltar ao topo, com um anel que é o próprio progresso */
[data-perf~="leitura"] .topo {
  display: grid; place-items: center;
  position: fixed; right: clamp(.9rem, 3vw, 1.6rem); bottom: clamp(.9rem, 3vw, 1.6rem);
  width: 46px; height: 46px; border-radius: 50%;
  background: conic-gradient(var(--acento) calc(var(--lido, 0) * 360deg), var(--borda) 0);
  text-decoration: none; z-index: 40;
  opacity: 0; translate: 0 12px; pointer-events: none;
  transition: opacity .4s ease, translate .4s cubic-bezier(.22, .61, .36, 1);
}
[data-perf~="leitura"] .topo span {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--sup); color: var(--creme); font-family: var(--maquina); font-size: 1rem;
}
[data-perf~="leitura"] .topo.aparece { opacity: 1; translate: 0 0; pointer-events: auto; }
[data-perf~="leitura"] .topo:hover span { background: var(--elevada); color: var(--acento); }

/* ======================================================== COMPARADOR ===== */
/* 12/09: "não vi diferença entre uma e outra". Três páginas separadas, com
   detalhe pequeno e cada um acontecendo num momento diferente, fazem o olho
   perder a referência. A página de comparação é a MESMA, e esta barra liga uma
   perfumaria por vez (?perf=...) com a instrução do que olhar. */
.comparador {
  position: fixed; left: 50%; bottom: clamp(.8rem, 2.5vw, 1.4rem); transform: translateX(-50%);
  z-index: 45; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .3rem .5rem; width: max-content; max-width: min(94vw, 760px);
  padding: .55rem .8rem; border-radius: 14px;
  background: rgba(12, 9, 8, .94); border: 1px solid var(--borda);
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .7); font-family: var(--maquina);
}
.comparador__rotulo { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--borda-campo); margin-right: .2rem; }
.comparador a { font-size: .8rem; text-decoration: none; color: var(--apoio); padding: .3rem .6rem; border-radius: 8px; }
.comparador a:hover { color: var(--texto); background: var(--sup); }
.comparador__dica { display: none; flex-basis: 100%; margin: .25rem 0 0; text-align: center;
  font-family: var(--casa); font-size: .8rem; line-height: 1.45; color: var(--creme); }
html[data-perf=""] .comparador a[data-p="nenhuma"],
html[data-perf="magnetismo"] .comparador a[data-p="magnetismo"],
html[data-perf="caligrafia"] .comparador a[data-p="caligrafia"],
html[data-perf="leitura"] .comparador a[data-p="leitura"] { color: var(--fundo); background: var(--acento); font-weight: 600; }
html[data-perf=""] .comparador__dica[data-p="nenhuma"],
html[data-perf="magnetismo"] .comparador__dica[data-p="magnetismo"],
html[data-perf="caligrafia"] .comparador__dica[data-p="caligrafia"],
html[data-perf="leitura"] .comparador__dica[data-p="leitura"] { display: block; }
/* o voltar ao topo sobe para não ficar embaixo da barra */
html:has(.comparador)[data-perf~="leitura"] .topo { bottom: clamp(6.5rem, 14vw, 8rem); }

/* ========================================================= respeito ====== */
@media (prefers-reduced-motion: reduce) {
  [data-perf~="magnetismo"] .botao, [data-perf~="magnetismo"] .selo { translate: none !important; }
  [data-perf~="magnetismo"] .nav__marca::after { animation: none !important; display: none; }
  [data-perf~="caligrafia"] .secao__topo h2 { transition: none !important; background-size: 4.6rem 3px !important; }
  [data-perf~="leitura"] .topo { transition: none !important; }
}