whyrating/packages/ui/web/src/styles/globals.css

@import "tw-animate-css";
@plugin "@tailwindcss/typography";

@theme inline {
  --animate-marquee: marquee var(--duration) infinite linear;
  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
  --animate-fade-in: fade-in 1s var(--animation-delay, 0s) ease forwards;
  --animate-fade-up: fade-up 1s var(--animation-delay, 0s) ease forwards;
  --animate-image-glow: image-glow 4.1s ease-out 1s forwards;
  --animate-pulse-ring: pulse-ring 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-voice-bars: voice-bars 0.5s ease-in-out infinite;

  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }
  @keyframes marquee-vertical {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(calc(-100% - var(--gap)));
    }
  }

  @keyframes fade-in {
    0% {
      opacity: 0;
      translate: 0 -10px;
      filter: blur(4px);
    }
    100% {
      opacity: 1;
      translate: 0 0;
      filter: blur(0px);
    }
  }
  @keyframes fade-up {
    0% {
      opacity: 0;
      translate: 0 20px;
      filter: blur(4px);
    }
    100% {
      opacity: 1;
      translate: 0 0;
      filter: blur(0px);
    }
  }
  @keyframes image-glow {
    0% {
      opacity: 0;
      animation-timing-function: cubic-bezier(0.74, 0.25, 0.76, 1);
    }
    10% {
      opacity: 0.7;
      animation-timing-function: cubic-bezier(0.12, 0.01, 0.08, 0.99);
    }
    100% {
      opacity: 0.4;
    }
  }

  @keyframes pulse-ring {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    50% {
      box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
  }

  @keyframes voice-bars {
    0%, 100% {
      transform: scaleY(0.3);
    }
    50% {
      transform: scaleY(1);
    }
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  html {
    overscroll-behavior: none;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  body {
    @apply bg-background text-foreground;
  }

  ::selection {
    @apply bg-primary text-background;
  }

  ::-webkit-scrollbar {
    @apply h-2 w-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-muted/30;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-muted-foreground/20 rounded-lg;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-muted-foreground/40;
  }
}

@utility container {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 2rem;

  @variant 2xl {
    max-width: 1400px;
  }
}