.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 24
}
.text-wrapper{
  display: block;
  height: 80px;
  overflow: hidden;
  background: #f05e00;
  background: linear-gradient(90deg, #F2BA01 0%, #F5B203 14.29%, #F8A908 28.57%, #FBA00F 42.86%, #FD9817 57.14%, #FE8F1E 71.43%, #FF8624 85.71%, #FF7D2A 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-wrapper span{
    display: block;
    height: 80px;
    color: #f05e00;
    background: #f05e00;
    background: linear-gradient(90deg, #F2BA01 0%, #F5B203 14.29%, #F8A908 28.57%, #FBA00F 42.86%, #FD9817 57.14%, #FE8F1E 71.43%, #FF8624 85.71%, #FF7D2A 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: spin_words 8s linear infinite;
    animation-delay: calc(var(--i) * -1s);
}

.fade-in { animation: fadeIn 0.25s ease forwards; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* Animated number count-up */
.score-value {
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -3px;
  color: white;
}
/* Rating bar fill animation */
.bar-fill {
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
    
@keyframes spin_words {
  0%, 20% {
    transform: translateY(0%);
  }
  25%, 45% {
    transform: translateY(-100%);
  }
  50%, 70% {
    transform: translateY(-200%);
  }
  75%, 100% {
    transform: translateY(0%);
  }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}