[data-lente] { position: relative; }
[data-lente] > a { position: relative; }

.lente-vidro { position: absolute; top: 0; left: 0; z-index: 2; width: 0; border-radius: 999px; pointer-events: none; opacity: 0; overflow: hidden; isolation: isolate;
  background: rgb(255 255 255 / calc(.13 - .1 * var(--lente, 0)));
  -webkit-backdrop-filter: blur(calc(7px * (1 - var(--lente, 0)))) saturate(170%) brightness(1.1);
  backdrop-filter: var(--lente-filtro) blur(calc(7px * (1 - var(--lente, 0)))) saturate(170%) brightness(1.1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), inset 0 -1px 0 rgb(255 255 255 / .12), inset 0 0 0 1px rgb(255 255 255 / .1), 0 calc(10px * var(--lente, 0)) calc(26px * var(--lente, 0)) -10px rgb(0 0 0 / .6);
  will-change: transform, width, height, opacity; }

@property --lente-aperto { syntax: "<number>"; inherits: false; initial-value: 1; }
.lente-vidro { transition: --lente-aperto var(--mv-ui-micro, 120ms) var(--mv-curva-saida, cubic-bezier(.16, 1, .3, 1)); }
[data-lente]:has(> a:active) .lente-vidro { --lente-aperto: .97; }

.lente-vidro::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; opacity: calc(var(--lente, 0) * .9);
  background: conic-gradient(from 210deg, #ff5a7a, #ffd25a, #6dff9c, #59d6ff, #8f6bff, #ff5ad2, #ff5a7a);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); filter: blur(.6px); }

.lente-vidro::before { content: ""; position: absolute; inset: 1px 12% auto; z-index: 3; height: 42%; border-radius: 999px 999px 40% 40%; }
[data-lente="suave"] .lente-vidro::before { background: linear-gradient(180deg, rgb(255 255 255 / calc(.06 + .22 * var(--lente, 0))), rgb(255 255 255 / 0)); }
[data-lente="forte"] .lente-vidro::before { background: linear-gradient(180deg, rgb(255 255 255 / .4), rgb(255 255 255 / 0)); }
[data-lente="extremo"] .lente-vidro::before { content: none; }

.lente-lupa { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.lente-lupa > * { position: absolute; margin: 0; white-space: nowrap; color: var(--lente-texto, #fff); pointer-events: none; }
.lente-lupa > *::before, .lente-lupa > *::after { content: attr(data-t); position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: inherit; padding: inherit; mix-blend-mode: screen; }
.lente-lupa > *::before { color: #ff2d55; }
.lente-lupa > *::after { color: #2de1ff; }
[data-lente="suave"] .lente-lupa > *::before { transform: translateX(calc(-1.1px * var(--lente, 0))); opacity: calc(var(--lente, 0) * .55); }
[data-lente="suave"] .lente-lupa > *::after { transform: translateX(calc(1.1px * var(--lente, 0))); opacity: calc(var(--lente, 0) * .55); }
[data-lente="forte"] .lente-lupa > *::before, [data-lente="extremo"] .lente-lupa > *::before { transform: translateX(calc(-2.2px * var(--lente, 0))); opacity: var(--lente, 0); }
[data-lente="forte"] .lente-lupa > *::after, [data-lente="extremo"] .lente-lupa > *::after { transform: translateX(calc(2.2px * var(--lente, 0))); opacity: var(--lente, 0); }

[data-lente-fundo="piano"] .lente-vidro {
  background: linear-gradient(180deg, rgb(29 30 34 / calc(.92 - .4 * var(--lente, 0))), rgb(6 6 7 / calc(.95 - .4 * var(--lente, 0))));
  -webkit-backdrop-filter: blur(calc(7px * (1 - var(--lente, 0)))) saturate(150%) brightness(.9);
  backdrop-filter: var(--lente-filtro) blur(calc(7px * (1 - var(--lente, 0)))) saturate(150%) brightness(.9);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), inset 0 0 0 1px rgb(255 255 255 / .06), 0 calc(10px * var(--lente, 0)) calc(26px * var(--lente, 0)) -10px rgb(0 0 0 / .7); }
[data-lente-fundo="piano"] .lente-vidro::before, [data-lente-fundo="claro"] .lente-vidro::before { content: none; }

[data-lente-fundo="claro"] { --lente-texto: #0a0a0b; }
[data-lente-fundo="claro"] .lente-vidro {
  background: rgb(255 255 255 / calc(.62 - .3 * var(--lente, 0)));
  -webkit-backdrop-filter: blur(calc(10px * (1 - var(--lente, 0)) + 2px)) saturate(160%) brightness(1.15);
  backdrop-filter: var(--lente-filtro) blur(calc(10px * (1 - var(--lente, 0)) + 2px)) saturate(160%) brightness(1.15); }
[data-lente-fundo="claro"] .lente-lupa > * { text-shadow: none; }

[data-lente-cor="ouro"] .lente-vidro::after { opacity: calc(.4 + .55 * var(--lente, 0)); background: conic-gradient(from 210deg, #fdd858, #b97a0e, #f2c234, #d49e1f, #fff2c0, #b97a0e, #fdd858); }
[data-lente-cor="ouro"] .lente-lupa > *::before { color: #fdd858; }
[data-lente-cor="ouro"] .lente-lupa > *::after { color: #d49e1f; }
[data-lente-fundo="claro"][data-lente-cor="ouro"] .lente-lupa > *::before, [data-lente-fundo="claro"][data-lente-cor="ouro"] .lente-lupa > *::after { mix-blend-mode: normal; }

@media (prefers-reduced-transparency: reduce) {
  .lente-vidro { background: rgb(40 41 46 / .96); backdrop-filter: none; -webkit-backdrop-filter: none; }
}