/* juice.css — visual primitives for the bouncy/bright/particle-y
   "juice" feedback widgets.  Five widgets (bar, beads, stat, ring,
   badge) plus the supporting confetti / stat-particle stylings.  Pair
   with juice.js for behaviour.

   This module was extracted from the Juice Lab in /internal/tools/therapy
   so the patient progress page and any future game UI can pull the
   same look-and-feel without reinventing it. */

/* Common cursor + focus styling for the interactive items. */
[data-juice] {
  cursor: pointer;
  user-select: none;
  outline: none;
}
[data-juice].readonly {
  cursor: default;
}
[data-juice]:focus-visible {
  outline: 2px solid var(--cyan, #5DD4F5);
  outline-offset: 4px;
  border-radius: 0.4rem;
}

/* ──────── 1. Linear progress bar ──────── */
.juice-bar {
  height: 18px;
  border-radius: 999px;
  background: rgba(157, 63, 245, 0.12);
  border: 1px solid rgba(157, 63, 245, 0.25);
  overflow: hidden;
  position: relative;
}
.juice-bar .juice-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #5DD4F5 0%, #9D3FF5 50%, #FF6B9D 100%);
  box-shadow: 0 0 12px rgba(157, 63, 245, 0.5);
  transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.juice-bar.full .juice-bar-fill {
  animation: juice-pulse-glow 1.6s ease-in-out infinite;
}
@keyframes juice-pulse-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(157, 63, 245, 0.5); }
  50%      { box-shadow: 0 0 28px rgba(255, 107, 157, 0.8); }
}
/* One-shot throb fired on every advance (re-applied via reflow so it
   can replay back-to-back). */
.juice-bar.throbbing {
  animation: juice-bar-throb 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes juice-bar-throb {
  0%   { transform: scaleY(1);    box-shadow: 0 0 0 transparent; }
  40%  { transform: scaleY(1.7);  box-shadow: 0 0 24px rgba(255, 107, 157, 0.85); }
  100% { transform: scaleY(1);    box-shadow: 0 0 0 transparent; }
}

/* ──────── 2. Bubble beads ──────── */
.juice-beads {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}
.juice-beads .bead {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(157, 63, 245, 0.08);
  border: 2px solid rgba(157, 63, 245, 0.3);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.3s ease,
              box-shadow 0.3s ease;
  position: relative;
}
.juice-beads .bead.done {
  background: radial-gradient(circle at 30% 30%, #B25EFF 0%, #9D3FF5 50%, #5C68DC 100%);
  border-color: #5C2BC4;
  box-shadow: 0 2px 8px rgba(124, 63, 229, 0.5),
              inset 0 -2px 4px rgba(60, 30, 120, 0.3);
  animation: juice-bead-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.juice-beads .bead.done::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 5px;
  width: 7px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  filter: blur(0.4px);
}
/* Peak scales are CSS variables so callers can climb them as beads
   fill — early bumps are gentler, later ones slam more. */
@keyframes juice-bead-pop {
  0%   { transform: scale(0.7); }
  60%  { transform: scale(var(--juice-pop-scale, 1.35)); }
  100% { transform: scale(1); }
}
.juice-beads .bead.bumping {
  animation: juice-bead-bump 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes juice-bead-bump {
  0%   { transform: scale(1); }
  45%  { transform: scale(var(--juice-bump-scale, 1.18)); }
  100% { transform: scale(1); }
}

/* ──────── 3. Stat number ──────── */
.juice-stat {
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  color: var(--cyan-light, #B7EBFF);
  text-align: center;
  padding: 0.5rem 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.3s ease;
  position: relative;
  /* Sit above the stat-particle puff so the digits stay crisp against
     the soft erupting blobs behind. */
  z-index: 2;
}
.juice-stat.bumping {
  animation: juice-stat-bump 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: #FF6B9D;
}
@keyframes juice-stat-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.juice-stat .stat-ghost {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  pointer-events: none;
  color: rgba(255, 107, 157, 0.65);
  font-size: 1.3rem;
  animation: juice-stat-ghost 0.9s ease-out forwards;
}
@keyframes juice-stat-ghost {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.9; }
  100% { transform: translate(0, -40px) scale(0.8); opacity: 0; }
}

/* ──────── 4. Streak ring ──────── */
.juice-ring {
  width: 110px;
  height: 110px;
  margin: 0 auto;
  display: block;
}
.juice-ring .ring-bg {
  fill: none;
  stroke: rgba(157, 63, 245, 0.18);
  stroke-width: 10;
}
.juice-ring .ring-fg {
  fill: none;
  stroke: url(#juiceRingGradient);
  stroke-width: 10;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.juice-ring .ring-text {
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  fill: var(--cyan-light, #B7EBFF);
  text-anchor: middle;
  dominant-baseline: middle;
  transition: fill 0.3s ease;
}
.juice-ring.full .ring-text {
  fill: #FFC847;
}
.juice-ring.full .ring-fg {
  animation: juice-ring-pulse 1.4s ease-in-out infinite;
}
@keyframes juice-ring-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50%      { filter: drop-shadow(0 0 8px rgba(255, 200, 71, 0.85)); }
}
.juice-ring .ring-icon {
  transform-origin: 50% 50%;
  transform-box: fill-box;
}
.juice-ring.bumping .ring-icon {
  animation: juice-icon-wobble 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes juice-icon-wobble {
  0%   { transform: scale(1) rotate(0); }
  40%  { transform: scale(1.25) rotate(-12deg); }
  70%  { transform: scale(1.1)  rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ──────── 5. Achievement badge ──────── */
.juice-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.juice-badge .badge-disc {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2rem;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.4s ease,
              box-shadow 0.4s ease,
              filter 0.4s ease;
  background: rgba(255, 255, 255, 0.06);
  border: 2px dashed rgba(255, 255, 255, 0.18);
  filter: grayscale(1);
  color: rgba(255, 255, 255, 0.45);
}
.juice-badge.full .badge-disc {
  filter: grayscale(0);
  background: radial-gradient(circle at 30% 30%, #FFE082, #FFC847 60%, #B85A2E 100%);
  border: 2px solid #B85A2E;
  color: white;
  box-shadow: 0 0 24px rgba(255, 200, 71, 0.6);
  animation: juice-badge-unlock 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes juice-badge-unlock {
  0%   { transform: rotate(-180deg) scale(0.4); }
  60%  { transform: rotate(15deg)   scale(1.2); }
  100% { transform: rotate(0)       scale(1); }
}
.juice-badge .badge-meter {
  width: 100%;
  max-width: 110px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.juice-badge .badge-meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #FFE082, #FFC847, #FF6B9D);
  transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ──────── Confetti particles ──────── */
.juice-confetti {
  position: fixed;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 1000;
  will-change: transform, opacity;
}
.juice-confetti.small {
  width: 5px;
  height: 8px;
  border-radius: 1.5px;
}
/* Stat particles — chunky, soft, blurred blobs erupting from behind a
   stat number on each increment. */
.juice-stat-particle {
  position: fixed;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
  filter: blur(2.5px);
  mix-blend-mode: screen;
}