/* ═══════════════════════════════════════════════════════════════════
   intake-micro.css — Micro-engagement animations for the intake form (v2)
   Derived from docs/micro_engagement_form_animations_v_2.html (FormJoy v2),
   restyled to the intake.css palette. (Sound is synthesized in intake-micro.js
   via the Web Audio API — no audio assets here.) Inert unless intake-micro.js
   adds the .is-answered / mj-* elements.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --mj-primary: var(--blue, #3b82f6);
  --mj-primary-soft: var(--blue-light, #eff6ff);
  --mj-accent: #f59e0b;
  --mj-success: var(--green, #22c55e);
  --mj-p1: var(--blue, #3b82f6);
  --mj-p2: var(--green, #22c55e);
  --mj-p3: #f59e0b;
  --mj-p4: #ec4899;
  --mj-p5: #06b6d4;
  --mj-p6: #f97316;
}

.intake-question { transition: border-color 180ms ease, box-shadow 180ms ease; }

.intake-question.is-answered {
  position: relative;
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mj-success) 32%, transparent),
              0 10px 30px color-mix(in srgb, var(--mj-success) 10%, transparent);
}

.mj-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  /* Sit ABOVE form content (celebrate the answered field) but BELOW the sticky
     header and fixed bottom nav (both z-index:100 in intake.css) so confetti /
     pop / sparkles never visually cover the persistent chrome or the Submit
     button. The layer is a fixed-position stacking context, so the particles'
     own z-index (9999/10000) only order them relative to each other inside it. */
  z-index: 90;
}

/* Control "press" pulse on the answered element */
.mj-press { animation: mjControlPress 420ms cubic-bezier(.16, 1, .3, 1); }

/* Elastic glass pop bubble — offset so it never blocks the answer */
.mj-pop {
  position: fixed;
  transform: translate(-18%, -92%) scale(.42);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--mj-primary);
  background:
    radial-gradient(circle at 26% 22%, rgba(255,255,255,.92) 0 13%, transparent 14% 26%),
    radial-gradient(circle at 72% 76%, color-mix(in srgb, var(--mj-accent) 34%, transparent) 0 18%, transparent 19% 100%),
    color-mix(in srgb, var(--mj-primary-soft) 68%, transparent);
  border: 1px solid color-mix(in srgb, var(--mj-primary) 22%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--mj-primary) 16%, transparent);
  opacity: .92;
  animation: mjPopElastic 760ms cubic-bezier(.16, 1, .3, 1) forwards;
  z-index: 10000;
}

.mj-pop::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  border: 1.5px solid color-mix(in srgb, var(--mj-primary) 22%, transparent);
  animation: mjPopHalo 760ms ease-out forwards;
}

.mj-pop svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; fill: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.10)); }

/* Confetti cannon — angular outlined rectangles that arc and fall */
.mj-confetti {
  position: fixed;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border-radius: 2px;
  background: color-mix(in srgb, var(--color) 50%, transparent);
  border: 1px solid var(--color);
  transform: translate(-50%, -50%) rotate(var(--start-rot));
  animation: mjConfettiCannon var(--duration) cubic-bezier(.12,.78,.32,1) forwards;
  z-index: 9999;
}

/* Generic round particles (rings accent) */
.mj-particle {
  position: fixed;
  width: var(--size, 10px);
  height: var(--size, 10px);
  left: var(--x);
  top: var(--y);
  border-radius: 999px;
  background: var(--color);
  transform: translate(-50%, -50%);
  animation: mjParticle var(--duration, 840ms) cubic-bezier(.18,.74,.26,1) forwards;
  z-index: 9999;
}

/* Sparkle trail — star SVGs that float up and twinkle */
.mj-sparkle {
  position: fixed;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  color: var(--color);
  transform: translate(-50%, -50%) scale(.2) rotate(var(--start-rot));
  animation: mjSparkleFloat var(--duration) cubic-bezier(.18,.82,.22,1) forwards;
  z-index: 10000;
  filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--mj-accent) 32%, transparent));
}

.mj-sparkle svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; fill: none; }

.mj-ray {
  position: fixed;
  left: var(--x);
  top: var(--y);
  width: 2px;
  height: var(--length);
  border-radius: 999px;
  background: var(--color);
  transform-origin: center bottom;
  transform: translate(-50%, -100%) rotate(var(--angle)) scaleY(.2);
  animation: mjSparkleRay 560ms ease-out forwards;
  z-index: 9998;
}

.mj-ring {
  position: fixed;
  left: var(--x);
  top: var(--y);
  width: 20px;
  height: 20px;
  border: 3px solid var(--color);
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(.2);
  animation: mjRing 660ms ease-out forwards;
  z-index: 9999;
}

.mj-checkmark {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--mj-success);
  transform: scale(.2) rotate(-25deg);
  opacity: 0;
  animation: mjCheck 600ms cubic-bezier(.2,1.4,.35,1) forwards;
  z-index: 2;
}

.mj-checkmark svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; }

.mj-shimmer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-lg, 12px);
  pointer-events: none;
}

.mj-shimmer::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -60%;
  width: 40%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: mjShimmer 760ms ease forwards;
}

/* Patient on/off toggle in the intake header */
.intake-anim-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
  padding: 6px 12px;
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 999px;
  background: var(--white, #fff);
  color: var(--gray-600, #4b5563);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.intake-anim-toggle.is-on {
  border-color: color-mix(in srgb, var(--mj-primary) 45%, var(--gray-300, #d1d5db));
  background: var(--mj-primary-soft);
  color: var(--mj-primary);
}

.intake-anim-toggle i { font-size: 15px; line-height: 1; }

@keyframes mjControlPress {
  0% { transform: scale(1); }
  34% { transform: scale(.96); }
  72% { transform: scale(1.045); }
  100% { transform: scale(1); }
}

@keyframes mjPopElastic {
  0% { transform: translate(-18%, -92%) scale(.32) rotate(-10deg); opacity: 0; }
  18% { opacity: .94; }
  42% { transform: translate(4%, -128%) scale(1.06) rotate(7deg); }
  64% { transform: translate(-4%, -138%) scale(.88) rotate(-3deg); }
  82% { transform: translate(2%, -146%) scale(.96) rotate(1deg); opacity: .88; }
  100% { transform: translate(18%, -168%) scale(.58) rotate(0deg); opacity: 0; }
}

@keyframes mjPopHalo {
  0% { transform: scale(.4); opacity: .42; }
  68% { transform: scale(1.55); opacity: .14; }
  100% { transform: scale(1.9); opacity: 0; }
}

@keyframes mjConfettiCannon {
  0% { transform: translate(-50%, -50%) rotate(var(--start-rot)) scale(.65); opacity: 1; }
  42% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy-up))) rotate(var(--mid-rot)) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx-end)), calc(-50% + var(--dy-down))) rotate(var(--end-rot)) scale(.82); opacity: 0; }
}

@keyframes mjSparkleFloat {
  0% { transform: translate(-50%, -50%) scale(.15) rotate(var(--start-rot)); opacity: 0; }
  16% { opacity: 1; }
  42% { transform: translate(calc(-50% + var(--dx-a)), calc(-50% + var(--dy-a))) scale(1.18) rotate(var(--mid-rot)); }
  68% { transform: translate(calc(-50% + var(--dx-b)), calc(-50% + var(--dy-b))) scale(.78) rotate(var(--end-rot)); opacity: .92; }
  100% { transform: translate(calc(-50% + var(--dx-c)), calc(-50% + var(--dy-c))) scale(.05) rotate(var(--end-rot)); opacity: 0; }
}

@keyframes mjSparkleRay {
  0% { transform: translate(-50%, -100%) rotate(var(--angle)) scaleY(.1); opacity: 0; }
  24% { opacity: .92; }
  100% { transform: translate(-50%, -100%) rotate(var(--angle)) scaleY(1.65); opacity: 0; }
}

@keyframes mjParticle {
  0% { transform: translate(-50%, -50%) scale(.35) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0) rotate(var(--rot)); opacity: 0; }
}

@keyframes mjRing {
  0% { transform: translate(-50%, -50%) scale(.2); opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

@keyframes mjCheck {
  0% { transform: scale(.2) rotate(-25deg); opacity: 0; }
  50% { opacity: 1; transform: scale(1.16) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes mjShimmer {
  0% { left: -60%; }
  100% { left: 125%; }
}

@media (prefers-reduced-motion: reduce) {
  .mj-press, .mj-pop, .mj-pop::before, .mj-confetti, .mj-particle,
  .mj-sparkle, .mj-ray, .mj-ring, .mj-checkmark, .mj-shimmer::after {
    animation-duration: 1ms !important;
  }
}