/* =====================================================================
   BUTTON ATMOSPHERE
   Buttons go more translucent so the page's particle/fog atmosphere reads
   through them (via backdrop-filter), and a soft accent aurora drifts behind
   the label, echoing the hero's floating-particle effect. Loaded last so it
   wins over styles.css and every option layer (which disable .btn::after).
   ===================================================================== */

/* --- more transparent glass: let the atmosphere behind show through --- */
.btn{
  -webkit-backdrop-filter:blur(9px) saturate(1.6);
  backdrop-filter:blur(9px) saturate(1.6);
}
.btn-primary{
  background:color-mix(in srgb, var(--accent) 56%, transparent);
  border-color:color-mix(in srgb, var(--accent) 48%, var(--glass-stroke));
}
.btn-primary:hover{
  background:color-mix(in srgb, var(--accent-bright) 70%, transparent);
}
.btn-ghost{
  background:color-mix(in srgb, var(--glass-fill) 65%, transparent);
}

/* --- drifting accent aurora behind the label (clipped to the pill) --- */
.btn::after{
  content:"";display:block;position:absolute;inset:-50% -25%;z-index:-1;
  pointer-events:none;mix-blend-mode:screen;filter:blur(11px);
  background:
    radial-gradient(42% 60% at 22% 50%, var(--accent-glow), transparent 70%),
    radial-gradient(38% 55% at 78% 50%, color-mix(in srgb, var(--accent-bright) 70%, transparent), transparent 72%);
  opacity:.32;
  transform:translateX(-14%);
  transition:opacity .5s ease;
  animation:btnAtmos 7.5s ease-in-out infinite;
}
.btn:hover::after{opacity:.92}
.btn-primary::after{mix-blend-mode:soft-light;filter:blur(13px);opacity:.5}
.btn-primary:hover::after{opacity:.85}

@keyframes btnAtmos{
  0%,100%{transform:translateX(-14%) translateY(2%)}
  50%{transform:translateX(14%) translateY(-6%)}
}

@media (prefers-reduced-motion: reduce){
  .btn::after{animation:none;transform:none}
}

/* --- keyboard accessibility: visible focus ring on all interactive chrome --- */
.btn:focus-visible,
.nav-links a:focus-visible,
.lang button:focus-visible,
.brand:focus-visible,
#productList li:focus-visible,
[data-scroll]:focus-visible{
  outline:2px solid var(--accent-bright);
  outline-offset:3px;
  border-radius:8px;
}