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


@font-face {
  font-family: 'Mona Sans';
  src: url('/fonts/Mona_Sans/MonaSans-VariableFont_wdth,wght.ttf') format('truetype-variations');
  font-weight: 200 900; 
  font-stretch: 75% 150%; 
  font-style: normal;
  font-display: swap; 
}

@font-face {
  font-family: 'Mona Sans';
  src: url('/fonts/Mona_Sans/MonaSans-Italic-VariableFont_wdth,wght.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-stretch: 75% 150%;
  font-style: italic; 
  font-display: swap;
}

.grid-background {
  background-size: 202px 202px;
  background-image: linear-gradient(
      to right,
      rgba(124, 117, 120, 0.186) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(124, 117, 120, 0.186) 1px, transparent 1px);
}

.dark .grid-background {
  background-image: linear-gradient(
      to right,
      rgba(85, 51, 67, 0.122) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(85, 51, 76, 0.152) 1px, transparent 1px);
}

* {
  transition: background-color 0.3s ease, border-color 0.3s ease,
    color 0.3s ease;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@keyframes rotate-gradient {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.story-gradient {
  position: relative;
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  animation: rotate-gradient 3s linear infinite;
}

.story-ring::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotate-gradient 3s linear infinite;
}

.vote-btn {
  transition: all 0.2s ease;
}
.vote-btn:hover {
  transform: scale(1.1);
}
.vote-btn.active-up {
  color: #10b981;
}
.vote-btn.active-down {
  color: #ef4444;
}

@keyframes pulse-slow {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.playing-animation {
  animation: pulse-slow 2s ease-in-out infinite;
}

.pinned-glow {
  box-shadow: 0 0 20px rgba(233, 14, 61, 0.3);
}

.dark .pinned-glow {
  box-shadow: 0 0 20px rgba(233, 14, 80, 0.2);
}