/* Loja Shark · catálogo
   Topo: as coleções viram "zonas" do mar, círculos de feltro presos por uma linha de costura.
   Abaixo: barra de busca grudada com a sonda de profundidade e a grade com o Kit Pia Seca em destaque.

   MAPA DE EFEITOS (rolagem · motion.js) — nenhum efeito se repete em blocos vizinhos
   1. Rótulo "35 achados"      → número que conta ao entrar
   2. Título "Escolha a zona"  → letras que afundam no mar (descem, desfocam e somem em onda) ao mergulhar
   3. Lead                     → parallax lento (sobe mais devagar que o título e esmaece)
   4. Zonas (coleções)         → cada círculo flutua numa profundidade própria (parallax por zona, JS)
   5. Linha de costura         → se costura com a rolagem (máscara stroke-dashoffset) com a agulha na ponta
   6. Bolhas do topo           → camada de profundidade: sobem mais rápido que a página ao rolar
   7. Barra de busca           → muda de forma ao grudar: encolhe para cápsula de vidro escuro; sonda vira
                                 um medidor redondo que enche de água conforme você desce pela grade
   8. Cartão estrela Kit Pia Seca → bolhas que sobem conforme a rolagem (cada uma numa velocidade, esticam com --vel)
                                 + faixa de brilho que varre o cartão quando ele cruza o centro da tela
   9. Grade de produtos        → onda diagonal por coluna: o cartão vem deitado na água (rotateX), afunda
                                 e volta à tona, com leve giro alternado por coluna; ao sair por cima, inclina para trás
  10. Estado vazio             → tubarão espiando (balanço contínuo, já existente)
   Sem JS ou com prefers-reduced-motion: nada disso é aplicado (classe .m-on só entra pelo catalogo.js).

   OTIMIZAÇÃO (rodada 3) — mesmos efeitos, mais baratos:
   - nada de will-change nos cartões/zonas; --p/--e/--c não herdam (@property): mudar um cartão não recalcula os filhos;
     e só recebem escrita quando estão perto da tela (motion.js); colunas só recalculam em resize/filtro
   - título: blur só enquanto as letras afundam (zera ao assentar); no celular troca blur por opacidade + escala
     e, com mais de 24 letras, divide por palavras
   - costura: o ponto da agulha é calculado em JS (sem getTotalLength/getPointAtLength a cada quadro)
   - barra: troca de classe instantânea + FLIP (só transform/opacity, Web Animations) em vez de animar
     max-width/padding/width; grudar é detectado por IntersectionObserver e a profundidade vem do motion.js
   - cartão estrela: no celular, clip-path vira transform e o brilho deixa de usar mix-blend-mode
   OTIMIZAÇÃO (rodada 4, medida com toque real + CPU 4x mais lenta) — o gargalo era o recálculo de estilo por quadro:
   - cartões comuns: o motion.js mede um sensor vazio dentro do cartão e o catalogo.js escreve transform/opacity
     (variável no cartão recalculava ele e 7 filhos); a conta da onda é a mesma de antes
   - --vel/--rolagem não herdam (abaixo); as bolhas do topo e do cartão estrela deixaram de ser [data-global]
     e só recebem valor enquanto estão na tela; --gp vai na sonda, não na barra inteira
   - animações infinitas do topo pausam com o topo fora da tela (.cat-mar.fora) */
/* As variáveis do motion.js deixam de herdar sozinhas: quando --p/--e/--c mudam num cartão, o Chrome
   recalcula só o cartão (e não os ~15 filhos de cada um). Quem precisa do valor do pai pede com "inherit". */
@property --p { syntax: '*'; inherits: false; }
@property --e { syntax: '*'; inherits: false; }
@property --c { syntax: '*'; inherits: false; }
@property --k { syntax: '*'; inherits: false; }
@property --s { syntax: '*'; inherits: false; }
.cat-mar-topo * { --p: inherit; --e: inherit; --c: inherit; }
/* no cartão estrela, só a trilha até quem usa o valor (bolhas, brilho, foto, mordida): os outros ~20 nós
   do cartão deixam de ser recalculados a cada quadro em que ele está na tela */
.card-estrela > .estrela-bolhas, .estrela-bolhas > i, .card-estrela > .estrela-brilho, .card-estrela > .estrela-foto, .estrela-foto > img,
.card-estrela > .estrela-texto, .estrela-texto > .estrela-preco, .estrela-preco > .estrela-mordida { --p: inherit; --e: inherit; --c: inherit; }
/* --vel/--rolagem (motion.js, a cada quadro) também deixam de herdar nesta página: sem isso, cada escrita no
   .cabecalho recalcula o cabeçalho inteiro. Só a trilha de quem usa (barra de nível, logo, bolhas da estrela) pede o valor. */
@property --vel { syntax: '*'; inherits: false; }
@property --rolagem { syntax: '*'; inherits: false; }
.cabecalho::after { --rolagem: inherit; }
.cabecalho > .container, .cabecalho .logo, .cabecalho .logo img, .estrela-bolhas > i { --vel: inherit; }
/* medidor: caixa vazia do tamanho do bloco; o motion.js escreve nele (sem filhos para recalcular) */
.cat-medidor { position: absolute; inset: 0; pointer-events: none; visibility: hidden; }
body { --fundo-antes-rodape: #D3EAF9; }

/* ---------- topo: o mar de zonas ---------- */
.cat-mar {
  position: relative; overflow: hidden;
  padding: clamp(36px, 6vw, 72px) 0 clamp(18px, 3vw, 34px);
  background:
    radial-gradient(1100px 380px at 85% -10%, rgba(53, 203, 232, .18), transparent 70%),
    radial-gradient(800px 320px at 0% 10%, rgba(30, 127, 212, .10), transparent 70%),
    linear-gradient(180deg, var(--espuma) 0%, #E8F4FC 100%);
}
.cat-bolhas { position: absolute; inset: 0; pointer-events: none; }
.cat-bolhas i { position: absolute; bottom: -30px; border-radius: 50%; border: 1.5px solid rgba(30, 127, 212, .22); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.8), rgba(255,255,255,0) 60%); animation: cat-sobe linear infinite; }
@keyframes cat-sobe { to { transform: translateY(-560px) translateX(24px); opacity: 0; } }

.cat-mar-topo { position: relative; max-width: 820px; text-align: center; }
.cat-mar-topo h1 { font-size: clamp(36px, 6vw, 68px); margin: 12px 0 14px; letter-spacing: -.03em; }
.cat-mar-topo h1 em { font-style: normal; color: var(--oceano); position: relative; white-space: nowrap; }
.cat-mar-topo h1 em::after {
  content: ''; position: absolute; left: 2%; right: 4%; bottom: -.08em; height: .2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 30 2, 50 2, 70 7 S 110 13, 130 7 S 170 2, 198 6' fill='none' stroke='%2335CBE8' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.cat-mar-topo .lead { max-width: 560px; margin: 0 auto; }

/* zonas */
.zonas-trilho { position: relative; margin-top: clamp(26px, 4vw, 46px); }
.zonas {
  position: relative;
  display: flex; justify-content: space-between; gap: 8px;
  padding: 6px 4px 30px;
}
.zonas-linha { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.zonas-linha path { fill: none; stroke: var(--oceano); stroke-opacity: .45; stroke-width: 2; stroke-dasharray: 7 8; stroke-linecap: round; animation: cat-costura 30s linear infinite; }
@keyframes cat-costura { to { stroke-dashoffset: -300; } }

.zona {
  --tam: clamp(96px, 9.6vw, 136px);
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: calc(var(--tam) + 8px);
  transition: transform .5s var(--ease-mola);
}
.zona:nth-child(even) { transform: translateY(26px); }
.zona-circulo {
  width: var(--tam); height: var(--tam); border-radius: 50%;
  display: grid; place-items: center;
  filter: drop-shadow(0 10px 16px rgba(10, 37, 64, .16));
  transition: transform .5s var(--ease-mola), filter .4s;
  animation: cat-boia 6s ease-in-out infinite; animation-delay: calc(var(--i) * -.85s);
}
.zona-circulo > img { width: 100%; height: 100%; object-fit: contain; }
@keyframes cat-boia { 50% { transform: translateY(-6px) rotate(-2deg); } }
.zona-tudo {
  position: relative; width: 94%; height: 94%; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #1A4A78, var(--navy) 70%);
}
.zona-tudo::before { content: ''; position: absolute; inset: 6%; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .55); }
.zona-tudo img { width: 66%; height: auto; aspect-ratio: 1; object-fit: contain; padding: 13% 11%; border-radius: 50%; background: var(--espuma); }
.zona-prof { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--texto-3); margin-top: 8px; }
.zona-nome { font-weight: 800; font-size: 15px; letter-spacing: -.01em; padding: 3px 12px; border-radius: 999px; transition: background .3s, color .3s; white-space: nowrap; }
.zona-qtd { font-size: 12.5px; color: var(--texto-2); }
.zona:hover .zona-circulo { transform: translateY(-8px) scale(1.04); }
.zona.ativa .zona-circulo { transform: scale(1.1); filter: drop-shadow(0 14px 22px rgba(30, 127, 212, .35)) drop-shadow(0 0 0 rgba(0,0,0,0)); animation: none; }
.zona.ativa .zona-nome { background: var(--navy); color: #fff; }
.zona.ativa .zona-prof { color: var(--oceano); }
.zona.ativa::before {
  content: ''; position: absolute; top: -10px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  border: 1.5px solid var(--ciano); background: rgba(255,255,255,.6);
  animation: cat-bolha-ativa 2.4s ease-in infinite;
}
/* topo fora da tela (classe .fora posta pelo catalogo.js): boias, bolhas e costura param. Mesmo no compositor,
   animações rodando encarecem o recálculo de estilo de cada quadro de rolagem pela grade */
.cat-mar.fora .zona-circulo, .cat-mar.fora .cat-bolhas i, .cat-mar.fora .zona.ativa::before, .cat-mar.fora .zonas-linha path { animation-play-state: paused; }
@keyframes cat-bolha-ativa { from { transform: translateY(0) scale(.6); opacity: 1; } to { transform: translateY(-38px) scale(1.2); opacity: 0; } }

@media (max-width: 980px) {
  .zonas-trilho { padding: 0; max-width: none; }
  .zonas {
    justify-content: flex-start; gap: 6px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    padding: 18px var(--gutter) 34px; scrollbar-width: none;
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent);
    mask: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent);
  }
  .zonas::-webkit-scrollbar { display: none; }
  .zona { scroll-snap-align: center; flex: none; --tam: 92px; }
  .zona:nth-child(even) { transform: translateY(20px); }
  .zona-nome { font-size: 14px; }
}

/* ---------- barra de busca grudada ---------- */
.cat-loja { position: relative; padding-bottom: clamp(60px, 8vw, 110px); background: linear-gradient(180deg, #E8F4FC 0%, #DCEFFB 50%, #D3EAF9 100%); }
.cat-sentinela { height: 1px; margin-bottom: -1px; pointer-events: none; }
.cat-barra-wrap { position: sticky; top: var(--header-h); z-index: 30; padding: 12px 0; transition: background .3s; }
.cat-barra-wrap.grudou { background: linear-gradient(180deg, rgba(232, 244, 252, .92), rgba(232, 244, 252, 0)); }
.cat-barra {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: 6px;
}
/* o fundo da barra é uma camada própria: assim a mudança de forma ao grudar anima só com transform */
.cat-barra-fundo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; transform-origin: 0 0;
  border-radius: 999px; background-color: rgba(255, 255, 255, .9); box-shadow: var(--sombra-s);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background-color .3s, box-shadow .3s;
}
.cat-barra-wrap.grudou .cat-barra-fundo { box-shadow: var(--sombra); }
/* celular: vidro fosco grudado custa caro a cada quadro de rolagem → cor quase sólida (mesmo visual) */
.pouca-forca .cat-barra-fundo { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(255, 255, 255, .97); }
.pouca-forca .m-on .cat-barra-wrap.grudou .cat-barra-fundo { background-color: rgba(10, 37, 64, .93); }
.cat-busca { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 16px; height: 48px; border-radius: 999px; background: var(--espuma); }
.cat-busca svg { width: 20px; height: 20px; color: var(--texto-3); flex: none; }
.cat-busca input { flex: 1; min-width: 0; border: 0; background: none; height: 100%; font-weight: 600; font-size: 16px; outline: none; }
.cat-busca input::-webkit-search-cancel-button { display: none; }
.cat-busca:focus-within { box-shadow: inset 0 0 0 2px var(--oceano); background: #fff; }
.cat-busca-limpar { width: 32px; height: 32px; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--texto-2); background: #fff; flex: none; }
.cat-ordem { position: relative; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 6px 0 16px; border-radius: 999px; }
.cat-ordem .rotulo { color: var(--texto-3); font-size: 11px; }
.cat-ordem select {
  appearance: none; -webkit-appearance: none; border: 0; height: 40px; border-radius: 999px;
  padding: 0 38px 0 16px; font-weight: 700; font-size: 15px; background: var(--espuma) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2540' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat;
  cursor: pointer;
}
.cat-ordem select:focus-visible { outline: 2px solid var(--oceano); }
.cat-sonda { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 48px; min-width: 76px; padding: 0 14px; border-radius: 999px; background: var(--navy); color: #fff; }
.cat-sonda .rotulo { color: var(--ciano); font-size: 9.5px; line-height: 1; }
.cat-sonda b { font-family: var(--mono); font-weight: 500; font-size: 14px; line-height: 1.3; font-variant-numeric: tabular-nums; }

@media (max-width: 680px) {
  .cat-barra { flex-wrap: wrap; border-radius: 26px; }
  .cat-barra-fundo { border-radius: 26px; }
  .cat-busca { flex-basis: 100%; }
  .cat-ordem { flex: 1; padding: 0 0 0 10px; height: 44px; }
  .cat-ordem select { flex: 1; min-width: 0; }
  .cat-sonda { height: 44px; min-width: 70px; }
}

/* ---------- status + grade ---------- */
.cat-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 4px 18px; min-height: 36px; color: var(--texto-2); font-size: 15px; }
.cat-status b { color: var(--navy); }
.cat-limpar { font-weight: 700; font-size: 14px; color: var(--oceano); padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: var(--sombra-s); }
.cat-grade { grid-auto-flow: dense; }

/* cartão estrela: Kit Pia Seca */
.card-estrela {
  position: relative; isolation: isolate; overflow: hidden;
  grid-column: span 2; grid-row: span 2;
  display: flex; flex-direction: column;
  border-radius: var(--raio-l);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(53, 203, 232, .32), transparent 60%),
    linear-gradient(170deg, #1A6FC2 0%, var(--navy-2) 45%, var(--navy) 100%);
  color: #fff; box-shadow: var(--sombra);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card-estrela:hover { transform: translateY(-6px); box-shadow: var(--sombra-l); }
.card-estrela .link-cheio { position: absolute; inset: 0; z-index: 1; }
.estrela-foto { order: -1; position: relative; padding: 18px 18px 0; }
.estrela-foto img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 62%;
  border-radius: 22px; background: #fff;
  box-shadow: 0 20px 40px rgba(4, 18, 34, .35);
  transition: transform .8s var(--ease);
}
.card-estrela:hover .estrela-foto img { transform: scale(1.02) rotate(-.6deg); }
.estrela-texto { position: relative; padding: 20px clamp(18px, 2.4vw, 30px) clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.estrela-rotulo { color: var(--ciano); }
.card-estrela h2 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.03em; }
.estrela-slogan { font-weight: 700; font-size: 18px; color: #DCEFFB; }
.estrela-desc { color: #B9D3EA; font-size: 15px; max-width: 46ch; }
.estrela-preco { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 10px; }
.estrela-preco b { display: block; font-size: clamp(28px, 3vw, 36px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.estrela-preco .preco-de { color: #8FB0CC; }
.estrela-preco small { display: block; color: #B9D3EA; font-size: 13px; }
.estrela-mordida {
  flex: none; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: var(--coral); color: #fff; font-weight: 800; font-size: 19px; letter-spacing: -.02em;
  -webkit-mask: radial-gradient(circle 13px at 88% 12%, transparent 98%, #000);
  mask: radial-gradient(circle 13px at 88% 12%, transparent 98%, #000);
  transform: rotate(-8deg);
}
.estrela-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; position: relative; z-index: 2; }
.estrela-acoes .btn { flex: 1 1 auto; min-height: 50px; }
.estrela-ver { --bg: rgba(255,255,255,.12); --fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
.estrela-ver:hover { --bg: rgba(255,255,255,.2); }
/* celular: o botão de vidro (backdrop-filter do .btn-fantasma) anda junto com o cartão que emerge; sobre o navy liso
   o desfoque não aparece, só custa recompor a cada quadro */
.pouca-forca .estrela-ver { -webkit-backdrop-filter: none; backdrop-filter: none; }
.estrela-bolhas { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.estrela-bolhas i { position: absolute; bottom: -20px; border-radius: 50%; border: 1.5px solid rgba(53, 203, 232, .45); animation: cat-sobe 9s linear infinite; }
.estrela-bolhas i:nth-child(1) { left: 12%; width: 12px; height: 12px; animation-delay: -1s; }
.estrela-bolhas i:nth-child(2) { left: 38%; width: 8px; height: 8px; animation-delay: -4s; animation-duration: 11s; }
.estrela-bolhas i:nth-child(3) { left: 64%; width: 16px; height: 16px; animation-delay: -6s; }
.estrela-bolhas i:nth-child(4) { left: 82%; width: 10px; height: 10px; animation-delay: -2.5s; animation-duration: 12s; }
.estrela-bolhas i:nth-child(5) { left: 92%; width: 6px; height: 6px; animation-delay: -8s; }

@media (max-width: 560px) {
  .card-estrela { grid-row: auto; border-radius: 26px; }
  .estrela-foto { padding: 12px 12px 0; }
  .estrela-foto img { border-radius: 18px; }
  .estrela-texto { padding: 16px 18px 20px; }
  .estrela-slogan { font-size: 16px; }
  .estrela-desc { font-size: 14px; }
  .estrela-mordida { width: 58px; height: 58px; font-size: 16px; }
}

/* estado vazio */
.cat-vazio { text-align: center; display: grid; justify-items: center; gap: 12px; padding: 30px 10px 20px; }
.cat-vazio img { width: min(260px, 70vw); height: auto; animation: cat-espia 4s ease-in-out infinite; }
@keyframes cat-espia { 0%, 100% { transform: translateY(6px); } 45%, 60% { transform: translateY(-6px) rotate(-2deg); } }
.cat-vazio h2 { font-size: clamp(26px, 3.4vw, 36px); }
.cat-vazio p { color: var(--texto-2); max-width: 440px; }
.cat-vazio-acoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .zona-circulo, .zonas-linha path, .cat-vazio img { animation: none; }
}
.cat-vazio[hidden], .cat-status [hidden] { display: none; }
/* "a partir de" em linha própria (evita quebrar o preço no meio) */
.cat-grade .preco-atual small { display: block; line-height: 1.2; }

/* a sombra da gaveta do carrinho fechada vazava na borda direita (ver relatório) */
.gaveta:not(.aberto) { box-shadow: none; }

/* =========================================================
   MOVIMENTO LIGADO À ROLAGEM (só com body.m-on)
   ========================================================= */
/* 2. letras que afundam */
.m-on #cat-titulo .m-letra, .m-on #cat-titulo.por-palavras .m-palavra {
  --s: clamp(0, calc((var(--c, 0) * -1 - .32) * 2.4 - var(--i) / var(--n, 20) * .7), 1);
  translate: 0 calc(var(--s) * .55em);
  rotate: calc(var(--s) * 9deg);
  opacity: calc(1 - var(--s) * .85);
}
/* o desfoque só existe enquanto afunda (a classe sai quando o título assenta → filter: none) */
.m-on .cat-mar-topo.afundando #cat-titulo .m-letra { filter: blur(calc(var(--s) * 5px)); }
/* celular: no lugar do blur, some um pouco mais e encolhe (mesma sensação de afundar ao longe) */
.pouca-forca .m-on #cat-titulo .m-letra, .pouca-forca .m-on #cat-titulo.por-palavras .m-palavra { opacity: calc(1 - var(--s) * .95); scale: calc(1 - var(--s) * .14); }
.pouca-forca .m-on .cat-mar-topo.afundando #cat-titulo .m-letra { filter: none; }
.m-on #cat-titulo { --n: 26; }
/* 3. lead em parallax lento */
.m-on .cat-mar-topo .lead { translate: 0 calc(var(--c, 0) * -26px); opacity: clamp(.25, calc(1.35 + var(--c, 0) * 1.1), 1); }
.m-on .cat-mar-topo > .rotulo { translate: 0 calc(var(--c, 0) * 18px); }

/* 4/5. zonas e costura */
.m-on .zonas-linha path.costura-pontos { animation: none; }
.zonas-linha .costura-revela { fill: none; stroke: #fff; stroke-opacity: 1; stroke-width: 12; stroke-linecap: butt; stroke-dasharray: 1 1; stroke-dashoffset: 0; animation: none; }
.zonas-linha .agulha { transition: opacity .4s; }
.zonas-linha .agulha-corpo { stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; stroke-opacity: 1; stroke-dasharray: none; fill: none; animation: none; }
.zonas-linha .agulha-olho { fill: #fff; stroke: none; }

/* 6. bolhas do topo numa camada mais funda: sobem mais rápido que a página (translate escrito pelo catalogo.js,
   só enquanto o topo está na tela; antes era var(--rolagem) escrita pelo motion.js a cada quadro) */

/* 7. barra que muda de forma ao grudar
   A forma muda por troca de classe (sem transição de max-width/padding/width); o "derreter" de uma forma
   para outra é um FLIP feito no catalogo.js: o fundo (.cat-barra-fundo) e cada peça partem do retângulo
   antigo e deslizam até o novo só com transform/opacity. */
.m-on .cat-barra { max-width: 100%; margin: 0 auto; }
.m-on .cat-barra-wrap.grudou .cat-barra { max-width: 820px; padding: 5px; }
.m-on .cat-barra-wrap.grudou .cat-barra-fundo {
  border-radius: 26px; background-color: rgba(10, 37, 64, .86); box-shadow: 0 14px 36px rgba(10, 37, 64, .28);
}
.m-on .cat-barra-wrap.grudou { background: none; }
.m-on .grudou .cat-busca { background: rgba(255, 255, 255, .96); }
.m-on .grudou .cat-ordem .rotulo { color: #8FB0CC; }
.m-on .grudou .cat-ordem select { background-color: rgba(255, 255, 255, .14); color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.m-on .grudou .cat-ordem select option { color: var(--navy); }
.m-on .cat-sonda { position: relative; overflow: hidden; isolation: isolate; transition: background-color .3s; }
.m-on .cat-sonda::before { /* água dentro da sonda */
  content: ''; position: absolute; left: -10%; right: -10%; top: 0; bottom: -6px; z-index: -1;
  background: linear-gradient(180deg, var(--ciano), var(--oceano));
  border-radius: 45% 55% 0 0 / 14px 14px 0 0;
  transform: translateY(calc((1 - var(--gp, 0)) * 100%));
  opacity: .9;
}
.m-on .grudou .cat-sonda { min-width: 48px; width: 48px; padding: 0; border-radius: 50%; background: #06182C; box-shadow: inset 0 0 0 2px rgba(53, 203, 232, .5); }
.m-on .grudou .cat-sonda .rotulo { display: none; }
.m-on .grudou .cat-sonda b { font-size: 11px; }
@media (max-width: 680px) {
  .m-on .cat-barra-wrap.grudou .cat-barra-fundo { border-radius: 24px; }
  .m-on .grudou .cat-busca { height: 44px; }
  .m-on .grudou .cat-sonda { width: 44px; min-width: 44px; height: 44px; }
  /* grudada no celular: as duas linhas viram uma cápsula só */
  .m-on .grudou .cat-barra { flex-wrap: nowrap; gap: 6px; }
  .m-on .grudou .cat-busca { flex-basis: auto; padding-left: 12px; gap: 6px; }
  .m-on .grudou .cat-busca svg { width: 18px; height: 18px; }
  .m-on .grudou .cat-ordem { flex: 0 0 112px; padding: 0; height: 44px; }
  .m-on .grudou .cat-ordem .rotulo { display: none; }
  .m-on .grudou .cat-ordem select { height: 40px; font-size: 13.5px; padding: 0 26px 0 12px; background-position: right 8px center; background-size: 14px; }
}

/* 8. cartão estrela: bolhas pela rolagem + brilho que varre */
.m-on .estrela-bolhas i {
  animation: none; bottom: auto; left: var(--x); top: var(--y); width: var(--t); height: var(--t);
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 60%);
  transform: translateY(calc(var(--p, 0) * var(--v) * -620px)) translateX(calc(var(--p, 0) * var(--v) * 22px)) scaleY(calc(1 + var(--vel, 0) * var(--v) * .35));
  opacity: clamp(0, calc(1.1 - var(--p, 0) * var(--v) * .9), 1);
}
.estrela-brilho { display: none; }
.m-on .estrela-brilho {
  display: block; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .16) 45%, rgba(190, 240, 252, .28) 50%, rgba(255, 255, 255, .16) 55%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(calc(80% + var(--c, 0) * 260%)) skewX(-16deg);
  mix-blend-mode: screen;
}
.m-on .card-estrela .estrela-foto img { translate: 0 calc(var(--c, 0) * 18px); }
/* celular: o brilho sem mix-blend-mode (que obriga a recompor o cartão inteiro a cada quadro) — mesmo tom claro */
.pouca-forca .m-on .estrela-brilho { mix-blend-mode: normal; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .09) 45%, rgba(205, 244, 253, .17) 50%, rgba(255, 255, 255, .09) 55%, rgba(255, 255, 255, 0) 100%); }
.m-on .card-estrela .estrela-mordida { rotate: calc(var(--c, 0) * 18deg); }

/* 9. grade em onda diagonal, cartão afundando e voltando
   A conta (onda por coluna --k, inclinação ao sair --s) é feita no catalogo.js (ondaCartao) e escrita no cartão
   como transform/opacity; o motion.js mede um sensor vazio dentro do cartão (variáveis no cartão recalculavam
   os filhos dele a cada quadro). */
.cat-grade .m-sensor { position: absolute; inset: 0; pointer-events: none; visibility: hidden; contain: strict; }
.m-on .cat-grade > .card-produto.onda {
  filter: none; transform-origin: 50% 100%;
  transition: translate .35s var(--ease), box-shadow .35s var(--ease);
}
.m-on .cat-grade > .card-produto.onda:hover { translate: 0 -6px; }
.m-on .cat-grade > .card-estrela[data-scroll] {
  --k: clamp(0, calc(var(--e, 1) * 1.6), 1);
  opacity: 1; filter: none; transform: none;
  clip-path: inset(calc((1 - var(--k)) * 9%) calc((1 - var(--k)) * 5%) 0 calc((1 - var(--k)) * 5%) round 32px);
  transition: translate .4s var(--ease), box-shadow .4s var(--ease);
}
.m-on .cat-grade > .card-estrela[data-scroll]:hover { translate: 0 -6px; }
@media (max-width: 560px) {
  .m-on .cat-grade > .card-estrela[data-scroll] { clip-path: inset(calc((1 - var(--k)) * 10%) calc((1 - var(--k)) * 5%) 0 calc((1 - var(--k)) * 5%) round 26px); }
}

/* celular: o cartão estrela emerge com transform (sobe e cresce a partir da base) em vez de clip-path,
   que repintaria um cartão grande a cada quadro */
.pouca-forca .m-on .cat-grade > .card-estrela[data-scroll] {
  clip-path: none;
  transform: translateY(calc((1 - var(--k)) * 9%)) scale(calc(1 - (1 - var(--k)) * .1));
  transform-origin: 50% 100%;
  opacity: clamp(0, calc(.2 + var(--k) * 1.6), 1);
}