/* ============================================================
   FLYBITS COMPONENT INTERACTIONS
   Hover / active / focus states that inline styles can't express.
   Confident, restrained motion — subtle lift, brightening accents.
   ============================================================ */

/* Buttons */
.fb-btn:hover:not(:disabled){transform:translateY(-1px)}
.fb-btn:active:not(:disabled){transform:translateY(0)}
.fb-btn__label,.fb-btn__icon{position:relative;z-index:1;display:inline-flex;align-items:center}
.fb-btn__icon{transition:transform var(--dur-fast) var(--ease-standard)}
.fb-btn[data-variant="primary"]:hover:not(:disabled){box-shadow:0 6px 24px rgba(242,107,63,0.16)}

/* Primary — signature white dot grows to flood the pill white; text stays ink */
.fb-btn__dot{position:relative;z-index:0;flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--fb-white);transform:scale(1);transform-origin:center;transition:transform var(--dur-base) var(--ease-standard)}
.fb-btn[data-variant="primary"] .fb-btn__label{position:relative;top:0.5px;transition:transform var(--dur-base) var(--ease-standard)}
.fb-btn[data-variant="primary"]:hover:not(:disabled) .fb-btn__label{transform:translateX(var(--label-shift,0))}
.fb-btn[data-variant="primary"]:hover:not(:disabled) .fb-btn__dot{transform:scale(60)}
/* Secondary — aqua outline; aqua dot floods the pill on hover, text slides to center and turns ink */
.fb-btn[data-variant="secondary"] .fb-btn__dot{background:var(--fb-aqua)}
.fb-btn[data-variant="secondary"] .fb-btn__label{position:relative;top:0.5px;transition:transform var(--dur-base) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.fb-btn[data-variant="secondary"]:hover:not(:disabled){background:transparent;border-color:var(--fb-aqua);box-shadow:0 6px 24px rgba(255,255,255,0.16)}
.fb-btn[data-variant="secondary"]:hover:not(:disabled) .fb-btn__label{transform:translateX(var(--label-shift,0));color:var(--fb-ink-900)}
.fb-btn[data-variant="secondary"]:hover:not(:disabled) .fb-btn__dot{transform:scale(60)}

.fb-btn[data-variant="danger"]:hover:not(:disabled){filter:brightness(1.08)}
/* Ghost / tertiary \u2014 link style: aqua label (always), aqua arrow that turns white and slides 4px right on hover; label unchanged */
.fb-btn[data-variant="ghost"] .fb-btn__ricon{color:var(--fb-aqua);transition:transform var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.fb-btn[data-variant="ghost"]:hover:not(:disabled){background:transparent;transform:none}
.fb-btn[data-variant="ghost"]:hover:not(:disabled) .fb-btn__ricon{transform:translateX(4px);color:var(--fb-white)}
/* Any arrow inside a ghost CTA turns white on hover, including leading/back arrows
   that carry no .fb-btn__ricon class (only the trailing icon also slides 4px). */
.fb-btn[data-variant="ghost"] svg{transition:color var(--dur-fast) var(--ease-standard)}
.fb-btn[data-variant="ghost"]:hover:not(:disabled) svg{color:var(--fb-white)}
/* Cards with a full-card overlay link swallow the CTA's own :hover, so drive the
   arrow from the card instead — same white + 4px slide. */
[data-glass-card]:hover .fb-btn[data-variant="ghost"] svg{color:var(--fb-white)}
[data-glass-card]:hover .fb-btn[data-variant="ghost"] .fb-btn__ricon{transform:translateX(4px)}

/* Icon buttons */
.fb-iconbtn[data-variant="primary"]:hover:not(:disabled){background:var(--fb-aqua-bright)}
.fb-iconbtn[data-variant="secondary"]:hover:not(:disabled){background:rgba(255,255,255,0.09)}
.fb-iconbtn[data-variant="ghost"]:hover:not(:disabled){background:rgba(255,255,255,0.06);color:#fff}

/* Tags */
.fb-tag:not([data-active]):hover{border-color:var(--fb-ink-300);background:rgba(255,255,255,0.07)}

/* Interactive cards */
.fb-card[data-interactive]{cursor:pointer}
.fb-card[data-interactive]:hover{transform:translateY(-3px);border-color:var(--fb-ink-400);box-shadow:var(--shadow-lg)}

/* Focus ring for all interactive brand elements */
.fb-btn:focus-visible,.fb-iconbtn:focus-visible,.fb-tag:focus-visible,.fb-input:focus-visible,.fb-card[data-interactive]:focus-visible{outline:2px solid var(--fb-aqua);outline-offset:2px}

/* Inputs */
.fb-input:focus{border-color:var(--fb-aqua)!important;box-shadow:0 0 0 3px rgba(65,229,225,0.18)}
.fb-input::placeholder{color:var(--fb-ink-300)}