/* FÁBRICA DE SITES · MOTOR DE MOTION · estilos comuns
   --vel e --int vêm do efeito (velocidade e intensidade escolhidas, via c.vars(el)).
   Cores: --fab-tinta, --fab-papel, --fab-cor, --fab-cor-2 vêm do site (o estúdio lê do site do cliente). */
:root {
  --fab-tinta: #1f1b2d;
  --fab-papel: #ffffff;
  --fab-cor: #6b5ca5;
  --fab-cor-2: #7fb07a;
  --fab-cor-clara: color-mix(in oklab, var(--fab-cor) 55%, var(--fab-papel));
  --fab-cor-suave: color-mix(in oklab, var(--fab-cor) 16%, var(--fab-papel));
  --fab-tinta-suave: color-mix(in oklab, var(--fab-tinta) 65%, var(--fab-papel));
}

/* Texto quebrado em palavras / letras (c.split) */
.fab-w { display: inline-block; vertical-align: top; }
.fab-wi, .fab-ch { display: inline-block; will-change: transform; }
.fx-mask .fab-w { overflow: hidden; padding: 0 .06em .18em; margin: 0 -.06em -.18em; }
.fx-3d .fab-w { perspective: 600px; }

/* Desenhos em SVG presos a um elemento */
.fx-rel { position: relative; display: inline-block; }
.fx-deco { position: absolute; pointer-events: none; overflow: visible; }
.fx-deco path { fill: none; stroke: var(--fx-traco, var(--fab-cor)); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; }

/* Camada de fundo atrás do conteúdo do topo */
.fx-fundo-host { position: relative; isolation: isolate; }
.fx-fundo-camada { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }

/* Movimento reduzido: tudo parado */
.fab-rm *, .fab-rm *::before, .fab-rm *::after { animation: none !important; transition: none !important; }

/* Categoria: rolagem e menu
   Cores do site: --fab-cor (marca), --fab-papel (fundo), --fab-tinta (texto). O site pode ser claro ou escuro:
   sombras usam preto translúcido (fica bom nos dois), nunca a cor do texto. */

/* Barra de leitura no topo (suave com barra) */
.fx-prog {
  position: fixed; left: 0; right: 0; top: 0; z-index: 9998; height: 3px; pointer-events: none;
  background: var(--fab-cor); transform: scaleX(0); transform-origin: 0 50%;
}

/* Barra de leitura lateral */
.fx-prog-lado {
  position: fixed; right: 10px; top: 50%; translate: 0 -50%; z-index: 9990; pointer-events: none;
  width: 9px; height: 56vh; border-radius: 9px; overflow: hidden;
  background: color-mix(in oklab, var(--fab-cor-clara) 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--fab-papel) 80%, transparent);
}
.fx-prog-lado i {
  display: block; width: 100%; height: 100%; border-radius: inherit;
  transform: scaleY(0); transform-origin: 50% 0;
  background: linear-gradient(var(--fab-cor), var(--fab-cor-clara), var(--fab-cor-2));
}

/* Botão voltar ao topo (escondido até .fx-on; a visibilidade espera o fade terminar) */
button.fx-topo {
  position: fixed; left: 50%; bottom: 18px; translate: -50% 0; z-index: 9990;
  display: inline-flex; align-items: center; gap: .55em;
  margin: 0; padding: .85em 1.35em; border: 0; border-radius: 999px;
  background: var(--fab-tinta); color: var(--fab-papel);
  font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: normal; text-transform: none;
  white-space: nowrap; cursor: pointer;
  box-shadow: 0 14px 30px -12px rgb(0 0 0 / .45);
  visibility: hidden;
  transition: visibility 0s linear calc(.3s / var(--vel, 1)), background-color .25s ease;
}
button.fx-topo.fx-on { visibility: visible; transition-delay: 0s; }
button.fx-topo svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
button.fx-topo:hover, button.fx-topo:focus-visible { background: var(--fab-cor); }

/* ─── Menu ─── */
/* Lugar do menu quando ele vira fixo (só quando ele era static) */
.fx-menu-espaco { display: block; pointer-events: none; }
/* Medição do tamanho encolhido, sem transição */
.fx-medindo, .fx-medindo * { transition: none !important; }

/* Menu que encolhe com vidro */
[data-s="menu"].fx-menu-vidro {
  --fx-t: calc(.45s / var(--vel, 1));
  transition: padding-top var(--fx-t) ease, padding-bottom var(--fx-t) ease, margin-bottom var(--fx-t) ease, height var(--fx-t) ease,
    background-color var(--fx-t) ease, box-shadow var(--fx-t) ease, -webkit-backdrop-filter var(--fx-t) ease, backdrop-filter var(--fx-t) ease;
}
[data-s="menu"].fx-menu-vidro .fx-menu-logo, [data-s="menu"].fx-menu-vidro .fx-menu-linha { transition: height var(--fx-t) ease; }
[data-s="menu"].fx-menu-vidro.fx-rolado {
  background-color: color-mix(in oklab, var(--fab-papel) 72%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important; backdrop-filter: blur(18px) saturate(140%) !important;
  box-shadow: 0 1px 0 color-mix(in oklab, var(--fab-tinta) 12%, transparent), 0 14px 34px -24px rgb(0 0 0 / .5);
}
[data-s="menu"].fx-menu-vidro.fx-menu-borda.fx-rolado { box-shadow: 0 14px 34px -24px rgb(0 0 0 / .5); }
[data-s="menu"].fx-menu-aperta.fx-rolado { padding-top: var(--fx-menu-pt) !important; padding-bottom: var(--fx-menu-pb) !important; }
[data-s="menu"].fx-rolado .fx-menu-logo { height: var(--fx-logo-h) !important; width: auto !important; }
[data-s="menu"].fx-rolado .fx-menu-linha, [data-s="menu"].fx-rolado.fx-menu-linha { height: var(--fx-linha-h) !important; min-height: 0 !important; }
/* Menu sticky: o que ele encolhe vira margem embaixo (o conteúdo não pula) */
[data-s="menu"].fx-menu-comp.fx-rolado { margin-bottom: calc(var(--fx-menu-mb, 0px) + var(--fx-menu-comp, 0px)) !important; }

/* Menu que some e volta (o deslize é feito pelo anime; aqui só o fundo depois que a página rola) */
[data-s="menu"].fx-menu-some {
  --fx-t: calc(.45s / var(--vel, 1));
  transition: background-color var(--fx-t) ease, box-shadow var(--fx-t) ease;
}
[data-s="menu"].fx-menu-some.fx-rolado {
  background-color: var(--fab-papel) !important;
  box-shadow: 0 10px 28px -18px rgb(0 0 0 / .45);
}

/* Categoria: FUNDO DO TOPO
   A camada é a .fx-fundo-camada do núcleo (z-index -1, atrás do conteúdo e na frente do fundo do topo) com a classe
   .fx-fc, que a protege do CSS do site (regras como ".hero > *" ou ".hero div" não podem mexer nela).
   .fx-escuro: o texto do topo é claro (site escuro) → as cores somam luz ("screen") em vez de cobrir.
   .fx-sobre-foto: o topo tem imagem de fundo → mais transparente, a foto continua aparecendo. */
.fx-fundo-camada.fx-fc {
  position: absolute !important; inset: 0 !important; z-index: -1 !important; display: block !important;
  width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: inherit !important; background: none !important; box-shadow: none !important;
  overflow: hidden !important; pointer-events: none !important; transform: none !important; translate: none !important; filter: none !important; opacity: 1 !important;
  /* a camada some aos poucos perto do pé do topo: sem linha dura onde o topo termina */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - min(22%, 180px)), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - min(22%, 180px)), transparent);
  --fx-cor-2-clara: color-mix(in oklab, var(--fab-cor-2) 55%, var(--fab-papel));
}
.fx-fundo-camada.fx-fc.fx-escuro { mix-blend-mode: screen; }
.fx-fc i { position: absolute; display: block; margin: 0; padding: 0; border: 0; box-sizing: border-box; max-width: none; font-style: normal; }

/* ─── Bolhas de cor com parallax ─── */
.fx-fc .fx-blob { border-radius: 50%; filter: blur(min(80px, 11vmin)); will-change: transform; }
.fx-fc .fx-b1 { width: 46vmax; height: 46vmax; left: -14vmax; top: -16vmax; background: color-mix(in oklab, var(--fab-cor-clara) 85%, transparent); }
.fx-fc .fx-b2 { width: 40vmax; height: 40vmax; right: -12vmax; top: 18%; background: color-mix(in oklab, var(--fx-cor-2-clara) 90%, transparent); }
.fx-fc .fx-b3 { width: 30vmax; height: 30vmax; left: 30%; bottom: -14vmax; background: var(--fab-cor-suave); }
.fx-sobre-foto .fx-blob { opacity: .6; }
.fx-escuro .fx-b1 { background: color-mix(in oklab, var(--fab-cor) 55%, transparent); }
.fx-escuro .fx-b2 { background: color-mix(in oklab, var(--fab-cor-2) 45%, transparent); }
.fx-escuro .fx-b3 { background: color-mix(in oklab, var(--fab-cor-clara) 45%, transparent); }
.fx-escuro .fx-blob { opacity: calc(.85 * var(--int, 1)); }

/* ─── Aurora que respira ─── */
.fx-fc .fx-aurora { inset: -25%; filter: blur(min(70px, 10vmin)); opacity: calc(.9 * var(--int, 1)); }
.fx-fc .fx-aurora i { width: 58%; height: 58%; border-radius: 45% 55% 60% 40%; mix-blend-mode: multiply; }
.fx-fc .fx-aurora i:nth-child(1) { left: 5%; top: 8%; background: var(--fab-cor-clara); animation: fx-aur1 calc(17s / var(--vel, 1)) ease-in-out infinite alternate; }
.fx-fc .fx-aurora i:nth-child(2) { right: 4%; top: 22%; background: var(--fx-cor-2-clara); animation: fx-aur2 calc(21s / var(--vel, 1)) ease-in-out infinite alternate; }
.fx-fc .fx-aurora i:nth-child(3) { left: 28%; bottom: 2%; background: var(--fab-cor-suave); animation: fx-aur3 calc(19s / var(--vel, 1)) ease-in-out infinite alternate; }
.fx-sobre-foto .fx-aurora { opacity: calc(.55 * var(--int, 1)); }
.fx-escuro .fx-aurora { opacity: calc(.32 * var(--int, 1)); }
.fx-escuro .fx-aurora i { mix-blend-mode: screen; }
/* topo escuro com foto: as nuvens tingem a foto (modo "color") em vez de clarear; o contraste do texto não muda */
.fx-fundo-camada.fx-fc-aurora.fx-escuro.fx-sobre-foto { mix-blend-mode: color; }
.fx-escuro.fx-sobre-foto .fx-aurora { opacity: calc(.55 * var(--int, 1)); }
.fx-escuro.fx-sobre-foto .fx-aurora i { mix-blend-mode: normal; }
.fx-escuro .fx-aurora i:nth-child(1) { background: var(--fab-cor); }
.fx-escuro .fx-aurora i:nth-child(2) { background: var(--fab-cor-2); }
.fx-escuro .fx-aurora i:nth-child(3) { background: var(--fab-cor-clara); }
@keyframes fx-aur1 { to { transform: translate(22%, 18%) rotate(40deg) scale(1.15); } }
@keyframes fx-aur2 { to { transform: translate(-26%, 10%) rotate(-30deg) scale(.9); } }
@keyframes fx-aur3 { to { transform: translate(14%, -22%) rotate(25deg) scale(1.2); } }

/* ─── Textura de papel (granulado escuro em fundo claro, claro em fundo escuro) ─── */
.fx-fc .fx-grao {
  inset: 0; opacity: calc(.55 * var(--int, 1)); background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.18 0 0 0 0 0.24 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fx-escuro .fx-grao {
  opacity: calc(.6 * var(--int, 1));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── Degradê que passeia ─── */
.fx-fc .fx-grad {
  inset: 0; opacity: calc(.95 * var(--int, 1));
  background: linear-gradient(115deg,
    var(--fab-cor-clara) 0%,
    var(--fab-papel) 30%,
    var(--fx-cor-2-clara) 50%,
    color-mix(in oklab, var(--fab-cor-2) 18%, var(--fab-papel)) 70%,
    var(--fab-cor-suave) 100%);
  background-size: 260% 260%;
  animation: fx-grad calc(11s / var(--vel, 1)) ease-in-out infinite alternate;
}
.fx-escuro .fx-grad {
  background-image: linear-gradient(115deg,
    color-mix(in oklab, var(--fab-cor) 32%, var(--fab-papel)) 0%,
    var(--fab-papel) 30%,
    color-mix(in oklab, var(--fab-cor-2) 30%, var(--fab-papel)) 50%,
    color-mix(in oklab, var(--fab-cor) 14%, var(--fab-papel)) 70%,
    var(--fab-cor-suave) 100%);
}
.fx-fundo-camada.fx-fc-grad.fx-escuro { mix-blend-mode: normal; }   /* degradê em fundo escuro liso: substitui o fundo */
.fx-fundo-camada.fx-fc-grad.fx-sobre-foto { mix-blend-mode: color; }   /* com foto: tinge a foto (só a cor; o claro/escuro da foto fica) */
.fx-sobre-foto .fx-grad {
  opacity: calc(.7 * var(--int, 1));
  background-image: linear-gradient(115deg, var(--fab-cor) 0%, transparent 30%, var(--fab-cor-2) 50%, var(--fab-cor-clara) 70%, var(--fab-cor) 100%);
}
@keyframes fx-grad { 0% { background-position: 0% 20%; } 100% { background-position: 100% 80%; } }

/* ─── Luz que segue o mouse (o elemento anda por transform; nasce no centro do topo) ─── */
.fx-fc .fx-luz {
  left: 50%; top: 45%; width: calc(96vmin * var(--int, 1)); height: calc(96vmin * var(--int, 1)); translate: -50% -50%;
  border-radius: 50%; will-change: transform;
  background: radial-gradient(closest-side,
    color-mix(in oklab, var(--fab-cor-clara) 80%, transparent),
    color-mix(in oklab, var(--fx-cor-2-clara) 30%, transparent) 48%,
    transparent 78%);
}
.fx-escuro .fx-luz {
  background: radial-gradient(closest-side,
    color-mix(in oklab, var(--fab-cor) 42%, transparent),
    color-mix(in oklab, var(--fab-cor-2) 16%, transparent) 48%,
    transparent 78%);
}

/* Categoria: título principal */
[data-s="titulo"].fxt-rel-t { position: relative; }

/* máquina de escrever: cursor piscando (criado pelo efeito dentro do título) */
[data-s="titulo"] .fxt-caret {
  position: absolute; left: 0; top: 0; display: block; margin: 0; padding: 0;
  width: max(2px, .07em); border-radius: 2px;
  background: var(--fab-cor); pointer-events: none;
  animation: fxt-caret 1s steps(1) infinite;
}
@keyframes fxt-caret { 50% { opacity: 0; } }

/* Categoria: FOTO PRINCIPAL
   Quase tudo é feito por JavaScript (estilos provisórios devolvidos no fim). Aqui só o que é elemento ou forma. */

/* Bloco de cor (bloco-cor), dentro do contêiner da foto. Protegido contra regras do site do tipo "figure span". */
[data-s="foto"] > .fx-veu {
  position: absolute !important; inset: 0 !important; z-index: 2;
  display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
  background: var(--fab-cor) !important; border-radius: inherit; pointer-events: none !important;
}

/* Arco (arco-abre): no contêiner que recorta a foto, ou direto na <img> */
.fx-arco { border-radius: 50% 50% 22px 22px / 40% 40% 22px 22px !important; }

/* Categoria: BOTÕES (classes com prefixo fxb- para não colidir com o site nem com outras categorias)
   O CSS do site do cliente vem antes e pode ser forte: as regras usam [data-s="botao"].classe e !important
   só onde precisam vencer o site (cor do texto no hover, tamanho do svg do contorno).
   Hover: sempre .fab-hover (mouse simulado pelo estúdio) e :hover (mouse real).
   As cores vêm do JS por botão (--fxb-cor, --fxb-texto, --fxb-luz, --fxb-traco, --fxb-anel), escolhidas pelo contraste. */

/* Só para botões estáticos (um botão fixo/absoluto do site continua como está) */
[data-s="botao"].fxb-rel { position: relative; }

/* Camada em <span> quando o site já usa o pseudo-elemento do botão */
[data-s="botao"] > .fxb-camada { display: block; }

/* ─── Preenchimento que desliza ─── */
[data-s="botao"].fxb-preenche { isolation: isolate; }
[data-s="botao"].fxb-preenche:not(.fxb-span)::before,
[data-s="botao"].fxb-preenche > .fxb-camada {
  content: ""; position: absolute; inset: 0; z-index: -1; width: auto; height: auto; margin: 0; padding: 0; border: 0;
  border-radius: inherit; opacity: 1; box-shadow: none; filter: none; animation: none; pointer-events: none;
  background: var(--fxb-cor, var(--fab-tinta));
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform calc(.55s / var(--vel, 1)) cubic-bezier(.65, 0, .35, 1);
}
[data-s="botao"].fxb-preenche.fab-hover:not(.fxb-span)::before, [data-s="botao"].fxb-preenche:hover:not(.fxb-span)::before,
[data-s="botao"].fxb-preenche.fab-hover > .fxb-camada, [data-s="botao"].fxb-preenche:hover > .fxb-camada { transform: scaleX(1); transform-origin: 0 50%; }
[data-s="botao"].fxb-preenche.fab-hover, [data-s="botao"].fxb-preenche:hover {
  color: var(--fxb-texto, var(--fab-papel)) !important; border-color: var(--fxb-cor, var(--fab-tinta)) !important;
}
[data-s="botao"] .fxb-seta { display: inline-block; transition: transform calc(.45s / var(--vel, 1)) cubic-bezier(.2, .7, .2, 1); }
[data-s="botao"].fxb-preenche.fab-hover .fxb-seta, [data-s="botao"].fxb-preenche:hover .fxb-seta { transform: translateX(calc(5px * var(--int, 1))); }

/* ─── Reflexo de luz ─── */
[data-s="botao"].fxb-brilho { overflow: hidden; isolation: isolate; }
[data-s="botao"].fxb-brilho:not(.fxb-span)::after,
[data-s="botao"].fxb-brilho > .fxb-camada {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: -60%; right: auto; width: 38%; height: auto; margin: 0; padding: 0; border: 0;
  border-radius: 0; opacity: 1; z-index: auto; box-shadow: none; filter: none; pointer-events: none;
  background: linear-gradient(100deg, transparent, var(--fxb-luz, rgb(255 255 255 / .6)), transparent);
  transform: skewX(-18deg);
  animation: fxb-brilho calc(3.4s / var(--vel, 1)) ease-in-out infinite;
}
[data-s="botao"].fxb-brilho.fab-hover:not(.fxb-span)::after, [data-s="botao"].fxb-brilho:hover:not(.fxb-span)::after,
[data-s="botao"].fxb-brilho.fab-hover > .fxb-camada, [data-s="botao"].fxb-brilho:hover > .fxb-camada { animation-duration: calc(1.1s / var(--vel, 1)); }
@keyframes fxb-brilho { 0%, 55% { left: -60%; } 100% { left: 130%; } }

/* ─── Seta dá a volta ─── */
/* O recorte é por clip-path (não mexe no alinhamento nem no tamanho da seta do site) */
[data-s="botao"] .fxb-seta-clip { clip-path: inset(-50% 0); }
[data-s="botao"] .fxb-seta-in { display: inline-block; }
[data-s="botao"] > .fxb-seta-nova { display: inline-block; }
[data-s="botao"] > .fxb-seta-margem { margin-left: .45em; }

/* ─── Contorno se desenha ─── */
/* Posição e tamanho da caixa vêm do JS (acompanham a borda e o arredondamento do botão) */
[data-s="botao"] > .fxb-contorno-caixa { position: absolute; display: block; margin: 0; padding: 0; z-index: 1; pointer-events: none; }
[data-s="botao"] > .fxb-contorno-caixa > svg {
  display: block; position: static; width: 100% !important; height: 100% !important; max-width: none; max-height: none;
  margin: 0; overflow: visible; fill: none; transform: none;
}
[data-s="botao"] > .fxb-contorno-caixa path {
  fill: none !important; stroke: var(--fxb-traco, var(--fab-cor)) !important; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 1 2; stroke-dashoffset: 1.02;
  transition: stroke-dashoffset calc(.75s / var(--vel, 1)) cubic-bezier(.6, 0, .3, 1);
}
[data-s="botao"].fxb-contorno.fab-hover > .fxb-contorno-caixa path, [data-s="botao"].fxb-contorno:hover > .fxb-contorno-caixa path { stroke-dashoffset: 0; }

/* ─── Pulso de atenção ─── */
[data-s="botao"].fxb-pulso::before, [data-s="botao"].fxb-pulso::after {
  content: ""; position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0; border: 0;
  border-radius: inherit; background: none; opacity: 1; transform: none; filter: none; pointer-events: none;
  animation: fxb-pulso calc(2.4s / var(--vel, 1)) cubic-bezier(.2, .6, .35, 1) infinite;
}
[data-s="botao"].fxb-pulso::after { animation-delay: calc(.8s / var(--vel, 1)); }
@keyframes fxb-pulso {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--fxb-anel, var(--fab-cor)) 55%, transparent); }
  80%, 100% { box-shadow: 0 0 0 calc(20px * var(--int, 1)) color-mix(in oklab, var(--fxb-anel, var(--fab-cor)) 0%, transparent); }
}
/* Versão sem pseudo-elementos (o site já usa os dele, ou o botão corta o que passa da borda):
   um anel só, como sombra do próprio botão, somado à sombra que ele já tinha (--fxb-sombra) */
[data-s="botao"].fxb-pulso-sombra { animation: fxb-pulso-sombra calc(1.6s / var(--vel, 1)) cubic-bezier(.2, .6, .35, 1) infinite; }
@keyframes fxb-pulso-sombra {
  0% { box-shadow: var(--fxb-sombra, 0 0 0 0 transparent), 0 0 0 0 color-mix(in oklab, var(--fxb-anel, var(--fab-cor)) 55%, transparent); }
  80%, 100% { box-shadow: var(--fxb-sombra, 0 0 0 0 transparent), 0 0 0 calc(20px * var(--int, 1)) color-mix(in oklab, var(--fxb-anel, var(--fab-cor)) 0%, transparent); }
}

/* Categoria: textos ao rolar */

/* Máscara dos títulos das seções (titulos-mascara, secao-linhas-mascara): além da folga do núcleo (.fx-mask),
   uma folga em cima para acentos e letras altas de fontes serifadas grandes não serem cortados.
   A margem negativa compensa: o texto não muda de lugar. */
.fx-sec-mask .fab-w { padding-top: .14em; margin-top: -.14em; }

/* Categoria: cards e fileiras
   Cores sempre pelas variáveis do site (--fab-*). .fx-claro / .fx-escuro vêm do JS, conforme o fundo atrás do grupo. */

/* Grade 3D que se assenta (grade-3d): profundidade compartilhada pelo grupo */
[data-s="cards"].fx-3dgrid { perspective: 1500px; }

/* Inclinação 3D no mouse (inclinacao-3d): reflexo de luz na superfície do card; --gx/--gy = posição do mouse no card */
.fx-tilt { --fx-brilho: rgb(255 255 255 / .6); --fx-brilho-borda: color-mix(in oklab, var(--fab-tinta) 7%, transparent); }
.fx-tilt.fx-escuro { --fx-brilho: color-mix(in oklab, var(--fab-tinta) 16%, transparent); --fx-brilho-borda: transparent; }
.fx-tilt-luz::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(circle var(--fx-raio, 240px) at var(--gx, 50%) var(--gy, 50%), var(--fx-brilho), transparent 60%, var(--fx-brilho-borda));
  transition: opacity calc(.3s / var(--vel, 1));
}
.fx-tilt > .fab-hover.fx-tilt-luz::after, .fx-tilt > .fab-hover .fx-tilt-luz::after,
.fx-tilt > :hover.fx-tilt-luz::after, .fx-tilt > :hover .fx-tilt-luz::after { opacity: min(1, calc(.9 * var(--int, 1))); }

/* Lanterna sobre a grade (cards-holofote): --hx/--hy = posição do mouse no grupo.
   No claro a luz tinge (multiply, cor clara da marca); no escuro ela acende (screen, cor da marca). */
[data-s="cards"].fx-card-holofote {
  isolation: isolate;
  --fx-holo-cor: color-mix(in oklab, var(--fab-cor-clara) 80%, transparent); --fx-holo-mistura: multiply;
}
[data-s="cards"].fx-card-holofote.fx-escuro { --fx-holo-cor: color-mix(in oklab, var(--fab-cor) 40%, transparent); --fx-holo-mistura: screen; }
.fx-holo-depois::after { content: ""; }
.fx-holo-depois::after, .fx-holo-camada {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: radial-gradient(calc(240px * var(--int, 1)) circle at var(--hx, -999px) var(--hy, -999px), var(--fx-holo-cor), transparent 70%);
  mix-blend-mode: var(--fx-holo-mistura, multiply);
}

/* Categoria: fotos das seções */
.fx-parallax-img { overflow: hidden; }
.fx-parallax-img img { height: 120% !important; max-height: none !important; top: -10% !important; position: relative; object-fit: cover; }

/* Zoom suave no mouse — vale para contêiner com <img> e para <img> solta.
   A foto cresce com `scale` e o recorte do tamanho do quadro esconde a sobra (não muda o layout).
   O "dono" do mouse (.fx-zoom) é a foto, ou o card em volta dela. */
[data-s] .fx-zoom-img, .fx-zoom-img[data-s] {
  --fx-z: calc(1 + .07 * var(--int, 1));
  clip-path: inset(0);
  transition: scale calc(.9s / var(--vel, 1)) cubic-bezier(.2, .7, .2, 1), clip-path calc(.9s / var(--vel, 1)) cubic-bezier(.2, .7, .2, 1);
}
.fx-zoom.fab-hover .fx-zoom-img, .fx-zoom:hover .fx-zoom-img,
.fx-zoom-img.fx-zoom.fab-hover, .fx-zoom-img.fx-zoom:hover {
  scale: var(--fx-z);
  clip-path: inset(calc(50% - 50% / var(--fx-z)));
}
.fx-zoom-leg { transition: translate calc(.5s / var(--vel, 1)) cubic-bezier(.2, .7, .2, 1); }
.fx-zoom.fab-hover .fx-zoom-leg, .fx-zoom:hover .fx-zoom-leg { translate: 0 -6px; }

/* Esconde o topo só até o motor ligar (no máximo 2,5 s) */
html.fab-pre :is(h1.display-1.hero-title, div.hero-photo) { visibility: hidden; }