/* ===================================================================
   TK FX — layout scaffolding for the adopted-node effect wrappers.
   Effects are decorative; every control works with this file absent.
   Paired with tk-fx.js. See fx-src/entry.js for the mount contract.
   =================================================================== */

/* The wrapper must not introduce a box of its own — it mirrors whatever
   it adopted, so inline buttons stay inline and block fields stay block. */
.tkfx-holder { display: inline-flex; vertical-align: middle; max-width: 100%; }
.tkfx-holder--block { display: block; width: 100%; }

.tkfx-adopt { display: inline-flex; max-width: 100%; }
.tkfx-adopt--block { display: block; width: 100%; }
.tkfx-adopt--block > * { width: 100%; }

/* MetalFx paints a canvas over the host. Keep the label above it and keep
   the canvas out of the hit-test path so clicks reach the real control. */
.tkfx-holder canvas { pointer-events: none; }

/* The metal rim supplies its own specular edge, so the stock shine sweep on
   .o-btn-primary would double up. Suppress it only once a rim is attached. */
.tkfx-adopt .o-btn-primary::after { display: none; }

/* Drop the heavy outer glow, which fights the rim. */
.tkfx-adopt .o-btn-primary { box-shadow: 0 6px 22px -12px rgba(74,158,206,0.45); }

/* The hover lift has to move to the wrapper.

   MetalFx writes the host's style attribute every frame to keep the shader
   registered to the element. That restarts the button's own `transition:
   transform` on every write, so `:hover { translateY(-2px) }` never gets to
   run — measured, it pins at ~0.1px and the tactile lift is simply gone.
   Driving it from the wrapper instead sidesteps the shader entirely, and
   because the canvas lives inside the wrapper the rim travels with the
   button rather than detaching from its edge. */
.tkfx-holder--lift { transition: transform .3s ease; }
.tkfx-holder--lift:hover { transform: translateY(-2px); }
.tkfx-holder--lift:active { transform: translateY(0) scale(0.975); }
.tkfx-adopt .o-btn-primary:hover,
.tkfx-adopt .o-btn-primary:active { transform: none; }

/* A beamed field owns its focus ring; the browser default would sit inside
   the beam and read as two rings. Focus remains visible via the beam plus
   this hairline, so this is not a focus-visibility regression. */
.tkfx-adopt--block input:focus,
.tkfx-adopt--block textarea:focus,
.tkfx-adopt--block select:focus { outline: none; border-color: rgba(74,158,206,0.55); }

/* Thinking-orb slots */
.tkfx-orb { display: inline-flex; align-items: center; justify-content: center; }
.tkfx-orb-row { display: inline-flex; align-items: center; gap: 10px; }
.tkfx-orb-row span { color: var(--o-ink-2, rgba(220,222,228,.72)); font-size: 14px; letter-spacing: -0.01em; }

/* ---- Liquid-goo: hand-rolled rather than bundled. -------------------
   liquid-gooey is 25KB gz for a blob-merge effect aimed at FAB menus and
   drag interactions — it has no button or form role here. The underlying
   technique is a two-node SVG filter, so it is inlined instead. Apply
   .tkfx-goo to a container whose children should merge as they separate. */
.tkfx-goo { filter: url(#tkfx-goo); }
.tkfx-goo > * { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .tkfx-goo { filter: none; }
  .tkfx-holder--lift { transition: none; }
  .tkfx-holder--lift:hover { transform: none; }
  .tkfx-holder canvas { display: none; }
}