/*! Specular Button 样式 移植自 React Bits「Magnet」+「Specular Button」
 * 来源:https://reactbits.dev/animations/magnet · https://reactbits.dev/components/specular-button · https://github.com/DavidHDev/react-bits
 *      (src/content/Components/SpecularButton/SpecularButton.css)
 * 许可证原文照录如下(取自该仓库 LICENSE.md,2026-10-20 核对)。用 /*! 开头,压缩时保留。
 *
 * MIT + Commons Clause License Condition v1.0
 *
 * Copyright (c) 2026 David Haz
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, and distribute the Software **as part of an application, website, or product**, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * ## Commons Clause Restriction
 *
 * You may use this Software, including for any commercial purpose, **so long as you do not sell, sublicense, or redistribute the components themselves-whether alone, in a bundle, or as a ported version.**
 *
 * The same restriction covers the React Bits tools (Background Studio, Texture Lab, Shape Magic, Center Stage, Sound Lab and any tools added later) and the sounds in the sound library. **You may not sell, sublicense, or redistribute the tools or the sounds themselves, or offer the tools or a substantially similar copy of them as a hosted service-whether alone, in a bundle, or as a ported version.**
 *
 * What you make with the tools is yours to use. You can use exported code, images, videos, and audio files in any personal or commercial application, website, or product, including paid ones. **You may not sell or redistribute the exports on their own, either individually or as the product itself, such as a sound, texture, background, or template pack.**
 *
 * ## No Warranty
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
/* 照搬 React Bits SpecularButton.css(类名不变);最后一段「改」是本站加的静止版 */
.specular-button {
  --sb-radius: 18px;
  --sb-tint: #ffffff;
  --sb-tint-opacity: 0.04;
  --sb-blur: 0px;
  --sb-text-color: #f5f5f5;

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin: 0;
  border: 0;
  border-radius: var(--sb-radius);
  font: inherit;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--sb-text-color);
  background: color-mix(in srgb, var(--sb-tint) calc(var(--sb-tint-opacity) * 100%), transparent);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(var(--sb-blur));
  backdrop-filter: blur(var(--sb-blur));
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.specular-button:active { transform: scale(0.97); }
.specular-button:focus-visible { outline: 2px solid color-mix(in srgb, var(--sb-text-color) 55%, transparent); outline-offset: 3px; }
.specular-button:disabled { opacity: 0.5; cursor: default; }
.specular-button:disabled:active { transform: none; }
.specular-button--sm { padding: 10px 20px; font-size: 0.875rem; }
.specular-button--md { padding: 14px 28px; font-size: 1rem; }
.specular-button--lg { padding: 18px 38px; font-size: 1.125rem; }
.specular-button__light { position: absolute; inset: -24px; z-index: 1; display: block; width: calc(100% + 48px); height: calc(100% + 48px); pointer-events: none; }
.specular-button__label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: inherit; }

/* 改:触屏 / 减少动态效果 / 没有 WebGL2 时不画高光,用一圈细描边代替原组件 WebGL 画的发丝线(颜色同 --sb-base × .6) */
.specular-button.sb-static { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sb-base, #525252) 60%, transparent), 0 10px 24px -14px rgba(0, 0, 0, 0.45); }
.specular-button.sb-static .specular-button__light { display: none; }
@media (prefers-reduced-motion: reduce) { .specular-button { transition: none; } .specular-button:active { transform: none; } }