@font-face {
  font-family: "SinnerWide";
  src: url("https://cdn.shopify.com/s/files/1/0604/9447/9459/files/OGJ_Type_Design_-_Sequel_100_Wide_55_Wide.woff?v=1729146671") format("woff");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "SinnerWide";
  src: url("https://cdn.shopify.com/s/files/1/0604/9447/9459/files/OGJ_Type_Design_-_Sequel_100_Wide_95_Wide.woff?v=1729146209") format("woff");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  --sinner-red: #ec2c44;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
  background: #555;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sinner-red);
}

/* Drawer Transition Classes */
.drawer-open {
  transform: translateX(0) !important;
}

.overlay-open {
  display: block !important;
}

/* Base overrides */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
}

button,
input,
label {
  border-radius: 0;
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

.animate-shake {
  animation: shake 0.5s ease-in-out infinite;
}

.ticker-name {
  transition: filter 220ms ease, opacity 220ms ease, transform 220ms ease, color 220ms ease;
}

.ticker-name--winner {
  filter: blur(0);
  opacity: 1;
  transform: scale(1);
}