/**
 * Artist Hover Animations
 * Glitch fade in/out effects for artist images
 */

/* Base state for all artist images */
.sofa_emanuil,
.sofa_yana,
.sofa_maria,
.sofa_yulia,
.sofa_desi,
.sofa_michelangelo,
.sofa_zara {
  opacity: 0;
  transition: none;
}

/* Glitch Fade In Animation */
@keyframes glitchFadeIn {
  0% {
    opacity: 0;
    transform: translate(0, 0);
    filter: blur(2px);
  }
  10% {
    opacity: 0.3;
    transform: translate(-2px, 2px);
    filter: hue-rotate(90deg) blur(1px);
  }
  20% {
    opacity: 0.5;
    transform: translate(2px, -2px);
    filter: hue-rotate(-90deg) blur(0px);
  }
  30% {
    opacity: 0.6;
    transform: translate(-1px, -1px);
    filter: hue-rotate(0deg);
  }
  40% {
    opacity: 0.8;
    transform: translate(1px, 1px);
  }
  50% {
    opacity: 0.7;
    transform: translate(-1px, 0);
  }
  60% {
    opacity: 0.9;
    transform: translate(0, 1px);
  }
  70% {
    opacity: 0.85;
    transform: translate(1px, -1px);
  }
  80% {
    opacity: 0.95;
    transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0) hue-rotate(0deg);
  }
}

/* Glitch Fade Out Animation */
@keyframes glitchFadeOut {
  0% {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0);
  }
  20% {
    opacity: 0.8;
    transform: translate(1px, -1px);
    filter: hue-rotate(45deg);
  }
  40% {
    opacity: 0.6;
    transform: translate(-2px, 1px);
    filter: hue-rotate(-45deg) blur(1px);
  }
  60% {
    opacity: 0.4;
    transform: translate(2px, 2px);
    filter: blur(2px);
  }
  80% {
    opacity: 0.2;
    transform: translate(-1px, -2px);
  }
  100% {
    opacity: 0;
    transform: translate(0, 0);
    filter: blur(3px) hue-rotate(0deg);
  }
}

/* Active state classes */
.artist-fade-in {
  display: block !important;
  animation: glitchFadeIn 0.4s ease-out forwards;
}

.artist-fade-out {
  display: block !important;
  animation: glitchFadeOut 0.3s ease-in forwards;
}

/* Ensure animations work properly */
.artist-visible {
  display: block !important;
  opacity: 1;
}

.artist-hidden {
  display: none !important;
  opacity: 0;
}

/* Mobile View Button Behavior */
@media screen and (max-width: 991px) {
  .view {
    display: none !important;
  }
  
  .view.show-mobile {
    display: flex !important;
    animation: glitchFadeIn 0.4s ease-out forwards;
  }
  
  /* Highlight selected artist on mobile */
  .block_artist_name.selected {
    border-color: #c2a276 !important;
    box-shadow: inset 0 2px 18px 4px #e0bc8a5e !important;
    background-color: #0a0806 !important;
  }
}