/* Basic CSS file to ensure proper loading of styles */

/* Ensure proper favicon and icon handling */
.icon {
  width: 16px;
  height: 16px;
}

/* Basic body styling */
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Responsive image handling */
img {
  max-width: 100%;
  height: auto;
}

/* Hide elements that should not be visible */
.hidden {
  display: none !important;
}

/* Custom animations for poll voting */
@keyframes fill-progress {
  0% {
    width: 0%;
  }
  100% {
    width: var(--target-width);
  }
}

@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
  }
}

@keyframes vote-select {
  0% {
    transform: scale(1);
    background-color: transparent;
  }
  50% {
    transform: scale(1.02);
    background-color: rgba(99, 102, 241, 0.1);
  }
  100% {
    transform: scale(1);
    background-color: rgba(99, 102, 241, 0.15);
  }
}

.animate-fill-progress {
  animation: fill-progress 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-pulse-glow {
  animation: pulse-glow 1s cubic-bezier(0.4, 0, 0.6, 1);
}

.animate-vote-select {
  animation: vote-select 0.3s ease-out;
}