@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

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


@keyframes scrollTicker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-scroll {
  animation: scrollTicker 40s linear infinite;
  display: flex;
  width: max-content;
  will-change: transform;
}

@media (hover: hover) {
  .group:hover .animate-scroll {
    animation-play-state: paused;
  }
}

@media (max-width: 767px) {
  .animate-scroll {
    animation: none !important;
    transform: none !important;
  }

  #event-ticker-wrapper {
    transform: none !important;
  }

  #ticker-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #event-ticker-clone {
    display: none;
  }
}

@keyframes border-gradient {
  0% {
    border-image-source: linear-gradient(to right, red, orange);
  }
  50% {
    border-image-source: linear-gradient(to right, orange, red);
  }
  100% {
    border-image-source: linear-gradient(to right, red, orange);
  }
}

.header-gradient-border {
  border-bottom: 4px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, red, orange);
  animation: border-gradient 4s linear infinite;
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .animate-fade-in {
    animation: fade-in 0.5s ease-in-out forwards;
  }

  @media (max-width: 640px) {
    #event-rotator {
      height: 340px;
    }
  }

  .backdrop-blur {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* for Safari */
}