/* 
   INTERACTIVE THEME - Hover Effects, Animations & Transitions
   All interactive states, animations, and visual feedback
*/

/* ========================================
   HOVER EFFECTS
   ======================================== */

/* Trackable Item Hovers */
.trackable-item:hover {
  transform: translateX(4px); /* REVERTED to px */
}

/* Button Hovers */
.trackable-btn:hover {
  transform: scale(1.1);
}

.trackable-checkbox-btn:hover {
  transform: scale(1.05);
}

.good-enough-btn:hover {
  transform: scale(1.05);
}

.timer-btn:hover {
  transform: scale(1.1);
}

/* Counter & Progress Hovers */
.progress-btn:hover {
  transform: translateY(-50%) scale(1.1);
}

/* Form & UI Element Hovers */

.weekday-grid label:hover {
  transform: translateY(-1px); /* REVERTED to px */
}

.btn-type:hover:not(.active) {
  transform: translateY(-1px); /* REVERTED to px */
}

/* TASK 1.2: Enhanced drag and drop animations for sequence reordering */
@keyframes reorderShimmer {
  0% { 
    background-position: -100% 0; 
  }
  100% { 
    background-position: 100% 0; 
  }
}

@keyframes addButtonPulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 0.8; 
  }
  50% { 
    transform: scale(1.05); 
    opacity: 1; 
  }
}

@keyframes dropSuccess {
  0% { 
    transform: scale(1); 
  }
  25% { 
    transform: scale(1.1); 
  }
  50% { 
    transform: scale(1.05); 
  }
  100% { 
    transform: scale(1); 
  }
}

/* Enhanced reorder target styling */
.sequence-pill.valid-reorder-target {
  position: relative;
  overflow: hidden;
}

.sequence-pill.valid-reorder-target::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  animation: reorderShimmer 2s ease-in-out infinite;
}

/* Add step button animations */
.add-step-btn {
  animation: addButtonPulse 2s ease-in-out infinite;
}

.add-step-btn:hover {
  animation: none;
}

/* Success animation for completed reorder */

/* Sequence & Sets Hovers */
.sequence-item:hover .custom-title-indicator {
  opacity: 1;
}

.sequence-control-btn.config:hover {
  transform: scale(1.1);
}

.sets-control-btn:hover:not(:disabled) {
  transform: scale(1.1);
}

.sets-segment:hover {
  transform: translateY(-2px); /* REVERTED to px */
}

/* Available Trackable Card Hovers */
.available-trackable-card:hover {
  transform: translateY(-1px); /* REVERTED to px */
}

.available-trackable-card[draggable="true"]:hover {
  cursor: grab;
  transform: translateY(-3px); /* REVERTED to px */
}

.sequence-item[draggable="true"]:hover {
  cursor: grab;
}

/* Navigation Hovers */
.nav-btn:hover svg {
  transform: scale(1.1);
}

/* ========================================
   HOVER ANIMATIONS & EFFECTS
   ======================================== */

.btn-type:hover:not(.active) {
  transform: translateY(-2px); /* REVERTED to px */
}

.trackable-checkbox-btn:hover::before {
  width: 100px; /* REVERTED to px */
  height: 100px; /* REVERTED to px */
}

.trackable-checkbox-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
}

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes reorderIndicator {
  0% { transform: translateX(-50%) translateY(0); }
  100% { transform: translateX(-50%) translateY(-3px); } /* REVERTED to px */
}

@keyframes dropZonePulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes subtlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes weightShift {
  0%, 100% { font-weight: normal; }
  50% { font-weight: bold; }
}

@keyframes shimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.67; }
}

@keyframes pulseHeavy {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@keyframes pulseMedium {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes pulseLight {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes pulseHeartbeat {
  0%, 10%, 20%, 100% { opacity: 0.8; }
  5%, 15% { opacity: 1; }
  25%, 95% { opacity: 0.6; }
}

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dependencyPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes stripedBackground {
  0% { background-position: 0 0; }
  100% { background-position: 20px 20px; } /* REVERTED to px */
}

@keyframes setsShimmer {
  0% { transform: translateX(-20px); } /* REVERTED to px */
  100% { transform: translateX(100%); }
}

@keyframes checkmarkComplete {
  0% { 
    transform: scale(1); 
  }
  25% { 
    transform: scale(1.1); 
  }
  50% { 
    transform: scale(0.95); 
  }
  100% { 
    transform: scale(1); 
  }
}

@keyframes rippleEffect {
  0% { 
    transform: scale(0);
  }
  70% { 
    transform: scale(1); 
  }
  100% { 
    transform: scale(0);
  }
}

@keyframes celebrate {
  0% { transform: translateY(-50%) scale(1); }
  25% { transform: translateY(-60%) scale(1.3) rotate(-5deg); }
  50% { transform: translateY(-40%) scale(1.1) rotate(5deg); }
  75% { transform: translateY(-55%) scale(1.2) rotate(-2deg); }
  100% { transform: translateY(-50%) scale(1) rotate(0deg); }
}

/* ========================================
   INTERACTION STATES
   ======================================== */

.sets-control-btn:active:not(:disabled) {
  transform: scale(0.95);
}

/* Floating Button Interactions (settings toggle only) */