@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .placeholder-state .thumbnail-inner {
    background-image: linear-gradient(to bottom, rgba(107, 114, 128, 0.5), rgba(55, 65, 81, 0.5));
    background-position: center;
    background-repeat: no-repeat;
    background-size: 110%;
    border-radius: 50% !important;
  }
  
  .placeholder-state .thumbnail-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("/assets/b-5a3f6069.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1.5rem auto;
    opacity: 0.4;
    pointer-events: none;
    z-index: 1;
    border-radius: 50%;
  }

  .loading-state .relative {
    background-image: linear-gradient(to bottom, rgb(127 29 29), rgb(69 10 10));
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  
  .loading-state .relative::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("/assets/b-5a3f6069.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1rem auto;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: 50%;
    filter: brightness(0) invert(1);
    animation: fadeInB 300ms ease-in-out forwards;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes fadeInB {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.4;
    }
  }
  
  /* Hero spinner animation */
  @keyframes hero-spin {
    from { 
      transform: rotate(0deg); 
    }
    to { 
      transform: rotate(360deg); 
    }
  }
  
  .hero-spinner-rotate {
    animation: hero-spin 1s linear infinite;
  }
  
  /* Ensure images appear above loading states */
  .loading-state img,
  .placeholder-state img {
    position: relative;
    z-index: 2;
  }
  
  /* Pure CSS hover effect for thumbnails */
  .thumbnail-container:hover .thumbnail-inner {
    border: 7px solid rgb(156, 163, 175) !important;
    border-radius: 20% !important;
  }
  
  /* Selected thumbnail - red border, stays square */
  .thumbnail-selected .thumbnail-inner {
    border: 7px solid rgb(153, 27, 27) !important; /* red-800 */
    border-radius: 20% !important;
  }
  
  /* Selected thumbnail should not hover */
  .thumbnail-selected:hover .thumbnail-inner {
    border: 7px solid rgb(153, 27, 27) !important; /* stay red */
    border-radius: 20% !important; /* stay square */
  }
}