/* =========================================================
   Life OS — fx.css  (effects: js/fx.js)
   html.fx-fun = everything · html.fx-subtle = gentle · html.fx-off / .reduce-motion = still
   ========================================================= */
.fx-canvas { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }

/* ---------- Export menu (js/export/exporter.js) ---------- */
.export-menu { width: min(340px, 90vw); max-height: 72vh; overflow-y: auto; }
.export-title { font-weight: 700; font-size: 0.95rem; padding: 2px 6px 6px; }
.export-heading { padding: 6px 6px 2px; }
.export-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text);
  padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.export-item:hover, .export-item:focus-visible { background: var(--hover); }
.export-icon { font-size: 1.1rem; line-height: 1.2; width: 22px; text-align: center; flex: 0 0 auto; }
.export-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.export-label { font-size: 0.88rem; font-weight: 500; }
.export-hint { font-size: 0.74rem; color: var(--text-muted); }
.export-empty, .export-foot { font-size: 0.78rem; color: var(--text-muted); padding: 4px 8px; }

/* ---------- Cards slide in one after another (new page) ---------- */
@keyframes fxRise { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes fxRiseBig { 0% { opacity: 0; transform: translateY(26px) scale(0.96) rotate(-0.4deg); } 70% { opacity: 1; transform: translateY(-3px) scale(1.005); } 100% { opacity: 1; transform: none; } }
html.fx-subtle .fx-in { animation: fxRise 0.38s var(--ease) both; animation-delay: calc(var(--fx-i, 0) * 28ms); }
html.fx-fun .fx-in { animation: fxRiseBig 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.15) both; animation-delay: calc(var(--fx-i, 0) * 45ms); }
.drag-ghost, .drag-ghost * { animation: none !important; }

/* ---------- Touch feedback ---------- */
html.fx-subtle .btn:active, html.fx-fun .btn:active,
html.fx-subtle .icon-btn:active, html.fx-fun .icon-btn:active,
html.fx-fun .fin-quick:active, html.fx-fun .midi-chord:active, html.fx-fun .mdrum-cell:active { transform: scale(0.94); }
.btn, .icon-btn, .fin-quick, .midi-chord, .mdrum-cell { transition: transform 0.12s var(--ease), background var(--dur), box-shadow var(--dur), border-color var(--dur); }

/* Check boxes pop when ticked */
@keyframes fxCheck { 0% { transform: scale(1); } 40% { transform: scale(1.45) rotate(-8deg); } 100% { transform: scale(1); } }
html.fx-subtle input[type="checkbox"]:checked, html.fx-fun input[type="checkbox"]:checked { animation: fxCheck 0.35s var(--ease); }

/* ---------- Fun: cards lift and glow ---------- */
html.fx-fun .lg-item > .dash-panel, html.fx-fun .lg-item > .card, html.fx-fun .wid-card {
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
html.fx-fun .lg-item:hover > .dash-panel, html.fx-fun .lg-item:hover > .card, html.fx-fun .wid-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 45%, transparent), 0 2px 8px rgba(0, 0, 0, 0.08);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
html.fx-subtle .lg-item:hover > .dash-panel, html.fx-subtle .lg-item:hover > .card { box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.25); }

/* Primary buttons shine when you point at them */
html.fx-fun .btn-primary { position: relative; overflow: hidden; }
html.fx-fun .btn-primary::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-20deg);
}
html.fx-fun .btn-primary:hover::after { animation: fxShine 0.7s var(--ease); }
@keyframes fxShine { to { left: 130%; } }

/* Tabs: the active one glows */
html.fx-fun .dash-tab.active { text-shadow: 0 0 14px color-mix(in srgb, var(--dash-color, var(--accent)) 60%, transparent); }
html.fx-fun .dash-tab { transition: color 0.2s, transform 0.2s var(--ease); }
html.fx-fun .dash-tab:hover { transform: translateY(-1px); }

/* Sidebar items slide a little */
html.fx-fun .sidebar a, html.fx-fun .sidebar button { transition: background var(--dur), transform 0.18s var(--ease); }
html.fx-fun .sidebar a:hover { transform: translateX(3px); }

/* Toasts bounce in */
@keyframes fxToast { 0% { opacity: 0; transform: translateY(24px) scale(0.9); } 65% { opacity: 1; transform: translateY(-4px) scale(1.02); } 100% { transform: none; } }
html.fx-fun .toast { animation: fxToast 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.2) both; }

/* The big show shakes the screen a tiny bit */
@keyframes fxShake { 0%, 100% { transform: none; } 20% { transform: translate(2px, -1px); } 40% { transform: translate(-2px, 1px); } 60% { transform: translate(1px, 2px); } 80% { transform: translate(-1px, -2px); } }
html.fx-shake #app { animation: fxShake 0.35s linear 2; }

/* ---------- MIDI Center moves with the music ---------- */
@keyframes fxBeat { 0% { transform: translateY(-2px) scale(1); } 30% { transform: translateY(-4px) scale(1.05); } 100% { transform: translateY(-2px) scale(1); } }
html.fx-fun .midi-chord.now { animation: fxBeat 0.4s var(--ease); box-shadow: 0 10px 26px -10px var(--c-chords); }
html.fx-fun .mdrum-cell.now.v2, html.fx-fun .mdrum-cell.now.v3 { transform: scale(1.18); box-shadow: 0 0 12px var(--c-drums); }
html.fx-fun .midi-play.on { box-shadow: 0 0 0 0 var(--danger); animation: fxPulse 1.2s infinite; }
@keyframes fxPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 60%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }

/* Logo wiggles when pointed at (psst: click it 5 times) */
html.fx-fun .sb-brand-mark { transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.25, 1.4); }
html.fx-fun .sb-brand:hover .sb-brand-mark { transform: rotate(-12deg) scale(1.12); }

/* Settings: effects row */
.fx-try { margin: 0; }