/* React Bits effects, ported to plain JavaScript and CSS (bits-fx.js).
 * Ideas and behaviour from https://reactbits.dev (Magnet, ClickSpark, ShinyText, BlurText,
 * Particles; MIT + Commons Clause, free to use in the portal), written out again without React. */

/* Magnet: a gold button leans toward the pointer (the CSS `translate` property, so the button's own hover lift is untouched) */
.bx-mag{translate:var(--mx,0px) var(--my,0px)}

/* ClickSpark */
.bx-sparks{position:fixed;inset:0;z-index:3500;pointer-events:none}

/* ShinyText: a slow glint across a live progress bar */
.cx__sync.is-live .cx__syncbar i{
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%) 0 0/250% 100% no-repeat,linear-gradient(90deg,#d9b25f,#b9822f);
  animation:bxBar 2.2s linear infinite;
}
@keyframes bxBar{from{background-position:140% 0,0 0}to{background-position:-40% 0,0 0}}

/* Particles: gold dust behind the sign-in */
.bx-dust{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .cx__sync.is-live .cx__syncbar i{animation:none}
}

/* Command menu (command-menu.js): Ctrl or Cmd + K */
.cmd{position:fixed;inset:0;z-index:3200;display:grid;justify-items:center;align-items:start;padding:12vh 18px 18px}
.cmd__scrim{position:absolute;inset:0;background:rgba(42,24,8,.5);backdrop-filter:blur(3px)}
.cmd__box{position:relative;width:min(560px,100%);max-height:min(520px,72vh);display:flex;flex-direction:column;border-radius:22px;
  background:#fff;border:1px solid var(--line,#e6dcc8);box-shadow:0 40px 90px rgba(0,0,0,.4),0 2px 8px rgba(38,26,10,.1);overflow:hidden}
.cmd__in{border:0;outline:none;background:transparent;font:inherit;font-size:16px;padding:18px 22px;border-bottom:1px solid var(--line,#e6dcc8);color:var(--ink,#241a0e)}
.cmd__in::placeholder{color:var(--ink-3,#9a8c78)}
.cmd__list{overflow-y:auto;padding:8px;display:grid;gap:2px;overscroll-behavior:contain}
.cmd__row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:11px 14px;border-radius:12px;font-size:14px;text-align:left;color:var(--ink,#241a0e);transition:background .12s}
.cmd__row em{font-style:normal;font-size:11.5px;color:var(--ink-3,#9a8c78);white-space:nowrap}
.cmd__row.is-hi{background:linear-gradient(#f6e6c3,#efd9a6);color:#4a2f11}
.cmd__row.is-hi em{color:#7a5222}
.cmd__none{margin:0;padding:22px;text-align:center;color:var(--ink-3,#9a8c78);font-size:13.5px}
.cmd__foot{display:flex;gap:16px;padding:10px 18px;border-top:1px solid var(--line,#e6dcc8);font-size:11.5px;color:var(--ink-3,#9a8c78)}
.cmd__foot kbd{font:inherit;font-size:10.5px;padding:1px 6px;margin-right:4px;border-radius:6px;border:1px solid var(--line,#e6dcc8);background:#faf6ee}
@media (max-width:640px){.cmd{padding-top:8vh}.cmd__foot{display:none}}

/* Hover Preview */
.bx-peek{position:fixed;left:0;top:0;z-index:3100;width:280px;pointer-events:none;border-radius:18px;overflow:hidden;background:#fff;
  border:1px solid var(--line,#e6dcc8);box-shadow:0 24px 60px rgba(38,26,10,.3),0 2px 8px rgba(38,26,10,.1)}
.bx-peek img{display:block;width:100%;height:200px;object-fit:cover;background:var(--paper-2,#f4ede0)}
.bx-peek span{display:block;padding:9px 14px 11px;font-size:12.5px;font-weight:600;color:var(--ink,#241a0e);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}