@property --button-edge-angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: -35deg;
}

.edge-button {
  --button-edge-angle: -35deg;
  --button-edge-light: conic-gradient(
    from var(--button-edge-angle),
    transparent 0deg 273deg,
    rgb(255 255 255 / 6%) 300deg,
    rgb(255 255 255 / 36%) 327deg,
    rgb(255 255 255 / 95%) 343deg,
    rgb(255 255 255 / 38%) 351deg,
    transparent 360deg
  );
}

.edge-button:not(.intro-skip):not(.whatsapp-float) { position: relative; }

/* A camada decorativa não interfere nas duas linhas do menu mobile. */
.menu-toggle[aria-expanded=true] span:first-of-type { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded=true] span:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }

/* Camada decorativa independente dos LEDs, ícones e textos dos controles. */
.button-edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* Máscara vazada: o reflexo percorre só o contorno e preserva o vidro. */
.button-edge::before,
.button-edge::after {
  content: '';
  position: absolute;
  pointer-events: none;
  background: var(--button-edge-light);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity .25s ease;
}

.button-edge::before {
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  opacity: .75;
}

.button-edge::after {
  inset: -3px;
  border-radius: calc(var(--button-edge-radius, 15px) + 3px);
  padding: 4px;
  filter: blur(2px);
  opacity: .18;
}

.has-border-motion .edge-button {
  animation: button-edge-orbit 8.5s linear infinite;
  animation-delay: var(--button-edge-delay, 0s);
  animation-play-state: paused;
}

.has-border-motion .edge-button.is-edge-visible { animation-play-state: running; }
.edge-button:hover .button-edge::before,
.edge-button:focus-visible .button-edge::before { opacity: 1; }
.edge-button:hover .button-edge::after,
.edge-button:focus-visible .button-edge::after { opacity: .38; }

@keyframes button-edge-orbit {
  from { --button-edge-angle: -35deg; }
  to { --button-edge-angle: 325deg; }
}

@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .button-edge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .has-border-motion .edge-button { animation: none; }
  .button-edge::before { opacity: .45; }
  .button-edge::after { opacity: .1; }
}