/* Brain Quest — icon FX scaffold (UNWIRED, art-independent).
 * The theme-accent rim-light glow + the six earn animations.
 * Non-negotiable: icon art ships NEUTRAL (gold/beige/grey). The themed
 * accent lives HERE in code, applied as a glow/rim-light over the art.
 * Drives off the same vars applyTheme() already sets on :root —
 * --accent, --accent-2, --glow. Drop onto <img class="ifx"> when art lands;
 * emoji placeholders work today for testing.
 */

/* Base icon cell. Keep art on transparent; this owns sizing + the accent. */
.ifx {
  display: inline-grid;
  place-items: center;
  line-height: 1;
  will-change: transform, filter;
  -webkit-user-select: none;
  user-select: none;
}
.ifx > svg, .ifx > img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---- Theme-accent rim-light glow (the "code owns the accent" layer) ---- */
/* Static active state: a neutral icon picks up the current theme accent. */
.ifx--glow {
  filter:
    drop-shadow(0 0 4px var(--glow))
    drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 70%, transparent));
}
/* Rich-tier reward icons get a warmer, slightly stronger bloom. */
.ifx--rich.ifx--glow {
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.35))
    drop-shadow(0 0 6px var(--glow))
    drop-shadow(0 0 16px color-mix(in srgb, var(--accent-2) 75%, transparent));
}
/* Quiet-tier never blooms — it should recede. */
.ifx--quiet { filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); opacity: .92; }

/* Gentle idle breathing for an active/equipped icon (optional). */
.ifx--pulse { filter: drop-shadow(0 0 8px var(--glow)); }
@keyframes ifx-pulse {
  50% { filter:
    drop-shadow(0 0 7px var(--glow))
    drop-shadow(0 0 20px color-mix(in srgb, var(--accent) 80%, transparent)); }
}

/* Honour reduced-motion: glow stays, motion stops. */
@media (prefers-reduced-motion: reduce) {
  .ifx--pulse,
  .fx-coin-clink, .fx-badge-mint, .fx-streak-grow,
  .fx-chest-burst, .fx-level-up, .fx-xp-pop { animation: none !important; }
}

/* ============================ THE SIX EARN ANIMATIONS ============================ */
/* Each is fire-and-forget: iconFx adds the class, removes it on animationend.    */

/* 1. Coin clink — coin flips, catches a glint, settles with a bounce. */
.fx-coin-clink { animation: fx-coin-clink .62s cubic-bezier(.34,1.56,.64,1) both; transform-style: preserve-3d; }
@keyframes fx-coin-clink {
  0%   { transform: translateY(0) rotateY(0) scale(1); }
  35%  { transform: translateY(-26%) rotateY(180deg) scale(1.18); filter: brightness(1.5); }
  70%  { transform: translateY(0) rotateY(360deg) scale(.96); }
  85%  { transform: translateY(-6%) scale(1.04); }
  100% { transform: translateY(0) rotateY(360deg) scale(1); }
}

/* 2. Badge mint — locked ghost → minted gold. Pair with a crossfade of the
 *    two art states; this drives the pop + gold flash + ring. */
.fx-badge-mint { animation: fx-badge-mint .8s ease-out both; position: relative; }
@keyframes fx-badge-mint {
  0%   { transform: scale(.6) rotate(-12deg); filter: grayscale(1) brightness(.7); }
  45%  { transform: scale(1.22) rotate(4deg);  filter: grayscale(0) brightness(1.6) saturate(1.4); }
  70%  { transform: scale(.95) rotate(-2deg);  filter: brightness(1.1); }
  100% { transform: scale(1) rotate(0);        filter: none; }
}
.fx-badge-mint::after {
  content: ""; position: absolute; inset: -10%;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--accent-2) 80%, #fff);
  animation: fx-ring .8s ease-out both; pointer-events: none;
}
@keyframes fx-ring {
  0%   { transform: scale(.4); opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* 3. Streak grow — flame swells with the streak count, hotter at the peak. */
.fx-streak-grow { animation: fx-streak-grow .55s cubic-bezier(.34,1.56,.64,1) both; transform-origin: 50% 85%; }
@keyframes fx-streak-grow {
  0%   { transform: scaleY(1) scaleX(1); filter: none; }
  40%  { transform: scaleY(1.35) scaleX(1.12); filter: brightness(1.5) saturate(1.3); }
  100% { transform: scaleY(1) scaleX(1); }
}

/* 4. Chest burst — wiggle, then snap open with a light bloom. */
.fx-chest-burst { animation: fx-chest-burst .9s ease-out both; transform-origin: 50% 90%; }
@keyframes fx-chest-burst {
  0%   { transform: rotate(0) scale(1); }
  15%  { transform: rotate(-6deg) scale(1.02); }
  30%  { transform: rotate(6deg) scale(1.02); }
  45%  { transform: rotate(-4deg) scale(1.04); }
  60%  { transform: rotate(0) scale(1.28); filter: brightness(1.7); }
  100% { transform: rotate(0) scale(1); filter: none; }
}

/* 5. Level-up — rise, bloom, settle. The big one. */
.fx-level-up { animation: fx-level-up 1s cubic-bezier(.22,1,.36,1) both; position: relative; }
@keyframes fx-level-up {
  0%   { transform: translateY(8%) scale(.8); filter: brightness(.9); }
  40%  { transform: translateY(-12%) scale(1.3); filter: brightness(1.8) drop-shadow(0 0 22px var(--glow)); }
  70%  { transform: translateY(0) scale(.97); }
  100% { transform: translateY(0) scale(1); filter: none; }
}
.fx-level-up::after {
  content: ""; position: absolute; inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 65%);
  animation: fx-bloom 1s ease-out both; pointer-events: none;
}
@keyframes fx-bloom {
  0%   { transform: scale(.3); opacity: .8; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* 6. XP pop — quick tick on the icon; pair with a floating "+N XP" label. */
.fx-xp-pop { animation: fx-xp-pop .45s ease-out both; }
@keyframes fx-xp-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); filter: brightness(1.5); }
  100% { transform: scale(1); }
}
/* The floating label iconFx.xpPop() spawns. */
.fx-xp-float {
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  font-family: var(--font-display, inherit);
  font-weight: 800; color: var(--accent-2);
  text-shadow: 0 2px 8px var(--glow);
  pointer-events: none; white-space: nowrap;
  animation: fx-xp-float .9s ease-out both;
}
@keyframes fx-xp-float {
  0%   { transform: translate(-50%, 0) scale(.8); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translate(-50%, -160%) scale(1.1); opacity: 0; }
}