/* Will Motion：原生、低资源占用的全站动效基础。 */
:root {
  --motion-fast: 120ms;
  --motion-standard: 220ms;
  --motion-slow: 560ms;
  --motion-enter-distance: 20px;
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

html.motion-paused *,
html.motion-paused *::before,
html.motion-paused *::after {
  animation-play-state: paused !important;
}

/* 仅在脚本就绪后隐藏待进入元素，禁用脚本时内容始终可见。 */
html.motion-ready:not(.motion-reduced) .motion-reveal {
  opacity: 0;
  transform: translate3d(0, var(--motion-enter-distance), 0) scale(0.965);
  transition:
    opacity var(--motion-slow) var(--motion-ease-out),
    transform var(--motion-slow) var(--motion-ease-out);
  transition-delay: var(--motion-delay, 0ms);
}

html.motion-ready:not(.motion-reduced) .motion-reveal.is-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* 触摸与键盘反馈。 */
.motion-press {
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform var(--motion-fast) var(--motion-ease-standard),
    box-shadow var(--motion-standard) ease,
    border-color var(--motion-standard) ease,
    background-color var(--motion-standard) ease;
}

.motion-press:not(:disabled):active,
.motion-press.is-motion-pressed {
  transform: scale(0.972);
  transition-duration: 90ms;
}

.motion-press:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary, #3b82f6) 72%, white);
  outline-offset: 3px;
}

.motion-ripple-host {
  overflow: hidden;
}

.motion-ripple-host > :not(.motion-ripple) {
  position: relative;
  z-index: 1;
}

.motion-ripple {
  position: absolute;
  z-index: 0;
  width: 12px;
  height: 12px;
  pointer-events: none;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 24%, transparent);
  transform: translate(-50%, -50%) scale(0);
  animation: will-motion-ripple 560ms ease-out forwards;
}

@keyframes will-motion-ripple {
  55% { opacity: .72; }
  to { opacity: 0; transform: translate(-50%, -50%) scale(var(--motion-ripple-scale, 12)); }
}

/* 对话框只补充内容进入感，不改原有定位与 iPhone 安全区。 */
dialog.motion-dialog[open]::backdrop {
  animation: will-motion-backdrop var(--motion-standard) ease-out both;
}

dialog.motion-dialog[open] > * {
  animation: will-motion-dialog var(--motion-standard) var(--motion-ease-out) both;
}

@keyframes will-motion-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes will-motion-dialog {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* 新增列表项与数据变化。 */
.motion-list-enter {
  animation: will-motion-list-enter 340ms var(--motion-ease-out) both;
}

@keyframes will-motion-list-enter {
  from { opacity: 0; transform: translate3d(0, -7px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.motion-data-changed {
  animation: will-motion-data-change 520ms ease-out both;
}

@keyframes will-motion-data-change {
  0%, 100% { color: inherit; text-shadow: none; }
  35% { color: var(--primary-strong, #4f8cff); text-shadow: 0 0 18px color-mix(in srgb, var(--primary, #3b82f6) 35%, transparent); }
}

.dashboard-meter > i,
.dashboard-employment-progress > i,
.codex-account-meter > i,
.dashboard-codex-heat .dashboard-meter > i {
  transition: width 640ms var(--motion-ease-out), background-color var(--motion-standard) ease;
}

/* AI 今日概览：Siri 风格多色极光边缘，无单点扫光。 */
.dashboard-ai-brief {
  position: relative;
  isolation: isolate;
}

.dashboard-ai-brief::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 2px;
  content: "";
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    110deg,
    rgba(71, 190, 255, .72),
    rgba(101, 91, 255, .94),
    rgba(245, 93, 208, .82),
    rgba(255, 174, 92, .76),
    rgba(74, 224, 190, .82),
    rgba(71, 190, 255, .72)
  );
  background-size: 260% 260%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: will-motion-siri-border 5.4s ease-in-out infinite alternate;
}

.dashboard-ai-brief::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  border-radius: inherit;
  opacity: .38;
  background:
    radial-gradient(180px 90px at 8% 115%, rgba(56, 189, 248, .40), transparent 70%),
    radial-gradient(220px 100px at 46% -24%, rgba(111, 84, 255, .34), transparent 72%),
    radial-gradient(180px 90px at 90% 115%, rgba(244, 91, 190, .29), transparent 70%);
  animation: will-motion-siri-breathe 4.2s ease-in-out infinite alternate;
}

.dashboard-ai-brief > * {
  position: relative;
  z-index: 1;
}

@keyframes will-motion-siri-border {
  0% { opacity: .78; background-position: 0% 55%; }
  52% { opacity: 1; background-position: 55% 45%; }
  100% { opacity: .84; background-position: 100% 55%; }
}

@keyframes will-motion-siri-breathe {
  0% { opacity: .20; transform: scale(.985); }
  55% { opacity: .44; transform: scale(1.012); }
  100% { opacity: .28; transform: scale(1); }
}

/* 工作台视觉层：移动端也能明显感知，但持续动画只放在少数焦点元素。 */
body.page-dashboard {
  position: relative;
  overflow-x: hidden;
}

body.page-dashboard::before,
body.page-dashboard::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: min(72vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(76px);
  opacity: .13;
  will-change: transform, opacity;
}

body.page-dashboard::before {
  top: 8vh;
  left: -28vw;
  background: #4a7dff;
  animation: will-motion-ambient-one 12s ease-in-out infinite alternate;
}

body.page-dashboard::after {
  top: 48vh;
  right: -32vw;
  background: #a657e8;
  animation: will-motion-ambient-two 14s ease-in-out infinite alternate;
}

.page-dashboard .page-shell {
  position: relative;
  z-index: 1;
}

.page-dashboard .dashboard-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 26px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--primary-soft) 26%, var(--surface)));
  box-shadow: 0 22px 70px rgba(25, 35, 66, .09);
}

.page-dashboard .dashboard-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -88px;
  right: 12%;
  width: 260px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 104, 255, .22), transparent 68%);
  animation: will-motion-hero-orb 6.8s ease-in-out infinite alternate;
}

.page-dashboard .dashboard-hero h1 {
  text-wrap: balance;
  letter-spacing: -.045em;
}

.page-dashboard .dashboard-clock > strong {
  color: var(--text);
  text-shadow: 0 0 26px color-mix(in srgb, var(--primary) 28%, transparent);
}

.page-dashboard .dashboard-countdown-card {
  box-shadow: 0 12px 32px rgba(22, 32, 62, .10);
}

.page-dashboard .dashboard-launcher.dashboard-entry {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
  background:
    radial-gradient(circle at 100% 0%, rgba(105, 100, 255, .17), transparent 48%),
    color-mix(in srgb, var(--surface) 99%, var(--bg));
  box-shadow: 0 14px 38px rgba(37, 47, 84, .12);
}

.page-dashboard .dashboard-launcher-director.dashboard-entry {
  border-color: color-mix(in srgb, #36b890 24%, var(--border));
  background:
    radial-gradient(circle at 100% 0%, rgba(54, 184, 144, .16), transparent 48%),
    color-mix(in srgb, var(--surface) 99%, var(--bg));
}

.page-dashboard .dashboard-launcher.dashboard-entry::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -22% -52% 34%;
  height: 72%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  filter: blur(20px);
  animation: will-motion-launcher-glow 4.8s ease-in-out infinite alternate;
}

.page-dashboard .dashboard-launcher-director.dashboard-entry::after {
  background: rgba(54, 184, 144, .18);
  animation-delay: -2.2s;
}

.page-dashboard .dashboard-launcher i {
  animation: will-motion-launcher-arrow 2.6s var(--motion-ease-standard) infinite;
}

.page-dashboard .dashboard-ai-brief-mark {
  color: #fff;
  background: linear-gradient(145deg, #478dff, #7867f5 56%, #d45ecb);
  box-shadow: 0 0 0 5px rgba(94, 114, 255, .09), 0 8px 22px rgba(91, 87, 232, .28);
  animation: will-motion-ai-mark 2.8s ease-in-out infinite;
}

.page-dashboard .dashboard-layout-item {
  border-color: color-mix(in srgb, var(--primary) 13%, var(--border));
  box-shadow:
    0 14px 42px rgba(28, 39, 70, .08),
    0 1px 0 rgba(255, 255, 255, .035) inset;
}

.page-dashboard .dashboard-layout-item[data-widget-id="feishu"],
.page-dashboard .dashboard-layout-item[data-widget-id="work-reports"] {
  border-color: color-mix(in srgb, #19a974 18%, var(--border));
}

.page-dashboard .dashboard-layout-item[data-widget-id="codex-radar"],
.page-dashboard .dashboard-layout-item[data-widget-id="codex-accounts"] {
  border-color: color-mix(in srgb, #8a6bff 20%, var(--border));
}

@keyframes will-motion-ambient-one {
  from { opacity: .09; transform: translate3d(-4%, -2%, 0) scale(.94); }
  to { opacity: .18; transform: translate3d(13%, 8%, 0) scale(1.08); }
}

@keyframes will-motion-ambient-two {
  from { opacity: .08; transform: translate3d(8%, 3%, 0) scale(.96); }
  to { opacity: .17; transform: translate3d(-12%, -7%, 0) scale(1.1); }
}

@keyframes will-motion-hero-orb {
  from { opacity: .45; transform: translate3d(-16px, -8px, 0) scale(.92); }
  to { opacity: .9; transform: translate3d(22px, 16px, 0) scale(1.12); }
}

@keyframes will-motion-launcher-glow {
  from { opacity: .34; transform: translate3d(-8px, 4px, 0) scale(.92); }
  to { opacity: .82; transform: translate3d(12px, -6px, 0) scale(1.12); }
}

@keyframes will-motion-launcher-arrow {
  0%, 72%, 100% { transform: translate3d(0, 0, 0); }
  84% { transform: translate3d(3px, -3px, 0); }
}

@keyframes will-motion-ai-mark {
  0%, 100% { transform: scale(1) rotate(0deg); box-shadow: 0 0 0 5px rgba(94, 114, 255, .08), 0 8px 22px rgba(91, 87, 232, .24); }
  50% { transform: scale(1.07) rotate(7deg); box-shadow: 0 0 0 8px rgba(94, 114, 255, .04), 0 10px 30px rgba(190, 75, 211, .32); }
}

/* 桌面端的轻量悬停；手机端只保留按压反馈。 */
/* 登录页只做一次性的克制入场，避免长时间动效增加干扰。 */
.page-login .login-card {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  border-color: color-mix(in srgb, #689bff 30%, var(--border));
  box-shadow: 0 28px 86px rgba(30, 54, 112, .20);
}

.page-login .login-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -18%;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 0%, rgba(73, 170, 255, .30), transparent 34%),
    radial-gradient(circle at 94% 12%, rgba(161, 85, 255, .24), transparent 32%),
    radial-gradient(circle at 52% 110%, rgba(64, 212, 181, .14), transparent 38%);
  opacity: .88;
  will-change: transform, opacity;
  animation: will-motion-login-aurora 6.4s var(--motion-ease-standard) infinite alternate;
}

.page-login .login-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -34%;
  border-radius: 42%;
  pointer-events: none;
  background: conic-gradient(
    from 12deg,
    transparent 0 10%,
    rgba(63, 151, 255, .34) 22%,
    rgba(121, 91, 255, .28) 39%,
    transparent 51%,
    rgba(236, 92, 202, .22) 68%,
    rgba(66, 215, 182, .20) 83%,
    transparent 96%
  );
  filter: blur(44px);
  opacity: .56;
  will-change: transform;
  animation: will-motion-login-color-wheel 10.8s linear infinite;
}

.page-login .login-card > * {
  position: relative;
  z-index: 1;
}

.page-login .login-shell::before,
.page-login .login-shell::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: min(98vw, 680px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(72px);
  opacity: .24;
  will-change: transform, opacity;
}

.page-login .login-shell {
  position: relative;
  isolation: isolate;
}

.page-login .login-shell::before {
  top: -20%;
  left: -34%;
  background: radial-gradient(circle at 42% 42%, #3a8dff 0%, rgba(65, 130, 255, .76) 34%, transparent 72%);
  animation: will-motion-login-ambient-one 9.2s var(--motion-ease-in-out) infinite alternate;
}

.page-login .login-shell::after {
  right: -38%;
  bottom: -24%;
  background: radial-gradient(circle at 48% 48%, #a759f2 0%, rgba(166, 82, 236, .72) 35%, transparent 72%);
  animation: will-motion-login-ambient-two 11.4s var(--motion-ease-in-out) -3.6s infinite alternate;
}

html.motion-ready body.page-login .login-card {
  animation: will-motion-login-card 760ms var(--motion-ease-out) both;
}

html.motion-ready body.page-login .login-card > * {
  animation: will-motion-login-content 520ms var(--motion-ease-out) both;
}

html.motion-ready body.page-login .login-card > :nth-child(1) { animation-delay: 80ms; }
html.motion-ready body.page-login .login-card > :nth-child(2) { animation-delay: 120ms; }
html.motion-ready body.page-login .login-card > :nth-child(3) { animation-delay: 160ms; }
html.motion-ready body.page-login .login-card > :nth-child(4) { animation-delay: 205ms; }
html.motion-ready body.page-login .login-card > :nth-child(5) { animation-delay: 245ms; }
html.motion-ready body.page-login .login-card > :nth-child(6) { animation-delay: 285ms; }
html.motion-ready body.page-login .login-card > :nth-child(7) { animation-delay: 325ms; }

.page-login .login-card input {
  transition:
    border-color var(--motion-fast) var(--motion-ease-standard),
    box-shadow var(--motion-fast) var(--motion-ease-standard),
    background-color var(--motion-fast) var(--motion-ease-standard);
}

.page-login .login-card input:focus {
  border-color: rgba(92, 173, 255, 0.76);
  box-shadow:
    0 0 0 4px rgba(78, 159, 255, 0.12),
    0 12px 32px rgba(31, 93, 177, 0.1);
}

.page-login .button-primary {
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(36, 119, 230, 0.18);
}

.page-login .button-primary::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(92, 184, 255, .72), rgba(139, 102, 255, .62), rgba(63, 214, 184, .52));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .34;
  animation: will-motion-login-button-edge 3.8s var(--motion-ease-standard) infinite alternate;
}

.page-login .login-brand .brand-avatar-large,
.page-login .login-brand .brand-mark-large {
  box-shadow: 0 12px 28px rgba(49, 119, 238, .24);
  animation: will-motion-brand-float 3.8s ease-in-out infinite;
}

.page-login .button-primary:hover {
  box-shadow:
    0 14px 36px rgba(36, 119, 230, 0.24),
    0 0 0 1px rgba(129, 198, 255, 0.12) inset;
}

.page-login .button-guest {
  transition:
    transform var(--motion-fast) var(--motion-ease-standard),
    border-color var(--motion-fast) var(--motion-ease-standard),
    background-color var(--motion-fast) var(--motion-ease-standard);
}

@keyframes will-motion-login-card {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.965);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes will-motion-login-content {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes will-motion-login-aurora {
  from { opacity: .68; transform: translate3d(-5%, -3%, 0) scale(.96) rotate(-1.5deg); }
  to { opacity: .98; transform: translate3d(6%, 4%, 0) scale(1.12) rotate(2deg); }
}

@keyframes will-motion-login-ambient-one {
  0% { opacity: .18; transform: translate3d(-5vw, -3vh, 0) scale(.90); }
  52% { opacity: .34; }
  100% { opacity: .24; transform: translate3d(clamp(74px, 18vw, 190px), clamp(50px, 10vh, 96px), 0) scale(1.16); }
}

@keyframes will-motion-login-ambient-two {
  0% { opacity: .20; transform: translate3d(5vw, 4vh, 0) scale(.94); }
  48% { opacity: .32; }
  100% { opacity: .23; transform: translate3d(clamp(-180px, -16vw, -68px), clamp(-92px, -9vh, -44px), 0) scale(1.18); }
}

@keyframes will-motion-login-color-wheel {
  from { transform: rotate(0deg) scale(.96); }
  to { transform: rotate(360deg) scale(1.04); }
}

@keyframes will-motion-login-button-edge {
  from { opacity: .24; }
  to { opacity: .66; }
}

@keyframes will-motion-brand-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -4px, 0); }
}

/* 浅色背景会稀释柔光，仅在浅色模式提高约 10% 可见度。 */
@media (prefers-color-scheme: light) {
  .page-login .login-shell::before {
    animation-name: will-motion-login-ambient-one-light;
  }

  .page-login .login-shell::after {
    animation-name: will-motion-login-ambient-two-light;
  }

  .page-login .login-card::after {
    opacity: .62;
  }
}

@keyframes will-motion-login-ambient-one-light {
  0% { opacity: .20; transform: translate3d(-5vw, -3vh, 0) scale(.90); }
  52% { opacity: .37; }
  100% { opacity: .26; transform: translate3d(clamp(74px, 18vw, 190px), clamp(50px, 10vh, 96px), 0) scale(1.16); }
}

@keyframes will-motion-login-ambient-two-light {
  0% { opacity: .22; transform: translate3d(5vw, 4vh, 0) scale(.94); }
  48% { opacity: .35; }
  100% { opacity: .25; transform: translate3d(clamp(-180px, -16vw, -68px), clamp(-92px, -9vh, -44px), 0) scale(1.18); }
}

@media (hover: hover) and (pointer: fine) {
  .dashboard-widget.motion-card,
  .dashboard-growth-panel.motion-card,
  .dashboard-launcher.motion-card {
    transition:
      transform var(--motion-standard) var(--motion-ease-out),
      box-shadow var(--motion-standard) ease,
      border-color var(--motion-standard) ease;
  }

  .dashboard-widget.motion-card:hover,
  .dashboard-growth-panel.motion-card:hover,
  .dashboard-launcher.motion-card:hover {
    transform: translate3d(0, -4px, 0);
    border-color: color-mix(in srgb, var(--primary, #3b82f6) 22%, var(--line));
    box-shadow: 0 22px 54px rgba(23, 35, 66, .14);
  }
}

@media (max-width: 760px) {
  :root {
    --motion-enter-distance: 17px;
    --motion-slow: 320ms;
  }

  dialog.motion-dialog[open] > * {
    animation-duration: 280ms;
  }

  .dashboard-widget.motion-card:active,
  .dashboard-growth-panel.motion-card:active,
  .dashboard-launcher.motion-card:active {
    transform: scale(.965);
  }

  .page-dashboard .dashboard-hero {
    padding: 18px 16px;
    border-radius: 22px;
    box-shadow: 0 18px 54px rgba(29, 43, 82, .11);
  }

  .page-dashboard .dashboard-hero::before {
    right: -24%;
    width: 220px;
  }

  .page-dashboard .dashboard-launcher.dashboard-entry {
    box-shadow: 0 12px 30px rgba(34, 45, 82, .13);
  }

  .page-dashboard .dashboard-layout-item {
    box-shadow: 0 14px 36px rgba(26, 38, 72, .10);
  }

  body.page-dashboard::before,
  body.page-dashboard::after {
    opacity: .16;
    filter: blur(58px);
  }
}

@media (max-width: 470px) {
  .page-dashboard .dashboard-hero {
    display: grid;
    gap: 16px;
    padding: 18px 16px;
  }

  .page-dashboard .dashboard-hero h1 {
    margin: 5px 0 8px;
    font-size: clamp(30px, 9vw, 36px);
    line-height: 1.08;
  }

  .page-dashboard .dashboard-clock {
    position: static;
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: end;
    justify-items: start;
    padding: 12px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  }

  .page-dashboard .dashboard-clock > strong {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    font-size: 31px;
  }

  .page-dashboard .dashboard-clock > span {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .page-dashboard .dashboard-clock-countdowns {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 1ms;
    --motion-standard: 1ms;
    --motion-slow: 1ms;
  }

  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  .motion-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  html.motion-ready body.page-login .login-card,
  html.motion-ready body.page-login .login-card > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ============ Magic UI 参考动效（原生实现，克制使用） ============ */

/* 极光渐变文字：沿文字背景缓慢流动，参考 Magic UI Aurora Text。 */
.ui-aurora-text {
  background-image: linear-gradient(
    118deg,
    #7aa2ff 0%,
    #b18cff 32%,
    #5cd6c2 64%,
    #7aa2ff 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: will-motion-aurora 14s ease-in-out infinite alternate;
}

@keyframes will-motion-aurora {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 边缘走光：遮罩只保留 1px 描边，渐变位置缓慢流动，参考 Magic UI Shine Border。 */
.ui-shine {
  position: relative;
  isolation: isolate;
}

.ui-shine::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background-image: radial-gradient(
      150% 190% at 10% -15%,
      rgba(255, 255, 255, 0.72),
      transparent 44%
    ),
    radial-gradient(
      170% 210% at 95% 118%,
      rgba(125, 158, 255, 0.72),
      transparent 50%
    );
  background-size: 300% 300%;
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: will-motion-shine 9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes will-motion-shine {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* 浅色模式下提高渐变文字对比度。 */
@media (prefers-color-scheme: light) {
  .ui-aurora-text {
    background-image: linear-gradient(
      118deg,
      #3d6ef0 0%,
      #7c5ce0 34%,
      #0f9d8a 66%,
      #3d6ef0 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-aurora-text,
  .ui-shine::after {
    animation: none;
  }
}