/* ================================================
   CaseBuddy shared motion kit.
   Self-contained: token fallbacks included so
   standalone pages can link this file alone.
   Pair with lib/cb-motion.js for JS helpers.
   ================================================ */
:root {
    --cbm-spring: var(--spring, cubic-bezier(0.16, 1, 0.3, 1));
    --cbm-overshoot: var(--overshoot, cubic-bezier(0.34, 1.56, 0.64, 1));
    --cbm-fast: var(--dur-fast, 150ms);
    --cbm-base: var(--dur-base, 250ms);
    --cbm-slow: var(--dur-slow, 400ms);
    --cbm-gold: var(--accent, #C9A84C);
    --cbm-navy: var(--primary, #0E2535);
    --cbm-success: var(--success, #1A7A3A);
    --cbm-danger: var(--danger, #C41E24);
}

/* ---- one-shot feedback ---- */
@keyframes cbmPop { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes cbmShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
.cbm-pop { animation: cbmPop 0.35s var(--cbm-spring); }
.cbm-shake { animation: cbmShake 0.4s ease; }
@keyframes cbmBump { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
.cbm-bump { animation: cbmBump 0.45s var(--cbm-overshoot); }
@keyframes cbmHeartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.cbm-heartbeat { animation: cbmHeartbeat 1s ease-in-out infinite; }

/* ---- entrances ---- */
@keyframes cbmRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cbm-rise { animation: cbmRise var(--cbm-slow) var(--cbm-spring) both; }
.cbm-stagger > * { animation: cbmRise var(--cbm-slow) var(--cbm-spring) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes cbmFoldIn {
    0% { opacity: 0; transform: perspective(700px) rotateX(-35deg) translateY(-8px); }
    100% { opacity: 1; transform: none; }
}
.cbm-fold > * { transform-origin: top center; animation: cbmFoldIn 0.5s var(--cbm-spring) both; animation-delay: calc(var(--i, 0) * 70ms); }

/* ---- accordion (grid-rows trick, animates open AND closed) ---- */
.cbm-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--cbm-slow) var(--cbm-spring); }
.cbm-acc-body > * { overflow: hidden; min-height: 0; }
.cbm-acc.open > .cbm-acc-body { grid-template-rows: 1fr; }
.cbm-acc-item { opacity: 0; transform: translateY(-6px); transition: opacity var(--cbm-base) ease, transform var(--cbm-base) var(--cbm-spring); transition-delay: 0ms; }
.cbm-acc.open .cbm-acc-item { opacity: 1; transform: none; transition-delay: calc(80ms + var(--i, 0) * 60ms); }

/* ---- completion tick (pop + stroke draw + ring pulse) ---- */
.cbm-tick { position: relative; display: inline-flex; }
.cbm-tick .cbm-tick-circle { border-radius: 50%; background: var(--cbm-navy); display: flex; align-items: center; justify-content: center; }
.cbm-tick svg path { stroke: var(--cbm-gold); fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 34; stroke-dashoffset: 34; }
.cbm-tick.go .cbm-tick-circle { animation: cbmTickPop 0.5s var(--cbm-overshoot); }
.cbm-tick.go svg path { animation: cbmTickDraw 0.4s ease-out 0.18s forwards; }
.cbm-tick.go::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--cbm-gold); opacity: 0; animation: cbmRingPulse 0.8s ease-out 0.1s; }
@keyframes cbmTickPop { 0% { transform: scale(0.4); } 65% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes cbmTickDraw { to { stroke-dashoffset: 0; } }
@keyframes cbmRingPulse { 0% { transform: scale(0.8); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }

/* ---- gold burst (particles injected by CBMotion.burst) ---- */
.cbm-spark { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--cbm-gold); pointer-events: none; opacity: 0; animation: cbmSparkFly 0.7s ease-out forwards; }
@keyframes cbmSparkFly {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3); opacity: 0; }
}

/* ---- spinner ---- */
@keyframes cbmSpin { to { transform: rotate(360deg); } }
.cbm-spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cbmSpin 0.7s linear infinite; vertical-align: -0.15em; }

/* ---- toast ---- */
.cbm-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(16px);
    background: var(--cbm-navy); color: #fff; font: 500 14px/1.4 var(--sans, -apple-system, sans-serif);
    padding: 11px 20px; border-radius: 10px; box-shadow: 0 8px 32px rgba(5, 28, 44, 0.25);
    opacity: 0; transition: opacity var(--cbm-base) ease, transform var(--cbm-base) var(--cbm-spring);
    z-index: 9999; display: flex; align-items: center; gap: 9px; max-width: min(92vw, 420px);
}
.cbm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.cbm-toast svg { width: 15px; height: 15px; flex-shrink: 0; }
.cbm-toast.success svg { color: #7FC98F; }
.cbm-toast.error svg { color: #E88; }

/* ---- error message reveal (replaces display:none snaps) ---- */
.cbm-err-anim { animation: cbmRise var(--cbm-base) var(--cbm-spring), cbmShake 0.4s ease 0.1s; }

/* ---- tap feedback ---- */
.cbm-tap { transition: transform var(--cbm-fast) ease; }
.cbm-tap:active { transform: scale(0.97); }

/* ---- crossfade swap (skeleton to content, state screens) ---- */
.cbm-fade-swap { animation: cbmRise var(--cbm-base) var(--cbm-spring) both; }

/* ---- bottom sheet (mobile modal presentation, opt-in) ----------------
   Add .cbm-sheet to a modal's dialog box. At <=640px the box anchors to
   the bottom of the viewport, full width, top corners rounded - the same
   slide-up sheet proven by the community partner modal (platform.css
   .community-partner-modal-sheet). Each modal keeps its own enter/exit
   hook (an `animation` class already toggled by its close-token JS, or a
   `transition` + state class); pair `.cbm-sheet` with that hook's own
   selector in the modal's own stylesheet to swap in cbmSheetUp/
   cbmSheetDown for the transform. Desktop (>640px) is untouched - this
   block only takes effect inside the media query below. ---------------- */
@keyframes cbmSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes cbmSheetDown { from { transform: translateY(0); } to { transform: translateY(100%); } }
@media (max-width: 640px) {
    .cbm-sheet {
        position: fixed !important;
        top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100% !important; max-width: 100% !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 88vh; max-height: 88dvh;
    }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    /* Neutralize the shared keyframes themselves, not just the kit's own
       classes - several standalone pages apply cbm* keyframes directly to
       their own selectors (quiz timers, choice buttons, etc.) with no local
       reduced-motion guard, so this is the only place that reaches them.
       cbmSpin is deliberately excluded: spinners must keep spinning under
       reduced motion or loading states look frozen. Sheet keyframes stay
       empty (not removed) so animationend still fires for the close-token
       machinery that waits on it. */
    @keyframes cbmPop {} @keyframes cbmShake {} @keyframes cbmBump {} @keyframes cbmHeartbeat {} @keyframes cbmRise {} @keyframes cbmFoldIn {} @keyframes cbmTickPop {} @keyframes cbmTickDraw {} @keyframes cbmRingPulse {} @keyframes cbmSparkFly {} @keyframes cbmSheetUp {} @keyframes cbmSheetDown {}

    .cbm-pop, .cbm-shake, .cbm-bump, .cbm-heartbeat, .cbm-rise, .cbm-err-anim,
    .cbm-stagger > *, .cbm-fold > *, .cbm-fade-swap,
    .cbm-tick.go .cbm-tick-circle, .cbm-tick.go::after, .cbm-spark { animation: none !important; }
    .cbm-stagger > *, .cbm-fold > *, .cbm-rise, .cbm-fade-swap { opacity: 1 !important; transform: none !important; }
    .cbm-tick svg path { stroke-dashoffset: 0 !important; animation: none !important; }
    .cbm-acc-body, .cbm-acc-item, .cbm-tap, .cbm-toast, .cbm-sheet { transition: none !important; }
    .cbm-acc-item { opacity: 1 !important; transform: none !important; }
}