:root{
  --ease-out: cubic-bezier(.22,1,.36,1);
  --dur-fast: .2s;
  --dur-base: .35s;
  --dur-slow: .6s;
}
.hfx-btn,
.hfx-card,
.hfx-fx,
.fx-shimmer{
  --fx-ink:         var(--wtf-text-strong, var(--text-primary, #18181b));
  --fx-bg:          var(--wtf-bg, var(--bg-card, #ffffff));
  --fx-on-ink:      var(--fx-bg);
  --fx-body:        var(--wtf-text, var(--text-secondary, #3f3f46));
  --fx-muted:       var(--wtf-text-muted, var(--text-muted, #71717a));
  --fx-surface:     var(--wtf-surface, var(--bg-elevated, rgba(0,0,0,.03)));
  --fx-border:      var(--wtf-border, var(--border, rgba(0,0,0,.10)));
  --fx-accent:      var(--wtf-accent, var(--violet, #6d5efc));
  --fx-on-accent:   var(--wtf-accent-contrast, #ffffff);
  --fx-accent-text: var(--wtf-accent-text, var(--violet-light, #5546d4));
  --fx-accent-soft: color-mix(in srgb, var(--fx-accent) 14%, transparent);
  --fx-radius:      var(--radius-md, 10px);
}
.fx-shimmer{
  background: linear-gradient(90deg, var(--fx-muted), var(--fx-ink), var(--fx-muted));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fx-shimmer 2.2s linear infinite;
}
@keyframes fx-shimmer{ from{ background-position: 200% 0 } to{ background-position: -200% 0 } }
.fx-underline{ position: relative; }
.fx-underline::after{
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.fx-underline:hover::after{ transform: scaleX(1); }
.fx-lift{ transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.fx-lift:hover{ transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.fx-in{ opacity: 0; transform: translateY(14px); animation: fx-in .5s var(--ease-out) forwards; }
@keyframes fx-in{ to{ opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce){
  .fx-shimmer, .fx-in{ animation: none !important; opacity: 1 !important; transform: none !important; }
  .fx-underline::after, .fx-lift{ transition: none !important; }
}