/* fancy.css — motion polish (additive, coexists with app.js).
   Effects from the fancy-motion skill. Animates only transform/opacity. */

/* ── Lock screen ─────────────────────────────────────────────────────────── */
.lock-card .btn.grad.magnetic { transition: transform .25s cubic-bezier(.2,.8,.2,1); }

.lock-card .btn.grad.glow-cta { position: relative; isolation: isolate; }
.lock-card .btn.grad.glow-cta::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  background: var(--grad, linear-gradient(90deg,#7c3aed,#2563eb));
  filter: blur(16px); opacity: .4; z-index: -1; transition: opacity .3s ease;
}
.lock-card .btn.grad.glow-cta:hover::after { opacity: .85; }

.lock-card.fx-spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
              color-mix(in srgb, var(--accent,#e0518a) 20%, transparent), transparent 60%);
  opacity: 0; transition: opacity .3s ease; z-index: 0; pointer-events: none;
}
.lock-card.fx-spot:hover::after { opacity: 1; }

/* JS animates these in from hidden; visible stays the CSS default so a JS/CDN
   failure never leaves the card blank. */
.fx-in { opacity: 0; }

/* ── Global card hover: springier lift (existing ::after glow left intact) ── */
.card { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
.card:hover { transform: translateY(-4px); }

/* ── Ambient backdrop: soft mesh that drifts behind the whole app ─────────── */
.fancy-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fancy-bg::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(40% 40% at 25% 30%, color-mix(in srgb, var(--accent,#e0518a) 22%, transparent), transparent 70%),
    radial-gradient(38% 38% at 78% 68%, color-mix(in srgb, var(--accent-2,#7c5cff) 22%, transparent), transparent 70%);
  filter: blur(40px); opacity: .5;
  animation: fancy-bg-drift 26s ease-in-out infinite alternate;
  transition: filter .6s ease, opacity .6s ease, background .6s ease;
}
@keyframes fancy-bg-drift {
  from { transform: translate3d(-3%,-2%,0) scale(1); }
  to   { transform: translate3d(4%,3%,0) scale(1.12); }
}
/* lift real content above the backdrop layer */
#app, #lock { position: relative; z-index: 1; }

/* ── Button ripple (contained by a per-button clip layer so it never clips the
   button's own outside glow) ─────────────────────────────────────────────── */
.fx-rip-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 0; }
.fx-ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .22; transform: scale(0); animation: fx-ripple .55s ease-out forwards; }
@keyframes fx-ripple { to { transform: scale(2.6); opacity: 0; } }

/* ── Sliding active-nav indicator (retires the static inset bar on .navitem.on) */
#sideNav { position: relative; }
.navitem.on { box-shadow: 0 6px 22px -14px color-mix(in srgb, var(--accent) 70%, transparent); }
.fx-nav-ind {
  position: absolute; left: 0; top: 0; width: 3px; border-radius: 0 2px 2px 0;
  background: var(--accent, #e0518a); opacity: 0;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent, #e0518a) 70%, transparent);
  transition: transform .32s cubic-bezier(.16,1,.3,1), opacity .2s;  /* height set instantly, only the slide animates */
  pointer-events: none;
}

/* ── Value-change flash (a polled number changed) ────────────────────────── */
@keyframes fx-flash {
  0%   { color: var(--accent, #e0518a); text-shadow: 0 0 12px color-mix(in srgb, var(--accent, #e0518a) 60%, transparent); }
  100% { }
}
.fx-flash { animation: fx-flash .7s ease; }

/* ── Backdrop reacts to device state ─────────────────────────────────────── */
.fancy-bg::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none; opacity: 0; filter: blur(50px);
  background: radial-gradient(46% 46% at 50% 42%, color-mix(in srgb, var(--accent, #e0518a) 34%, transparent), transparent 70%);
}
.fancy-bg.fx-ping::after { animation: fancy-bg-ping 1s ease; }
@keyframes fancy-bg-ping { 0% { opacity: 0; } 28% { opacity: .5; } 100% { opacity: 0; } }
.fancy-bg.fx-dim::before { filter: blur(40px) saturate(.18); opacity: .22; animation-duration: 60s; }  /* device offline: calm, desaturated */
.fancy-bg.fx-locked::before {
  background:
    radial-gradient(40% 40% at 30% 30%, color-mix(in srgb, var(--bad, #ff5470) 22%, transparent), transparent 70%),
    radial-gradient(38% 38% at 78% 68%, color-mix(in srgb, var(--bad, #ff5470) 16%, transparent), transparent 70%);
}

/* ── Transforms: compact the level ladder into a horizontal pill strip ─────
   CSS-only reflow of the existing rail — rail on top (wraps to a couple rows,
   scrolls past that), detail gets the full width below. No app.js change. */
.txe-body { flex-direction: column; }
.txe-rail {
  flex: none; width: 100%; max-height: 132px;   /* ~2 rows of pills, then scroll */
  flex-direction: row; flex-wrap: wrap; align-items: center;
}
.txe-lvl { width: auto; }
.txe-lvl .txe-lvl-name { max-width: 140px; }     /* keep long level names from bloating a pill */
.txe-rail .txe-rail-actions { flex-direction: row; margin-top: 0; }

/* ── Transforms grid: exclusivity-aware. Only one transform is ever live, so the
   active one shows its full level ladder and the rest collapse to a compact
   switch palette. Pure CSS + a small observer (fancy.js) — no app.js change,
   and my expand toggle never fires a command (pips still do the real work). ── */
.steppers { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.stepper.fx-active { flex: 1 1 100%; order: -1; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.stepper.fx-collapsed { flex: 0 0 auto; padding: 9px 13px; cursor: pointer; transition: border-color .14s, background .14s, transform .1s; }
.stepper.fx-collapsed:hover { border-color: color-mix(in srgb, var(--accent-2) 55%, var(--border-strong)); background: var(--surface-3); }
.stepper.fx-collapsed:active { transform: scale(.98); }
.stepper.fx-collapsed .stepper-top { margin-bottom: 0; }
.stepper.fx-collapsed .now,
.stepper.fx-collapsed .pips { display: none; }
.stepper.fx-collapsed.fx-expanded { flex-basis: 100%; cursor: default; }
.stepper.fx-collapsed.fx-expanded .pips { display: flex; margin-top: 8px; }

/* Transforms view sub-tabs (injected by fancy.js) hide the inactive panes */
.fx-tab-hidden { display: none !important; }

/* Actions tab: transform action controls relocated out of the Modules view.
   The redundant Level control (owned by the stepper) and level-only cards hide. */
.fx-lvl-hidden,
.fx-actions-empty { display: none !important; }
#fxActionsBody details.module { margin-bottom: 8px; }

/* the live transform breathes a soft accent glow so it reads as "this one is on" */
.stepper.fx-active { animation: fx-live 3.2s ease-in-out infinite; }
@keyframes fx-live {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
  50%      { box-shadow: 0 0 22px -4px color-mix(in srgb, var(--accent) 45%, transparent); }
}

/* level pips pop on hover (springy) — the tap-down scale(.9) stays */
.pip { transition: transform .16s cubic-bezier(.16,1,.3,1), border-color .12s, background .12s, box-shadow .16s; }
.pip:hover { transform: scale(1.14); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent-2) 60%, transparent); z-index: 1; }

/* ── Quick Actions: springier lift + icon pop + soft glow on hover ────────── */
.qbtn { transition: transform .28s cubic-bezier(.16,1,.3,1), border-color .14s, background .14s, box-shadow .25s ease; }
.qbtn .emoji { transition: transform .28s cubic-bezier(.16,1,.3,1); }
.qbtn:hover .emoji { transform: scale(1.16); }
.qbtn:hover { box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--accent) 60%, transparent); }
.qbtn.danger:hover { box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--bad, #ff5470) 60%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .fx-in { opacity: 1; }
  .qbtn:hover .emoji { transform: none; }
  .card:hover { transform: none; }
  .fancy-bg::before { animation: none; }
  .fx-ripple, .fancy-bg.fx-ping::after { animation: none; opacity: 0; }
  .fx-nav-ind { transition: none; }
  .fx-flash { animation: none; }
  .stepper.fx-active { animation: none; }
  .pip:hover { transform: none; }
}