/* ============================================================
   PerfectBody LipoHP — Interaction states
   Hover/press/focus for the component classNames. Kept here (in
   the styles.css closure) so inline-styled React components get
   real :hover/:active without CSS-in-JS.
   ============================================================ */

/* ---- Button ---- */
.pb-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.pb-btn--primary:hover {
  background: var(--pb-blue-hover) !important;
  transform: translateY(-1px);
  box-shadow: var(--pb-glow-blue-lg) !important;
}
.pb-btn--primary:active { transform: scale(.98); }
.pb-btn--ghost:hover { filter: brightness(.98); border-color: var(--pb-border-strong) !important; transform: translateY(-1px); }
.pb-btn--ghost:active { transform: scale(.98); }
.pb-btn--dark:hover { background: rgba(244,242,236,.08) !important; border-color: var(--pb-ink-on-dark) !important; }
.pb-btn--dark:active { transform: scale(.98); }

/* ---- Tab ---- */
.pb-tab { transition: background .22s var(--pb-ease), color .22s var(--pb-ease), border-color .22s var(--pb-ease), transform .15s var(--pb-ease); }
.pb-tab:hover { border-color: var(--pb-border-strong) !important; }
.pb-tab:active { transform: scale(.97); }
.pb-tab:focus-visible { outline: 2px solid var(--pb-ink); outline-offset: 3px; }

/* ---- Link with growing underline ---- */
.pb-link { position: relative; text-decoration: none; }
.pb-link::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: currentColor; transition: width .25s var(--pb-ease); }
.pb-link:hover::after { width: 100%; }

/* ---- Avatar selector ---- */
.pb-avatar-btn { transition: opacity .25s var(--pb-ease), transform .25s var(--pb-ease), box-shadow .25s var(--pb-ease); }

/* ---- Card hover lift (opt-in) ---- */
.pb-card--hover { transition: transform .25s var(--pb-ease), box-shadow .25s var(--pb-ease); }
.pb-card--hover:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .pb-btn, .pb-tab, .pb-avatar-btn, .pb-card--hover { transition: none !important; }
  .pb-btn:hover, .pb-btn:active, .pb-card--hover:hover { transform: none !important; }
}