/* 动效与鼠标交互；受 data-motion 与 prefers-reduced-motion 控制。 */

/* ---------- 光标聚光 ---------- */
.cursor-glow {
  position: fixed; top: 0; left: 0;
  width: 92px; height: 92px;
  margin: -46px 0 0 -46px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 90;
  opacity: 0;
  background: radial-gradient(circle, var(--glow-color) 0%, transparent 64%);
  transition: opacity .5s var(--ease-out);
  will-change: transform;
}
.cursor-glow.is-visible { opacity: 1; }

/* ---------- 卡片 3D 微倾斜 + 光标描边 ---------- */
[data-tilt] {
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .4s var(--ease-out);
  will-change: transform;
}
[data-tilt].is-tilting { transition: transform .09s linear; }
[data-tilt]::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--accent-line), transparent 68%);
  -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;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
[data-tilt]:hover::after { opacity: 1; }

/* ---------- 按钮涟漪 ---------- */
.ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  opacity: .9;
  background: radial-gradient(circle, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 66%);
  animation: lmRipple .7s var(--ease-out) forwards;
}
.btn--ghost .ripple,
.btn--soft .ripple,
.btn--quiet .ripple,
.icon-btn .ripple,
.tab .ripple {
  background: radial-gradient(circle, rgba(22, 22, 20, .12) 0%, rgba(22, 22, 20, 0) 66%);
}

/* ---------- 入场 reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(14px); }
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity .62s var(--ease-out) var(--reveal-delay, 0ms), transform .62s var(--ease-out) var(--reveal-delay, 0ms);
}

/* ---------- 动效开关 ---------- */
html[data-motion="calm"] .cursor-glow { display: none; }
html[data-motion="calm"] [data-tilt] { transform: none !important; }
html[data-motion="calm"] .ripple { display: none; }
html[data-motion="calm"] [data-magnetic] { translate: none !important; }
html[data-motion="calm"] .dz-icon { animation: none; }
html[data-motion="calm"] .cursor-glow { display: none; }

html[data-motion="off"] .cursor-glow { display: none; }
html[data-motion="off"] .ripple { display: none; }
html[data-motion="off"] [data-tilt] { transform: none !important; }
html[data-motion="off"] [data-reveal] { opacity: 1 !important; transform: none !important; }
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation-duration: .001ms !important;
  animation-delay: 0ms !important;
  transition-duration: .001ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cursor-glow { display: none; }
  .ripple { display: none; }
  [data-tilt] { transform: none !important; }
  [data-magnetic] { translate: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
}

/* ---------- 关键帧 ---------- */
@keyframes lmSpin { to { transform: rotate(360deg); } }
@keyframes lmPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes lmShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes lmBootBar { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } }
@keyframes lmRipple { to { transform: scale(1); opacity: 0; } }
@keyframes lmBannerIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes lmToastIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes lmMenuIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes lmPageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lmAuthIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes lmBreathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes lmPing { 0% { box-shadow: 0 0 0 0 var(--ok-soft); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- 组件动效 ---------- */
.page { animation: lmPageIn .5s var(--ease-out); }
.banner { animation: lmBannerIn .5s var(--ease-out); }
.banner.is-leaving { opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s; }
.toast { animation: lmToastIn .34s var(--ease-out); }
.auth-card { animation: lmAuthIn .62s var(--ease-out); }

.modal-backdrop { opacity: 0; transition: opacity .26s var(--ease-out); }
.modal { opacity: 0; transform: translateY(16px) scale(.965); transition: opacity .3s var(--ease-out), transform .42s var(--ease-spring); }
.modal-layer.is-open .modal-backdrop { opacity: 1; }
.modal-layer.is-open .modal { opacity: 1; transform: none; }
.modal-layer.is-closing .modal { opacity: 0; transform: translateY(8px) scale(.98); }
.modal-layer.is-closing .modal-backdrop { opacity: 0; }
.modal-layer.is-closing .modal,
.modal-layer.is-closing .modal-backdrop { transition-duration: .2s; }

.drawer-scrim { opacity: 0; transition: opacity .3s var(--ease-out); }