/* Planning Desk fx: particles, fly-to chip, mute button, tactile press. Only transform/opacity animate. */

/* ---------- Particle overlay ---------- */
.fx-layer { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.fx-p { position: absolute; left: 0; top: 0; display: block; will-change: transform, opacity; }
.fx-p--spark { border-radius: 50%; }
.fx-p--ink { border-radius: 50% 40% 55% 45%; background: var(--ink); }
.fx-p--confetti { border-radius: 1px; }
.fx-p--paper { background: var(--sheet); border: 1px solid var(--rule); border-radius: 1px; }

/* ---------- Fly-to "+N" chip ---------- */
.fx-fly {
  position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none;
  display: inline-block; padding: 4px 12px;
  background: var(--sheet); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r-btn);
  font-family: var(--f-display); font-weight: 800; font-stretch: 125%;
  font-variation-settings: "wdth" 125; font-size: var(--t-20); line-height: 1.2;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  will-change: transform, opacity;
}

/* ---------- Mute button ---------- */
.site-header nav { display: flex; align-items: center; gap: 12px; }
.fx-mute svg { display: block; }
.fx-mute[aria-pressed="true"] { color: var(--ink-2); }

/* ---------- Tactile press (app-wide) ---------- */
:is(.btn, button, .icon-btn, [role="option"], [role="radio"], [role="button"], .opt) {
  transition-property: background-color, color, border-color, scale, transform;
  transition-duration: 0.12s, 0.12s, 0.12s, 80ms, 80ms;
  transition-timing-function: ease-out;
}
:is(.btn, button, .icon-btn, [role="option"], [role="radio"], [role="button"], .opt):active:not(:disabled, [aria-disabled="true"]) {
  scale: 0.97;
}
/* Replace v1's 1px nudge so the press is one consistent gesture. */
.btn:active:not(:disabled) { transform: none; }

@supports not (scale: 1) {
  :is(.btn, button, .icon-btn, [role="option"], [role="radio"], [role="button"], .opt):active:not(:disabled, [aria-disabled="true"]) {
    transform: scale(0.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.btn, button, .icon-btn, [role="option"], [role="radio"], [role="button"], .opt) { transition: none; }
  :is(.btn, button, .icon-btn, [role="option"], [role="radio"], [role="button"], .opt):active:not(:disabled, [aria-disabled="true"]) {
    scale: none; transform: none;
  }
  .fx-layer { display: none; }
}