/* 
 * Custom Audio Player Positioning & Styling
 * This file controls the position, size, and visual effects of the custom audio player button
 */

/* Force audio to body level positioning */
body > audio.audio-source,
body audio.audio-source {
  position: fixed !important;        /* Fixed positioning relative to viewport */
  bottom: 12px !important;           /* Distance from bottom edge - CHANGE THIS to move up/down */
  left: 8px !important;             /* Distance from left edge - CHANGE THIS to move left/right */
  top: auto !important;              /* Keep as auto when using bottom positioning */
  right: auto !important;            /* Keep as auto when using left positioning */
  z-index: 999999 !important;        /* Layer order - higher numbers appear on top */
  width: 60px !important;            /* Button width - CHANGE THIS to resize */
  height: 60px !important;           /* Button height - CHANGE THIS to resize */
}

/* Override any reveal.js positioning */
.reveal audio.audio-source {
  position: fixed !important;        /* Fixed positioning relative to viewport */
  bottom: 12px !important;           /* Distance from bottom edge - CHANGE THIS to move up/down */
  left: 8px !important;             /* Distance from left edge - CHANGE THIS to move left/right */
  top: auto !important;              /* Keep as auto when using bottom positioning */
  right: auto !important;            /* Keep as auto when using left positioning */
}

/* Custom Audio Player Button Styling */
.audio-player-fixed {
  /* Base styling with better contrast for light mode */
  background: rgba(0, 0, 0, 0.15) !important;
  color: #000000 !important;
  border: 2px solid rgba(0, 0, 0, 0.2) !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  /* Perfect centering for play icon */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  /* Slight offset for play triangle visual centering */
  padding-left: 2px !important;
}

/* Hover effects */
.audio-player-fixed:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border: 2px solid rgba(0, 0, 0, 0.4) !important;
}

/* Click/active effects */
.audio-player-fixed:active {
  transform: scale(0.95) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
  background: rgba(0, 0, 0, 0.2) !important;
}

/* Playing state - subtle pulse animation */
.audio-player-fixed.playing {
  animation: pulse 2s ease-in-out infinite !important;
}

/* Dark theme support - solid background for maximum visibility */
html.dark-theme .audio-player-fixed {
  background: #4a5568 !important;
  color: #ffffff !important;
  border: 2px solid #718096 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
}

html.dark-theme .audio-player-fixed:hover {
  background: #5a6578 !important;
  box-shadow: 0 6px 25px rgba(255, 255, 255, 0.3) !important;
  border: 2px solid #9ca3af !important;
}

html.dark-theme .audio-player-fixed:active {
  background: #3a4553 !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.9) !important;
}

/* Pulse animation for playing state */
@keyframes pulse {
  0%, 100% { 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(0, 0, 0, 0.2);
  }
  50% { 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0);
    border: 2px solid rgba(0, 0, 0, 0.4);
  }
}

/* Dark theme pulse animation - enhanced visibility */
html.dark-theme .audio-player-fixed.playing {
  animation: pulse-dark 2s ease-in-out infinite !important;
}

@keyframes pulse-dark {
  0%, 100% { 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 0 0 rgba(255, 255, 255, 0.4);
    border: 2px solid #718096;
  }
  50% { 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 0 15px rgba(255, 255, 255, 0);
    border: 2px solid #9ca3af;
  }
}

/* 
 * POSITIONING EXAMPLES:
 * 
 * Top-right corner:
 * top: 20px !important;
 * right: 20px !important;
 * bottom: auto !important;
 * left: auto !important;
 * 
 * Center-bottom:
 * bottom: 20px !important;
 * left: 50% !important;
 * right: auto !important;
 * transform: translateX(-50%) !important;
 * 
 * Further from edges:
 * bottom: 50px !important;
 * left: 50px !important;
 */