/* ==========================================================================
   MuscleMind PWA — Animations Stylesheet (Pure Black Theme)
   Glow effects, scaling, pulse actions, and smooth layout fades
   ========================================================================== */

/* SVG Muscular Map Animations — applies to path, polygon & ellipse hotspots */
svg.human-body-svg .muscle-path {
  fill: rgba(0, 0, 0, 0);       /* Fully transparent at rest — image shows through */
  stroke: rgba(255, 255, 255, 0);
  stroke-width: 0;
  cursor: pointer;
  transition: fill 0.25s ease, stroke 0.25s ease, filter 0.25s ease;
}

/* Hover highlights — bright neon-blue tint */
svg.human-body-svg .muscle-path:hover {
  fill: rgba(59, 130, 246, 0.38) !important;
  stroke: rgba(96, 165, 250, 0.95);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 14px rgba(59, 130, 246, 0.85));
}

/* Completed muscle highlighting */
svg.human-body-svg .muscle-path.completed {
  fill: rgba(52, 211, 153, 0.15);
  stroke: rgba(52, 211, 153, 0.5);
  stroke-width: 1.5;
}

svg.human-body-svg .muscle-path.completed:hover {
  fill: rgba(52, 211, 153, 0.45) !important;
  stroke: #34D399;
  filter: drop-shadow(0 0 14px rgba(52, 211, 153, 0.85));
}

/* Tooltip */
.muscle-tooltip {
  position: fixed;
  background: rgba(10, 10, 10, 0.96);
  color: #F1F5F9;
  padding: 7px 14px;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  border: 1px solid rgba(59, 130, 246, 0.35);
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.3), 0 4px 16px rgba(0,0,0,0.8);
  pointer-events: none;
  z-index: var(--z-tooltip);
  opacity: 0;
  transform: scale(0.94) translateY(6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.muscle-tooltip.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Neon Pulse for Completed Modules */
@keyframes neonPulse {
  0%   { filter: drop-shadow(0 0 3px rgba(52, 211, 153, 0.3)); }
  50%  { filter: drop-shadow(0 0 12px rgba(52, 211, 153, 0.7)); }
  100% { filter: drop-shadow(0 0 3px rgba(52, 211, 153, 0.3)); }
}

.pulse-completed {
  animation: neonPulse 2.2s infinite ease-in-out;
}

/* Smooth Fade-in */
.fade-in {
  animation: fadeIn var(--transition-normal) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Skeleton shimmer — dark version only */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 37%,
    rgba(255, 255, 255, 0.10) 63%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}

/* Card hover glow */
@keyframes cardGlow {
  from { box-shadow: 0 0 0 rgba(59,130,246,0); }
  to   { box-shadow: 0 0 20px rgba(59,130,246,0.2); }
}

/* Back-view SVG body outline silhouette */
.body-outline {
  fill: #0A0A0A;
  stroke: #222222;
  stroke-width: 1.5;
  stroke-linejoin: round;
}