/* CASA3D — efeitos comuns. Cores do arco da logo. */
:root { --arco: linear-gradient(90deg, #1fd28a, #3fd8e0, #108aee, #7d4afd, #ff5a0a, #ffb501); }

/* barra de filamento: o fio sai do bico conforme a página desce */
.fx-fio { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 35; pointer-events: none; }
.fx-fio__linha { position: absolute; inset: 0; background: var(--arco); transform-origin: left; transform: scaleX(var(--p, 0)); border-radius: 0 3px 3px 0; }
.fx-fio__bico { position: absolute; top: -1px; left: calc(var(--p, 0) * 100%); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #ffb501; box-shadow: 0 0 10px #ff5a0a, 0 0 2px #fff; opacity: calc(var(--p, 0) * 40); }

/* rajada de filamento no clique */
.fx-tela { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 90; pointer-events: none; }

/* títulos letra a letra */
.fx-pal { display: inline-block; white-space: nowrap; }
.fx-letra { display: inline-block; transform: translateY(70%) rotate(8deg); opacity: 0; transition: transform .9s cubic-bezier(.22,1,.36,1), opacity .6s ease; transition-delay: calc(var(--i) * 28ms); }
.fx-titulo.fx-on .fx-letra { transform: none; opacity: 1; }
.fx-titulo { overflow: visible; }

/* cursor */
.fx-mouse, .fx-mouse * { cursor: none !important; }
.fx-mouse input, .fx-mouse textarea { cursor: text !important; }
.fx-ponto, .fx-cursor { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; }
.fx-ponto { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #ff5a0a; }
.fx-cursor { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
.fx-cursor::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid currentColor; color: var(--fg); opacity: .45; transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .3s, opacity .3s, border-color .3s; }
.fx-cursor.botao::before { transform: scale(1.6); opacity: .25; background: currentColor; }
.fx-cursor.aperta::before { transform: scale(.7); }
.fx-cursor.fora { opacity: 0; }
.fx-cursor__txt { position: absolute; inset: 0; display: grid; place-items: center; font: 700 12px/1 var(--font-texto); color: #fff; opacity: 0; transform: scale(.5); transition: opacity .25s, transform .35s cubic-bezier(.34,1.56,.64,1); z-index: 1; }
.fx-cursor.ver::before { transform: scale(2.3); background: #ff5a0a; border-color: #ff5a0a; opacity: .95; }
.fx-cursor.ver .fx-cursor__txt { opacity: 1; transform: scale(1); }
.fx-cursor.ver ~ .fx-ponto, .fx-mouse:has(.fx-cursor.ver) .fx-ponto { opacity: 0; }

/* ímã: transição suave de volta */
.lj-btn, .sacola, .seta { transition: transform .45s cubic-bezier(.34,1.56,.64,1), filter .2s, background .25s, color .25s; will-change: transform; }

/* inclinação 3D com brilho */
.lj-card__foto, .bob__foto { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s cubic-bezier(.22,1,.36,1); transform-style: preserve-3d; }
.lj-card__foto.fx-inclina, .bob__foto.fx-inclina { transition: transform .12s linear; }
.lj-card__foto::before, .bob__foto::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.55), transparent 55%); mix-blend-mode: soft-light; }
.fx-inclina::before { opacity: 1; }
.bob__foto { position: relative; }

/* grade elástica na velocidade da rolagem */
.lj-grade { transform-origin: 50% 0; will-change: transform; }

/* produto: a foto voa do cartão, a janela só aparece em volta */
.lj-flip { position: fixed; z-index: 55; object-fit: cover; pointer-events: none; background: #fff; margin: 0; }
.lj-prod.flip { animation: lj-fade .45s ease both; }
.lj-prod.flip .lj-prod__info > * { animation: fx-sobe .6s cubic-bezier(.22,1,.36,1) both; }
.lj-prod.flip .lj-prod__info > :nth-child(2) { animation-delay: .06s; } .lj-prod.flip .lj-prod__info > :nth-child(3) { animation-delay: .12s; }
.lj-prod.flip .lj-prod__info > :nth-child(4) { animation-delay: .18s; } .lj-prod.flip .lj-prod__info > :nth-child(5) { animation-delay: .24s; }
@keyframes fx-sobe { from { transform: translateY(24px); opacity: 0; } }
.lj-prod.saindo { animation: fx-somePro .4s ease both; }
.lj-veu.saindo { animation: fx-some .4s ease both; }
@keyframes fx-somePro { to { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes fx-some { to { opacity: 0; } }
@media (max-width: 760px) { .lj-prod.saindo { animation: fx-desce .4s cubic-bezier(.5,0,.75,0) both; } @keyframes fx-desce { to { transform: translateY(100%); } } }

/* botões: brilho que atravessa no hover */
.lj-btn { position: relative; overflow: hidden; isolation: isolate; }
.lj-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s cubic-bezier(.22,1,.36,1); }
.lj-btn:hover::after { transform: translateX(120%); }

@media (prefers-reduced-motion: reduce) {
  .fx-letra { transform: none; opacity: 1; }
  .lj-grade { transform: none !important; }
}