/* ============================================================================
 * DAILY WORKOUT TRACKER - COMPLETE EXERCISE ANIMATION ENGINE
 * ============================================================================ */

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

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #0b0f19;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Workout Card transitions */
.workout-item {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.workout-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35);
}

/* Completed Card Style */
.workout-completed {
  opacity: 0.75;
  border-color: rgba(16, 185, 129, 0.3) !important;
  background: rgba(16, 185, 129, 0.03) !important;
}
.workout-completed .exercise-title {
  text-decoration: line-through;
  color: #94a3b8;
}

/* Modal animation states */
#workoutModal.active,
#guideModal.active,
#routinesModal.active,
#caseSessionModal.active,
#exerciseDetailModal.active {
  opacity: 1;
  pointer-events: auto;
}

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

/* Toast animation */
.toast-slide-in {
  animation: slideIn 0.3s ease forwards;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
 * ALL EXERCISE KEYFRAME ANIMATIONS
 * ============================================================================ */

/* 1. Push-ups & Incline Press */
.anim-pushup-body {
  animation: pushupBody 2.4s ease-in-out infinite;
  transform-origin: 35px 100px;
}
.anim-pushup-arm {
  animation: pushupArm 2.4s ease-in-out infinite;
  transform-origin: 145px 100px;
}
@keyframes pushupBody {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-16deg) translateY(18px); }
}
@keyframes pushupArm {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.55); }
}

/* 2. Squats & Leg Press */
.anim-squat-torso {
  animation: squatMotion 2.6s ease-in-out infinite;
  transform-origin: 100px 110px;
}
.anim-squat-legs {
  animation: squatLegs 2.6s ease-in-out infinite;
}
@keyframes squatMotion {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(28px); }
}
@keyframes squatLegs {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.65); transform-origin: 100px 110px; }
}

/* 3. Bench Press & Chest Fly */
.anim-bench-bar {
  animation: benchPress 2.4s ease-in-out infinite;
}
.anim-bench-forearms {
  animation: benchArms 2.4s ease-in-out infinite;
  transform-origin: 105px 75px;
}
@keyframes benchPress {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(32px); }
}
@keyframes benchArms {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.4); }
}

.anim-fly-left {
  animation: flyLeft 2.4s ease-in-out infinite;
  transform-origin: 100px 75px;
}
.anim-fly-right {
  animation: flyRight 2.4s ease-in-out infinite;
  transform-origin: 100px 75px;
}
@keyframes flyLeft {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-40deg); }
}
@keyframes flyRight {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(40deg); }
}

/* 4. Pull-ups & Lat Pulldown */
.anim-pullup-figure {
  animation: pullupMotion 2.8s ease-in-out infinite;
}
@keyframes pullupMotion {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-34px); }
}

/* 5. Deadlift & Barbell Rows */
.anim-deadlift-torso {
  animation: deadliftMotion 2.8s ease-in-out infinite;
  transform-origin: 100px 75px;
}
.anim-row-bar {
  animation: barbellRow 2.2s ease-in-out infinite;
}
@keyframes deadliftMotion {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(45deg); }
}
@keyframes barbellRow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-24px); }
}

/* 6. Bicep Curls & Hammer Curls */
.anim-curl-forearm {
  animation: bicepCurl 2.2s ease-in-out infinite;
  transform-origin: 100px 65px;
}
@keyframes bicepCurl {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-75deg); }
}

/* 7. Tricep Pushdown & Dips */
.anim-tricep-arm {
  animation: tricepMotion 2.2s ease-in-out infinite;
  transform-origin: 100px 50px;
}
.anim-dips-body {
  animation: dipsMotion 2.4s ease-in-out infinite;
}
@keyframes tricepMotion {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(65deg); }
}
@keyframes dipsMotion {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(26px); }
}

/* 8. Shoulder Lateral Raise & Press */
.anim-lat-raise-left {
  animation: latRaiseLeft 2.4s ease-in-out infinite;
  transform-origin: 90px 50px;
}
.anim-lat-raise-right {
  animation: latRaiseRight 2.4s ease-in-out infinite;
  transform-origin: 110px 50px;
}
@keyframes latRaiseLeft {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(70deg); }
}
@keyframes latRaiseRight {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-70deg); }
}
.anim-shoulder-press-bar {
  animation: shoulderPress 2.4s ease-in-out infinite;
}
@keyframes shoulderPress {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(28px); }
}

/* 9. Core (Plank, Crunches, Leg Raises) */
.anim-plank-glow {
  animation: corePulse 2s ease-in-out infinite;
}
@keyframes corePulse {
  0%, 100% { stroke-opacity: 0.4; filter: drop-shadow(0 0 2px rgba(249, 115, 22, 0.4)); }
  50% { stroke-opacity: 1; filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.9)); }
}
.anim-crunch-torso {
  animation: crunchMotion 2.2s ease-in-out infinite;
  transform-origin: 110px 90px;
}
@keyframes crunchMotion {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-30deg); }
}
.anim-leg-raise {
  animation: legRaiseMotion 2.4s ease-in-out infinite;
  transform-origin: 110px 90px;
}
@keyframes legRaiseMotion {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-70deg); }
}

/* 10. Cardio (Jumping Jacks, Burpees, High Knees) */
.anim-jumping-arms-left {
  animation: jackArmsLeft 1.2s ease-in-out infinite;
  transform-origin: 100px 45px;
}
.anim-jumping-arms-right {
  animation: jackArmsRight 1.2s ease-in-out infinite;
  transform-origin: 100px 45px;
}
.anim-jumping-legs-left {
  animation: jackLegsLeft 1.2s ease-in-out infinite;
  transform-origin: 100px 75px;
}
.anim-jumping-legs-right {
  animation: jackLegsRight 1.2s ease-in-out infinite;
  transform-origin: 100px 75px;
}
@keyframes jackArmsLeft {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(50deg); }
}
@keyframes jackArmsRight {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-50deg); }
}
@keyframes jackLegsLeft {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-22deg); }
}
@keyframes jackLegsRight {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(22deg); }
}

.anim-high-knee {
  animation: highKneeMotion 1.1s ease-in-out infinite;
  transform-origin: 100px 75px;
}
@keyframes highKneeMotion {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-45deg); }
}

/* Speed / Tempo Modifier States */
.speed-slow * {
  animation-duration: 4s !important;
}
.speed-normal * {
  /* default */
}
.speed-fast * {
  animation-duration: 1.4s !important;
}
.anim-paused * {
  animation-play-state: paused !important;
}