/* ============================================================================
 * effects.css — Legacy Companion polish layer (purely additive).
 *
 * Tasteful, GPU-cheap micro-interactions, view transitions, an ambient
 * background and a toast system. Everything degrades gracefully and is fully
 * disabled under `prefers-reduced-motion: reduce`. No existing rule is
 * overridden destructively — these only add on top of styles.css.
 * ========================================================================== */

/* ---------- 1. Ambient animated background -------------------------------- */
/* A single fixed layer behind everything: very faint, slow-drifting gold/blue
   radial glows. Pure transform/opacity animation = cheap on the GPU. */
#fx-ambient {
  position: fixed;
  inset: -20%;
  z-index: -1;            /* behind the app, in front of body bg */
  pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(420px 420px at 20% 30%, rgba(200,164,90,0.07), transparent 70%),
    radial-gradient(520px 520px at 80% 70%, rgba(91,143,214,0.06), transparent 70%),
    radial-gradient(360px 360px at 60% 15%, rgba(231,200,132,0.05), transparent 70%);
  animation: fx-drift 38s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes fx-drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.02); }
  50%  { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(-1%, 2%, 0) scale(1.03); }
}

/* Slow-drifting ember particles, generated and positioned by effects.js. */
#fx-embers {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.fx-ember {
  position: absolute;
  bottom: -12px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-2, #e7c884), rgba(200,164,90,0));
  opacity: 0;
  will-change: transform, opacity;
  animation: fx-rise linear infinite;
}
@keyframes fx-rise {
  0%   { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  12%  { opacity: 0.7; }
  85%  { opacity: 0.5; }
  100% { transform: translate3d(var(--fx-drift, 14px), -102vh, 0) scale(1); opacity: 0; }
}

/* ---------- 2. View transition -------------------------------------------- */
/* When effects.js detects #view content has changed it adds this class for one
   animation cycle. Fade + gentle upward slide. */
.fx-view-enter {
  animation: fx-view-in 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes fx-view-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 3. Micro-interactions ----------------------------------------- */
/* Subtle hover lift on cards & chips. We only add transform + shadow; the
   existing border-color transition in styles.css keeps working. */
.card {
  transition: border-color .15s, transform .15s ease, box-shadow .15s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}
.chip {
  transition: border-color .15s, transform .12s ease, background .15s;
}
.chip:hover { transform: translateY(-1px); }
.chip:active { transform: translateY(0) scale(0.97); }

/* Button press feedback (ghost buttons lack it in styles.css). */
.btn-ghost:active { transform: translateY(1px); }
.tab:active { transform: translateY(1px); }

/* Slightly richer focus glow on top of the existing one. */
input:focus, select:focus, textarea:focus {
  transition: border-color .15s, box-shadow .2s ease;
}

/* Clickable table rows get a faint nudge on hover (additive to styles.css). */
.tbl tbody tr[data-id] { transition: background .12s, transform .12s ease; }
.tbl tbody tr[data-id]:hover { transform: translateX(2px); }

/* ---------- 4. Count-up: nothing needed in CSS (JS animates text) --------- */

/* ---------- 5. Toasts ----------------------------------------------------- */
#fx-toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 36px));
}
.fx-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--text, #e6e8ef);
  background: linear-gradient(180deg, var(--panel, #1a1d29), var(--bg-2, #14161f));
  border: 1px solid var(--border-2, #3a4155);
  border-left: 3px solid var(--gold, #c8a45a);
  box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,0.45));
  animation: fx-toast-in 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.fx-toast.fx-out { animation: fx-toast-out 0.28s ease forwards; }
.fx-toast .fx-toast-ico { font-size: 15px; line-height: 1; flex: none; }
.fx-toast.success { border-left-color: var(--green, #6fbf73); }
.fx-toast.error   { border-left-color: var(--red, #c75450); }
.fx-toast.info    { border-left-color: var(--blue, #5b8fd6); }
@keyframes fx-toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fx-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(24px); }
}

/* ---------- 6. Reduced motion: disable all heavy animation ---------------- */
@media (prefers-reduced-motion: reduce) {
  #fx-ambient { animation: none; }
  #fx-embers { display: none; }
  .fx-view-enter { animation: none; }
  .card:hover, .chip:hover, .chip:active,
  .tbl tbody tr[data-id]:hover { transform: none; }
  .fx-toast, .fx-toast.fx-out { animation: none; }
}