/* ============================================================
   BloodBridge — All @keyframes & Animation Utility Classes
   ============================================================ */

/* ── Page Transitions ── */
@keyframes pageEnter {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes pageExit {
    from { opacity:1; transform:translateY(0); }
    to   { opacity:0; transform:translateY(12px); }
}

/* ── Sidebar Nav Indicator ── */
@keyframes navSlideIn {
    from { transform:scaleY(0); }
    to   { transform:scaleY(1); }
}

/* ── Blood Drop Pulse ── */
@keyframes bloodPulse {
    0%, 100% { transform:scale(1); filter:drop-shadow(0 0 0 transparent); }
    50%      { transform:scale(1.08); filter:drop-shadow(0 0 12px rgba(192,57,43,0.5)); }
}

/* ── Urgency Heartbeat ── */
@keyframes urgencyBeat {
    0%, 100% { transform:scale(1); }
    20%      { transform:scale(1.12); }
    40%      { transform:scale(0.96); }
    60%      { transform:scale(1); }
}

/* ── Count Up Fade ── */
@keyframes countUp {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Bell Shake ── */
@keyframes bellShake {
    0%   { transform:rotate(0); }
    10%  { transform:rotate(14deg); }
    20%  { transform:rotate(-12deg); }
    30%  { transform:rotate(10deg); }
    40%  { transform:rotate(-8deg); }
    50%  { transform:rotate(6deg); }
    60%  { transform:rotate(-4deg); }
    70%  { transform:rotate(2deg); }
    80%  { transform:rotate(-1deg); }
    100% { transform:rotate(0); }
}

/* ── Map Pin Drop ── */
@keyframes pinDrop {
    0%   { opacity:0; transform:translateY(-40px) scale(0.5); }
    60%  { opacity:1; transform:translateY(4px) scale(1.05); }
    80%  { transform:translateY(-2px) scale(0.98); }
    100% { opacity:1; transform:translateY(0) scale(1); }
}

/* ── Location Pulse Ring ── */
@keyframes locationPulse {
    0%   { transform:scale(1); opacity:0.6; }
    100% { transform:scale(2.5); opacity:0; }
}

/* ── Alert Slide Up ── */
@keyframes alertSlideUp {
    from { opacity:0; transform:translateY(60px) scale(0.95); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ── Route Draw (SVG stroke) ── */
@keyframes routeDraw {
    from { stroke-dashoffset:1000; }
    to   { stroke-dashoffset:0; }
}

/* ── Checkmark Draw ── */
@keyframes checkDraw {
    from { stroke-dashoffset:30; }
    to   { stroke-dashoffset:0; }
}

/* ── Shimmer Loading ── */
@keyframes shimmer {
    0%   { background-position:-200% 0; }
    100% { background-position:200% 0; }
}

/* ── Bar Chart Grow ── */
@keyframes barGrow {
    from { transform:scaleY(0); }
    to   { transform:scaleY(1); }
}

/* ── EKG Heartbeat Sweep ── */
@keyframes ekgSweep {
    0%   { stroke-dashoffset:600; opacity:0.3; }
    50%  { opacity:1; }
    100% { stroke-dashoffset:0; opacity:0.3; }
}

/* ── Confetti Burst ── */
@keyframes confettiBurst {
    0%   { opacity:1; transform:translateY(0) rotate(0deg) scale(1); }
    100% { opacity:0; transform:translateY(-400px) rotate(720deg) scale(0.3); }
}

/* ── Float (blood drop hero) ── */
@keyframes float {
    0%, 100% { transform:translateY(0); }
    50%      { transform:translateY(-8px); }
}

/* ── Glow Pulse (red) ── */
@keyframes glowPulseRed {
    0%, 100% { box-shadow:0 0 0 transparent; }
    50%      { box-shadow:0 0 16px rgba(192,57,43,0.35); }
}

/* ── Glow Pulse (green/active) ── */
@keyframes glowPulseGreen {
    0%, 100% { box-shadow:0 0 0 transparent; }
    50%      { box-shadow:0 0 8px rgba(39,174,96,0.4); }
}

/* ── Glow Pulse (amber) ── */
@keyframes glowPulseAmber {
    0%, 100% { box-shadow:0 0 0 transparent; }
    50%      { box-shadow:0 0 8px rgba(243,156,18,0.35); }
}

/* ── Slide In From Left ── */
@keyframes slideInLeft {
    from { opacity:0; transform:translateX(-20px); }
    to   { opacity:1; transform:translateX(0); }
}

/* ── Slide In From Right ── */
@keyframes slideInRight {
    from { opacity:0; transform:translateX(20px); }
    to   { opacity:1; transform:translateX(0); }
}

/* ── Slide Up ── */
@keyframes slideUp {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Scale In ── */
@keyframes scaleIn {
    from { opacity:0; transform:scale(0.9); }
    to   { opacity:1; transform:scale(1); }
}

/* ── Badge Bounce ── */
@keyframes badgeBounce {
    0%   { transform:scale(0); }
    60%  { transform:scale(1.2); }
    100% { transform:scale(1); }
}

/* ── Gradient Shift (teal) ── */
@keyframes gradientShift {
    0%   { background-position:0% 50%; }
    50%  { background-position:100% 50%; }
    100% { background-position:0% 50%; }
}

/* ── Get Started Glow ── */
@keyframes getStartedGlow {
    0%, 100% { box-shadow:0 0 0 rgba(192,57,43,0); }
    50%      { box-shadow:0 0 20px rgba(192,57,43,0.4); }
}

/* ── Field Shake (validation error) ── */
@keyframes fieldShake {
    0%, 100% { transform:translateX(0); }
    20%      { transform:translateX(-3px); }
    40%      { transform:translateX(3px); }
    60%      { transform:translateX(-3px); }
    80%      { transform:translateX(3px); }
}

/* ── Toast Slide In ── */
@keyframes toastSlideIn {
    from { opacity:0; transform:translateY(80px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Toast Fade Out ── */
@keyframes toastFadeOut {
    from { opacity:1; transform:translateY(0); }
    to   { opacity:0; transform:translateY(20px); }
}

/* ── Progress Bar Drain ── */
@keyframes progressDrain {
    from { width:100%; }
    to   { width:0%; }
}

/* ── Spinner ── */
@keyframes spin {
    to { transform:rotate(360deg); }
}

/* ── Accent Border Slide Up ── */
@keyframes accentSlideUp {
    from { transform:scaleY(0); }
    to   { transform:scaleY(1); }
}

/* ── Urgency Border Pulse ── */
@keyframes urgencyBorderPulse {
    0%, 100% { border-left-color:rgba(231,76,60,1); }
    50%      { border-left-color:rgba(231,76,60,0.3); }
}


/* ============================================================
   Animation Utility Classes
   ============================================================ */

.anim-page-enter { animation:pageEnter var(--duration-slow) var(--ease-out) both; }
.anim-page-exit  { animation:pageExit 200ms var(--ease-out) both; }
.anim-nav-slide  { animation:navSlideIn var(--duration-base) var(--ease-spring) both; transform-origin:top; }
.anim-blood-pulse { animation:bloodPulse 3s ease-in-out infinite; }
.anim-blood-pulse-fast { animation:bloodPulse 2.5s ease-in-out infinite; }
.anim-urgency-beat { animation:urgencyBeat 1.5s ease-in-out 3; }
.anim-count-up { animation:countUp var(--duration-slow) var(--ease-out) both; }
.anim-bell-shake { animation:bellShake 800ms var(--ease-out); }
.anim-pin-drop { animation:pinDrop 600ms var(--ease-spring) both; }
.anim-location-pulse { animation:locationPulse 2s ease-out infinite; }
.anim-alert-slide-up { animation:alertSlideUp var(--duration-slow) var(--ease-spring) both; }
.anim-shimmer {
    background:linear-gradient(90deg, var(--grey-100) 25%, var(--grey-50) 50%, var(--grey-100) 75%);
    background-size:200% 100%;
    animation:shimmer 1.5s ease-in-out infinite;
}
.anim-bar-grow { animation:barGrow 600ms var(--ease-out) both; transform-origin:bottom; }
.anim-ekg-sweep {
    stroke-dasharray:600;
    stroke-dashoffset:600;
    animation:ekgSweep 2s linear infinite;
}
.anim-confetti { animation:confettiBurst 1.5s var(--ease-out) both; }
.anim-float { animation:float 4s ease-in-out infinite; }
.anim-glow-red { animation:glowPulseRed 2s ease-in-out infinite; }
.anim-glow-green { animation:glowPulseGreen 2s ease-in-out infinite; }
.anim-glow-amber { animation:glowPulseAmber 2s ease-in-out infinite; }
.anim-slide-left { animation:slideInLeft var(--duration-slow) var(--ease-out) both; }
.anim-slide-right { animation:slideInRight var(--duration-slow) var(--ease-out) both; }
.anim-slide-up { animation:slideUp var(--duration-slow) var(--ease-out) both; }
.anim-scale-in { animation:scaleIn var(--duration-base) var(--ease-spring) both; }
.anim-badge-bounce { animation:badgeBounce var(--duration-base) var(--ease-spring) both; }
.anim-field-shake { animation:fieldShake 300ms var(--ease-out); }
.anim-spin { animation:spin 800ms linear infinite; }
.anim-get-started-glow { animation:getStartedGlow 4s ease-in-out infinite; }
.anim-gradient-shift {
    background-size:200% 200%;
    animation:gradientShift 8s ease-in-out infinite;
}
.anim-toast-in { animation:toastSlideIn 300ms var(--ease-out) both; }
.anim-toast-out { animation:toastFadeOut 300ms var(--ease-out) both; }
.anim-accent-slide-up { animation:accentSlideUp 200ms var(--ease-out) both; transform-origin:bottom; }
.anim-urgency-border { animation:urgencyBorderPulse 1.5s ease-in-out infinite; }

/* ── Stagger Delays ── */
.stagger-1 { animation-delay:0ms; }
.stagger-2 { animation-delay:60ms; }
.stagger-3 { animation-delay:120ms; }
.stagger-4 { animation-delay:180ms; }
.stagger-5 { animation-delay:240ms; }
.stagger-6 { animation-delay:300ms; }
.stagger-7 { animation-delay:360ms; }
.stagger-8 { animation-delay:420ms; }
.stagger-9 { animation-delay:480ms; }
.stagger-10 { animation-delay:540ms; }

/* Inventory card stagger (80ms) */
.inv-stagger-1 { animation-delay:0ms; }
.inv-stagger-2 { animation-delay:80ms; }
.inv-stagger-3 { animation-delay:160ms; }
.inv-stagger-4 { animation-delay:240ms; }
.inv-stagger-5 { animation-delay:320ms; }
.inv-stagger-6 { animation-delay:400ms; }
.inv-stagger-7 { animation-delay:480ms; }
.inv-stagger-8 { animation-delay:560ms; }