/* ============================================================================
 * DAILY WORKOUT TRACKER - SOOTHING PASTEL GLASSMORPHISM & 3D STUDIO
 * ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --glass-bg: rgba(238, 245, 255, 0.86);
  --glass-bg-card: linear-gradient(145deg, rgba(246, 250, 255, 0.88) 0%, rgba(234, 243, 255, 0.82) 100%);
  --glass-bg-hover: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(238, 246, 255, 0.9) 100%);
  --glass-border: rgba(186, 214, 245, 0.8);
  --glass-border-glow: rgba(14, 165, 233, 0.6);
  --glass-shadow: 0 12px 32px -6px rgba(100, 125, 165, 0.22), 0 4px 14px -2px rgba(100, 125, 165, 0.12);
  --glass-inner-specular: inset 0 1px 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 1px 0 rgba(186, 214, 245, 0.35);
  --glass-blur: blur(24px) saturate(180%);
}

body {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  background: radial-gradient(circle at 10% 10%, #dde8f8 0%, #d2e2f6 30%, #e2daf2 65%, #d6e8f8 100%);
  background-attachment: fixed;
  color: #0f2137;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ============================================================================
 * AMBIENT BACKGROUND GLOW ORBS (Soothing Colorful Refraction)
 * ============================================================================ */
.glass-ambient-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0%, #e0ebf9 0%, #d4e3f7 50%, #dce4f8 100%);
}

.glass-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(85px);
  opacity: 0.55;
  animation: orbFloat 18s ease-in-out infinite alternate;
}

.glass-orb-cyan {
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, #38bdf8 0%, #0284c7 55%, transparent 75%);
  top: -100px;
  left: -80px;
}

.glass-orb-purple {
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, #c084fc 0%, #818cf8 50%, transparent 75%);
  top: 20%;
  right: -120px;
  animation-duration: 22s;
  animation-delay: -5s;
}

.glass-orb-emerald {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #34d399 0%, #059669 50%, transparent 75%);
  bottom: -90px;
  left: 18%;
  animation-duration: 25s;
  animation-delay: -10s;
}

.glass-orb-rose {
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, #fb7185 0%, #f43f5e 50%, transparent 75%);
  bottom: 18%;
  right: 12%;
  opacity: 0.45;
  animation-duration: 20s;
}

@keyframes orbFloat {
  0% { transform: translateY(0) scale(1) rotate(0deg); }
  50% { transform: translateY(35px) scale(1.08) rotate(8deg); }
  100% { transform: translateY(-25px) scale(0.95) rotate(-8deg); }
}

/* Subtle frosted noise grain */
.glass-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ============================================================================
 * GLASSMORPHISM UI FOUNDATIONS (SOOTHING PASTEL THEME)
 * ============================================================================ */

.glass-card {
  background: var(--glass-bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inner-specular);
  border-radius: 1.25rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), rgba(186, 214, 245, 0.8), transparent);
  pointer-events: none;
}

.glass-card-hover:hover {
  transform: translateY(-3px);
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-glow);
  box-shadow: 0 16px 40px -8px rgba(90, 115, 155, 0.3), 0 0 22px 0 rgba(14, 165, 233, 0.2), var(--glass-inner-specular);
}

.glass-header {
  background: rgba(234, 243, 255, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(186, 214, 245, 0.85);
  box-shadow: 0 4px 20px -2px rgba(100, 125, 165, 0.16);
}

.glass-input {
  background: rgba(240, 247, 255, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(186, 214, 245, 0.9) !important;
  color: #0f2137 !important;
  transition: all 0.25s ease;
  box-shadow: inset 0 2px 4px 0 rgba(100, 125, 165, 0.08);
}

.glass-input:focus {
  border-color: #0284c7 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3.5px rgba(14, 165, 233, 0.25), inset 0 2px 4px 0 rgba(100, 125, 165, 0.05) !important;
}

.glass-btn {
  background: linear-gradient(145deg, rgba(245, 250, 255, 0.92) 0%, rgba(232, 242, 255, 0.88) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(186, 214, 245, 0.85);
  color: #1e293b;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(100, 125, 165, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.glass-btn:hover {
  background: linear-gradient(145deg, #ffffff 0%, rgba(240, 248, 255, 0.96) 100%);
  border-color: rgba(14, 165, 233, 0.5);
  color: #0369a1;
  box-shadow: 0 4px 14px rgba(100, 125, 165, 0.2), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.glass-btn-primary {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 50%, #4338ca 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.45);
}

.glass-btn-primary:hover {
  background: linear-gradient(135deg, #0369a1 0%, #1d4ed8 50%, #3730a3 100%);
  box-shadow: 0 8px 25px rgba(2, 132, 199, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
}

.glass-btn-emerald {
  background: linear-gradient(135deg, #059669 0%, #0284c7 100%);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

.glass-btn-emerald:hover {
  background: linear-gradient(135deg, #047857 0%, #0369a1 100%);
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.4);
}

.glass-btn-indigo {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

/* Language Switcher Button Active Pill */
.glass-lang-active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0284c7 !important;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.3) !important;
}

/* ============================================================================
 * WORKOUT CARD & LIST STYLES (SOOTHING PASTEL THEME)
 * ============================================================================ */

.workout-item {
  background: linear-gradient(135deg, rgba(248, 252, 255, 0.94) 0%, rgba(236, 245, 255, 0.9) 100%);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(186, 214, 245, 0.85);
  border-radius: 1.15rem;
  box-shadow: 0 4px 18px 0 rgba(100, 125, 165, 0.16), var(--glass-inner-specular);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.workout-item:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ffffff 0%, rgba(240, 248, 255, 0.96) 100%);
  border-color: rgba(14, 165, 233, 0.6);
  box-shadow: 0 12px 30px 0 rgba(100, 125, 165, 0.24), 0 0 20px rgba(14, 165, 233, 0.16), var(--glass-inner-specular);
}

.workout-completed {
  opacity: 0.92;
  border-color: rgba(16, 185, 129, 0.5) !important;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.9) 0%, rgba(209, 250, 229, 0.82) 100%) !important;
  box-shadow: 0 4px 16px 0 rgba(16, 185, 129, 0.16), var(--glass-inner-specular) !important;
}

.workout-completed .exercise-title {
  text-decoration: line-through;
  color: #475569;
}

/* Filter Tab Pills */
.filter-tab {
  transition: all 0.2s ease;
}

.filter-tab.active-tab {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0284c7 !important;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.25);
}

/* ============================================================================
 * MODALS (High-depth frosted pastel glass overlays)
 * ============================================================================ */

#workoutModal.active,
#guideModal.active,
#routinesModal.active,
#caseSessionModal.active,
#exerciseDetailModal.active,
#threeStudioModal.active {
  opacity: 1;
  pointer-events: auto;
}

#workoutModal.active #modalCard,
#guideModal.active #guideModalCard,
#routinesModal.active #routinesModalCard,
#caseSessionModal.active #caseSessionModalCard,
#exerciseDetailModal.active #detailModalCard,
#threeStudioModal.active #threeStudioModalCard {
  transform: scale(1);
}

.glass-modal-card {
  background: linear-gradient(145deg, rgba(246, 250, 255, 0.96) 0%, rgba(236, 245, 255, 0.94) 100%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(186, 214, 245, 0.9);
  box-shadow: 0 25px 60px -10px rgba(50, 75, 115, 0.28), 0 0 30px rgba(14, 165, 233, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

/* Custom Sleek Frosted Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(241, 245, 249, 0.7);
}
::-webkit-scrollbar-thumb {
  background: rgba(203, 213, 225, 0.85);
  border-radius: 9999px;
  backdrop-filter: blur(4px);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.95);
}

/* Toast with Frosted Glass */
.toast-slide-in {
  animation: slideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Muscle Contraction Activation Glow */
.anim-muscle-pump {
  animation: musclePump 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  filter: drop-shadow(0 0 4px rgba(244, 63, 94, 0.65));
}
@keyframes musclePump {
  0%, 100% { opacity: 0.45; filter: drop-shadow(0 0 0px transparent); }
  50% { opacity: 1; filter: drop-shadow(0 0 8px rgba(244, 63, 94, 0.95)); }
}

/* Floor Shadow Dynamic Compression */
.anim-floor-shadow {
  animation: floorShadowPulse 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 115px 112px;
}
@keyframes floorShadowPulse {
  0%, 100% { transform: scaleX(1) scaleY(1); opacity: 0.25; }
  50% { transform: scaleX(1.15) scaleY(1.3); opacity: 0.55; }
}

/* ============================================================================
 * REALISTIC EXERCISE BIOMECHANICAL ANIMATIONS (Keyframes)
 * ============================================================================ */

/* 1. Push-ups */
.anim-real-pushup {
  animation: realPushup 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 32px 108px;
}
.anim-pushup-joint-arm {
  animation: pushupJointArm 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 145px 56px;
}
@keyframes realPushup {
  0%, 100% { transform: rotate(0deg); }
  45%, 55% { transform: rotate(-14deg) translateY(22px); }
}
@keyframes pushupJointArm {
  0%, 100% { transform: scaleY(1); }
  45%, 55% { transform: scaleY(0.45) skewX(10deg); }
}

/* 2. Barbell Bench Press */
.anim-real-benchpress {
  animation: realBenchpress 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes realBenchpress {
  0%, 100% { transform: translateY(0px); }
  45%, 55% { transform: translateY(34px); }
}

/* 3. Dumbbell Chest Fly */
.anim-real-fly-left {
  animation: realFlyLeft 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 94px 79px;
}
.anim-real-fly-right {
  animation: realFlyRight 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 126px 79px;
}
@keyframes realFlyLeft {
  0%, 100% { transform: rotate(0deg); }
  45%, 55% { transform: rotate(-38deg) translateY(8px); }
}
@keyframes realFlyRight {
  0%, 100% { transform: rotate(0deg); }
  45%, 55% { transform: rotate(38deg) translateY(8px); }
}

/* 4. Dips */
.anim-real-dips {
  animation: realDips 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes realDips {
  0%, 100% { transform: translateY(0px); }
  45%, 55% { transform: translateY(28px); }
}

/* 5. Pull-ups */
.anim-real-pullup {
  animation: realPullup 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes realPullup {
  0%, 100% { transform: translateY(0px); }
  45%, 55% { transform: translateY(-30px); }
}

/* 6. Lat Pulldown */
.anim-real-latpulldown {
  animation: realLatpulldown 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes realLatpulldown {
  0%, 100% { transform: translateY(0px); }
  45%, 55% { transform: translateY(38px); }
}

/* 7. Barbell Rows */
.anim-real-barbellrow {
  animation: realBarbellrow 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes realBarbellrow {
  0%, 100% { transform: translateY(0px); }
  45%, 55% { transform: translateY(-28px); }
}

/* 8. Deadlift */
.anim-real-deadlift {
  animation: realDeadlift 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 105px 105px;
}
@keyframes realDeadlift {
  0%, 100% { transform: rotate(26deg) translateY(14px); }
  45%, 55% { transform: rotate(0deg) translateY(0px); }
}

/* 9. Squats */
.anim-real-squat {
  animation: realSquat 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes realSquat {
  0%, 100% { transform: translateY(0px); }
  45%, 55% { transform: translateY(32px); }
}

/* 10. Lunges */
.anim-real-lunge {
  animation: realLunge 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes realLunge {
  0%, 100% { transform: translateY(0px); }
  45%, 55% { transform: translateY(22px); }
}

/* 11. Leg Press */
.anim-real-legpress {
  animation: realLegpress 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes realLegpress {
  0%, 100% { transform: translate(0px, 0px); }
  45%, 55% { transform: translate(-26px, -18px); }
}

/* 12. Standing Calf Raise */
.anim-real-calfraise {
  animation: realCalfraise 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes realCalfraise {
  0%, 100% { transform: translateY(0px); }
  45%, 55% { transform: translateY(-16px); }
}

/* 13. Overhead Shoulder Press */
.anim-real-overheadpress {
  animation: realOverheadpress 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes realOverheadpress {
  0%, 100% { transform: translateY(0px); }
  45%, 55% { transform: translateY(-38px); }
}

/* 14. Lateral Raises */
.anim-real-latraise-left {
  animation: realLatraiseLeft 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 94px 50px;
}
.anim-real-latraise-right {
  animation: realLatraiseRight 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 126px 50px;
}
@keyframes realLatraiseLeft {
  0%, 100% { transform: rotate(0deg); }
  45%, 55% { transform: rotate(-72deg); }
}
@keyframes realLatraiseRight {
  0%, 100% { transform: rotate(0deg); }
  45%, 55% { transform: rotate(72deg); }
}

/* 15. Bicep Curls */
.anim-real-bicepcurl {
  animation: realBicepcurl 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 110px 65px;
}
@keyframes realBicepcurl {
  0%, 100% { transform: rotate(0deg); }
  45%, 55% { transform: rotate(-85deg); }
}

/* 16. Tricep Rope Pushdown */
.anim-real-triceppushdown {
  animation: realTriceppushdown 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 110px 58px;
}
@keyframes realTriceppushdown {
  0%, 100% { transform: rotate(-75deg); }
  45%, 55% { transform: rotate(0deg); }
}

/* 17. Abdominal Crunches */
.anim-real-crunch {
  animation: realCrunch 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 85px 95px;
}
@keyframes realCrunch {
  0%, 100% { transform: rotate(0deg); }
  45%, 55% { transform: rotate(-22deg); }
}

/* 18. Plank Core Tension */
.anim-real-plank-pulse {
  animation: realPlankPulse 1.8s ease-in-out infinite;
}
@keyframes realPlankPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* 19. Hanging Leg Raises */
.anim-real-hangingleg {
  animation: realHangingleg 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 110px 65px;
}
@keyframes realHangingleg {
  0%, 100% { transform: rotate(0deg); }
  45%, 55% { transform: rotate(-80deg); }
}

/* 20. Jumping Jacks */
.anim-real-jack-legs {
  animation: realJackLegs 1.2s ease-in-out infinite;
  transform-origin: 110px 65px;
}
.anim-real-jack-arms {
  animation: realJackArms 1.2s ease-in-out infinite;
  transform-origin: 110px 45px;
}
@keyframes realJackLegs {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(1.65); }
}
@keyframes realJackArms {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(-0.95); }
}

/* 21. Burpees */
.anim-real-burpee {
  animation: realBurpee 3.4s ease-in-out infinite;
}
@keyframes realBurpee {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(35px) scaleY(0.7); }
  50% { transform: translateY(50px) rotate(-10deg); }
  75% { transform: translateY(35px) scaleY(0.7); }
  90% { transform: translateY(-20px); }
}

/* 22. High Knees */
.anim-real-highknee-left {
  animation: realHighkneeLeft 0.9s ease-in-out infinite alternate;
  transform-origin: 100px 65px;
}
.anim-real-highknee-right {
  animation: realHighkneeRight 0.9s ease-in-out infinite alternate-reverse;
  transform-origin: 120px 65px;
}
@keyframes realHighkneeLeft {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-55deg); }
}
@keyframes realHighkneeRight {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-55deg); }
}


/* Toast with Frosted Glass */
.toast-slide-in {
  animation: slideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Muscle Contraction Activation Glow */
.anim-muscle-pump {
  animation: musclePump 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  filter: drop-shadow(0 0 4px rgba(244, 63, 94, 0.65));
}
@keyframes musclePump {
  0%, 100% { opacity: 0.35; filter: drop-shadow(0 0 0px transparent); }
  50% { opacity: 1; filter: drop-shadow(0 0 8px rgba(244, 63, 94, 0.95)); }
}

/* Floor Shadow Dynamic Compression */
.anim-floor-shadow {
  animation: floorShadowPulse 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 115px 112px;
}
@keyframes floorShadowPulse {
  0%, 100% { transform: scaleX(1) scaleY(1); opacity: 0.4; }
  50% { transform: scaleX(1.15) scaleY(1.3); opacity: 0.8; }
}

/* ============================================================================
 * REALISTIC EXERCISE BIOMECHANICAL ANIMATIONS (Keyframes)
 * ============================================================================ */

/* 1. Push-ups */
.anim-real-pushup {
  animation: realPushup 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 32px 108px;
}
.anim-pushup-joint-arm {
  animation: pushupJointArm 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 145px 56px;
}
@keyframes realPushup {
  0%, 100% { transform: rotate(0deg); }
  45%, 55% { transform: rotate(-14deg) translateY(22px); }
}
@keyframes pushupJointArm {
  0%, 100% { transform: scaleY(1); }
  45%, 55% { transform: scaleY(0.45) skewX(10deg); }
}

/* 2. Barbell Bench Press */
.anim-real-benchpress {
  animation: realBenchpress 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes realBenchpress {
  0%, 100% { transform: translateY(0px); }
  45%, 55% { transform: translateY(34px); }
}

/* 3. Dumbbell Chest Fly */
.anim-real-fly-left {
  animation: realFlyLeft 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 94px 79px;
}
.anim-real-fly-right {
  animation: realFlyRight 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 126px 79px;
}
@keyframes realFlyLeft {
  0%, 100% { transform: rotate(0deg); }
  45%, 55% { transform: rotate(-38deg) translateY(8px); }
}
@keyframes realFlyRight {
  0%, 100% { transform: rotate(0deg); }
  45%, 55% { transform: rotate(38deg) translateY(8px); }
}

/* 4. Dips */
.anim-real-dips {
  animation: realDips 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes realDips {
  0%, 100% { transform: translateY(0px); }
  45%, 55% { transform: translateY(28px); }
}

/* 5. Pull-ups */
.anim-real-pullup {
  animation: realPullup 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes realPullup {
  0%, 100% { transform: translateY(0px); }
  45%, 55% { transform: translateY(-30px); }
}

/* 6. Lat Pulldown */
.anim-real-latpulldown {
  animation: realLatpulldown 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes realLatpulldown {
  0%, 100% { transform: translateY(0px); }
  45%, 55% { transform: translateY(38px); }
}

/* 7. Barbell Rows */
.anim-real-barbellrow {
  animation: realBarbellrow 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes realBarbellrow {
  0%, 100% { transform: translateY(0px); }
  45%, 55% { transform: translateY(-28px); }
}

/* 8. Deadlift */
.anim-real-deadlift {
  animation: realDeadlift 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 105px 105px;
}
@keyframes realDeadlift {
  0%, 100% { transform: rotate(26deg) translateY(14px); }
  45%, 55% { transform: rotate(0deg) translateY(0px); }
}

/* 9. Squats */
.anim-real-squat {
  animation: realSquat 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes realSquat {
  0%, 100% { transform: translateY(0px); }
  45%, 55% { transform: translateY(32px); }
}

/* 10. Lunges */
.anim-real-lunge {
  animation: realLunge 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes realLunge {
  0%, 100% { transform: translateY(0px); }
  45%, 55% { transform: translateY(22px); }
}

/* 11. Leg Press */
.anim-real-legpress {
  animation: realLegpress 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes realLegpress {
  0%, 100% { transform: translate(0px, 0px); }
  45%, 55% { transform: translate(-26px, -18px); }
}

/* 12. Standing Calf Raise */
.anim-real-calfraise {
  animation: realCalfraise 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes realCalfraise {
  0%, 100% { transform: translateY(0px); }
  45%, 55% { transform: translateY(-16px); }
}

/* 13. Overhead Shoulder Press */
.anim-real-overheadpress {
  animation: realOverheadpress 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes realOverheadpress {
  0%, 100% { transform: translateY(0px); }
  45%, 55% { transform: translateY(-38px); }
}

/* 14. Lateral Raises */
.anim-real-latraise-left {
  animation: realLatraiseLeft 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 94px 50px;
}
.anim-real-latraise-right {
  animation: realLatraiseRight 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 126px 50px;
}
@keyframes realLatraiseLeft {
  0%, 100% { transform: rotate(0deg); }
  45%, 55% { transform: rotate(-72deg); }
}
@keyframes realLatraiseRight {
  0%, 100% { transform: rotate(0deg); }
  45%, 55% { transform: rotate(72deg); }
}

/* 15. Bicep Curls */
.anim-real-bicepcurl {
  animation: realBicepcurl 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 110px 65px;
}
@keyframes realBicepcurl {
  0%, 100% { transform: rotate(0deg); }
  45%, 55% { transform: rotate(-85deg); }
}

/* 16. Tricep Rope Pushdown */
.anim-real-triceppushdown {
  animation: realTriceppushdown 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 110px 58px;
}
@keyframes realTriceppushdown {
  0%, 100% { transform: rotate(-75deg); }
  45%, 55% { transform: rotate(0deg); }
}

/* 17. Abdominal Crunches */
.anim-real-crunch {
  animation: realCrunch 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 85px 95px;
}
@keyframes realCrunch {
  0%, 100% { transform: rotate(0deg); }
  45%, 55% { transform: rotate(-22deg); }
}

/* 18. Plank Core Tension */
.anim-real-plank-pulse {
  animation: realPlankPulse 1.8s ease-in-out infinite;
}
@keyframes realPlankPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* 19. Hanging Leg Raises */
.anim-real-hangingleg {
  animation: realHangingleg 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: 110px 65px;
}
@keyframes realHangingleg {
  0%, 100% { transform: rotate(0deg); }
  45%, 55% { transform: rotate(-80deg); }
}

/* 20. Jumping Jacks */
.anim-real-jack-legs {
  animation: realJackLegs 1.2s ease-in-out infinite;
  transform-origin: 110px 65px;
}
.anim-real-jack-arms {
  animation: realJackArms 1.2s ease-in-out infinite;
  transform-origin: 110px 45px;
}
@keyframes realJackLegs {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(1.65); }
}
@keyframes realJackArms {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(-0.95); }
}

/* 21. Burpees */
.anim-real-burpee {
  animation: realBurpee 3.4s ease-in-out infinite;
}
@keyframes realBurpee {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(35px) scaleY(0.7); }
  50% { transform: translateY(50px) rotate(-10deg); }
  75% { transform: translateY(35px) scaleY(0.7); }
  90% { transform: translateY(-20px); }
}

/* 22. High Knees */
.anim-real-highknee-left {
  animation: realHighkneeLeft 0.9s ease-in-out infinite alternate;
  transform-origin: 100px 65px;
}
.anim-real-highknee-right {
  animation: realHighkneeRight 0.9s ease-in-out infinite alternate-reverse;
  transform-origin: 120px 65px;
}
@keyframes realHighkneeLeft {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-55deg); }
}
@keyframes realHighkneeRight {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-55deg); }
}