/* Jijil shared tokens + reaction stage styles */
:root {
  --rasp: #D7195B; --rasp-deep: #B0104A; --plum: #2A0E2E; --plum-2: #4A1F4E;
  --foil: #F6C945; --foil-hi: #FFE88F; --foil-lo: #D9A21E;
  --pist: #2BB673; --pist-lo: #1E8F59; --cream: #FFF1DC; --cream-2: #FBE2C0;
  --chili: #F0441C; --mint: #27C1B5; --tongue: #FF6F91;
  --display: 'Shrikhand', 'Bricolage Grotesque', serif;
  --text: 'Bricolage Grotesque', system-ui, sans-serif;
  --hy: 'Noto Sans Armenian', 'Bricolage Grotesque', sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
}
::selection { background: var(--foil); color: var(--plum); }

/* foil: crinkled stripes */
.foil {
  background:
    repeating-linear-gradient(104deg, transparent 0 9px, rgba(255,255,255,.35) 9px 12px, transparent 12px 27px),
    repeating-linear-gradient(96deg, var(--foil) 0 16px, var(--foil-hi) 16px 24px, var(--foil-lo) 24px 38px, var(--foil) 38px 52px);
}

/* reaction stage */
.rx-stage { position: relative; overflow: hidden; display: grid; place-items: center; isolation: isolate; }
.rx-char { width: 46%; aspect-ratio: 280 / 300; will-change: transform; transform-origin: 50% 60%; }
.rx-char svg { width: 100%; height: 100%; overflow: visible; display: block; }
.rx-char .steam { transition: opacity .15s; }
.rx-flood {
  position: absolute; left: -10%; right: -10%; bottom: 0; height: 0; opacity: 0; z-index: -1;
  background: var(--mint);
  border-radius: 46% 54% 0 0 / 22px 22px 0 0;
  box-shadow: inset 0 14px 0 rgba(255,255,255,.35);
  transition: height .12s linear;
  animation: rx-wave 1.6s ease-in-out infinite alternate;
}
@keyframes rx-wave { to { border-radius: 54% 46% 0 0 / 30px 18px 0 0; } }
.rx-burst { position: absolute; inset: 50% auto auto 50%; z-index: 3; }
.rx-bit {
  position: absolute; width: 18px; height: 18px; margin: -9px; border-radius: 50%; font-style: normal;
  display: grid; place-items: center; font-size: 22px; line-height: 1; color: var(--foil);
  animation: rx-fly .85s var(--ease-out) forwards;
}
.rx-bit.rx-rage { background: var(--chili); border: 3px solid var(--plum); }
.rx-bit.rx-cry { background: var(--mint); border: 3px solid var(--plum); border-radius: 50% 50% 50% 0; }
.rx-bit.rx-love, .rx-bit:has(svg) { width: auto; height: auto; background: none; border: 0; }
@keyframes rx-fly { from { transform: translate(0,0) scale(.4); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1.1); opacity: 0; } }
.rx-peak {
  position: absolute; left: 50%; top: 14%; z-index: 4; white-space: nowrap;
  font-family: var(--display); font-size: clamp(22px, 7cqi, 44px); color: var(--cream);
  -webkit-text-stroke: 2px var(--plum); paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--plum);
  transform: translate(-50%, 10px) rotate(-6deg) scale(.4); opacity: 0;
  transition: transform .3s var(--pop), opacity .15s;
}
.rx-peak.on { opacity: 1; transform: translate(-50%, 0) rotate(-6deg) scale(1); }
.rx-stage.popped .rx-char { animation: rx-jolt .25s; }
@keyframes rx-jolt { 50% { filter: brightness(1.4); } }

@media (prefers-reduced-motion: reduce) {
  .rx-flood { animation: none; }
  .rx-peak { transition: opacity .2s; }
}