/* TV Channel Switcher Styles - Add to your CSS */

/* Enhanced profile image container for smoother transitions */
.profile-image-wrapper {
  position: relative;
  transition: all 0.3s ease;
}

.profile-video-wrapper {
  position: relative;
  transition: all 0.3s ease;
}

/* Profile image transition effects */
.profile-image {
  transition: all 0.2s ease;
}

.profile-video {
  transition: all 0.2s ease;
}

/* Main TV overlay - non-interactive */
.overlay-image {
  transition: none;
  pointer-events: auto;
}

/* Channel knob specific styles */
img[src*='channel1.png'],
img[src*='channel2.png'] {
  transition: all 0.15s ease !important;
  pointer-events: auto !important;
  z-index: 100 !important;
}

/* Channel knob hover states */
img[src*='channel1.png']:hover,
img[src*='channel2.png']:hover {
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(0, 255, 0, 0.8)) !important;
}

/* Channel knob active states */
img[src*='channel1.png']:active,
img[src*='channel2.png']:active {
  filter: brightness(1.5) drop-shadow(0 0 12px rgba(0, 255, 0, 1)) !important;
}

/* Channel display styling */
.channel-display {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  background: linear-gradient(45deg, #00ff00, #00cc00) !important;
  color: #000000 !important;
  padding: 5px 10px !important;
  border-radius: 3px !important;
  font-family: 'Courier New', monospace !important;
  font-weight: bold !important;
  font-size: 12px !important;
  z-index: 1000 !important;
  border: 1px solid #00ff00 !important;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5) !important;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8) !important;
}

/* Static effect for channel switching */
.profile-image.switching {
  filter: brightness(1.5) contrast(2) saturate(0);
  animation: staticNoise 0.15s infinite;
}

/* Static effect for channel switching */
.profile-video.switching {
  filter: brightness(1.5) contrast(2) saturate(0);
  animation: staticNoise 0.15s infinite;
}

/* Static noise animation */
@keyframes staticNoise {
  0% {
    filter: brightness(1.5) contrast(2) saturate(0) hue-rotate(0deg);
  }
  25% {
    filter: brightness(2) contrast(3) saturate(0) hue-rotate(90deg);
  }
  50% {
    filter: brightness(0.5) contrast(4) saturate(0) hue-rotate(180deg);
  }
  75% {
    filter: brightness(1.8) contrast(2.5) saturate(0) hue-rotate(270deg);
  }
  100% {
    filter: brightness(1.5) contrast(2) saturate(0) hue-rotate(360deg);
  }
}

/* Channel fade in/out animation */
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(-10px);
  }
  20% {
    opacity: 1;
    transform: scale(1) translateY(0px);
  }
  80% {
    opacity: 1;
    transform: scale(1) translateY(0px);
  }
  100% {
    opacity: 0;
    transform: scale(0.8) translateY(-10px);
  }
}

/* Knob glow animation for feedback */
@keyframes knobGlow {
  0% {
    filter: brightness(1) drop-shadow(0 0 0px rgba(0, 255, 0, 0));
  }
  50% {
    filter: brightness(1.3) drop-shadow(0 0 10px rgba(0, 255, 0, 0.8));
  }
  100% {
    filter: brightness(1) drop-shadow(0 0 0px rgba(0, 255, 0, 0));
  }
}

/* Apply glow animation when knobs are pressed */
img[src*='channel1.png'].pressed,
img[src*='channel2.png'].pressed {
  animation: knobGlow 0.3s ease-out;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .channel-display {
    top: 10px !important;
    right: 10px !important;
    font-size: 10px !important;
    padding: 3px 6px !important;
  }

  /* Make knobs slightly larger on mobile for easier interaction */
  img[src*='channel1.png'],
  img[src*='channel2.png'] {
    transform: scale(0.12) !important;
  }
}

/* Ensure TV image doesn't interfere with knob interactions */
img[src*='tv.png'] {
  pointer-events: none !important;
}

/* Knob accessibility improvements */
img[src*='channel1.png']:focus,
img[src*='channel2.png']:focus {
  outline: 2px solid #00ff00;
  outline-offset: 2px;
}

/* Optional: Add subtle rotation effect when knobs are clicked */
@keyframes knobTurn {
  0% {
    transform: rotate(0deg) scale(0.1);
  }
  50% {
    transform: rotate(15deg) scale(0.09);
  }
  100% {
    transform: rotate(0deg) scale(0.1);
  }
}

img[src*='channel1.png'].turning,
img[src*='channel2.png'].turning {
  animation: knobTurn 0.2s ease-in-out;
}