/* Tribal Tonight: New Look ticker. Scoped to .tt-renovation. */
.tt-renovation-wrap {
  width: 100%;
  max-width: 1040px;
  min-width: 0;
  margin: 0 auto;
  padding: 12px 28px 0;
  box-sizing: border-box;
}

.is-camp .page > .tt-renovation + header.site {
  padding-top: 6px;
}

@media (max-width: 900px) {
  .tt-renovation-wrap {
    padding: 8px 16px 0;
  }
}

.tt-renovation {
  display: block;
  width: 100%;
  max-width: min(1240px, 100%);
  min-width: 0;
  margin: 12px auto 0;
  box-sizing: border-box;
  position: relative;
  z-index: 3;
  isolation: isolate;
  aspect-ratio: 2400 / 188;
  background: url("/ticker/ticker-desktop-no-flame.png") center / 100% 100% no-repeat;
  color: #2b180b;
}

.tt-renovation__marquee {
  position: absolute;
  top: 29%;
  bottom: 23%;
  left: 9.7%;
  right: 6%;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 2.5%, black 97.5%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 2.5%, black 97.5%, transparent);
}

.tt-renovation__track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  animation: tt-renovation-scroll 24s linear infinite;
  will-change: transform;
}

.tt-renovation__unit {
  display: inline-flex;
  flex: none;
  align-items: center;
  column-gap: 2rem;
  padding-inline-end: 2rem;
  color: #29170b;
  font-family: Impact, "Arial Narrow", "Roboto Condensed", sans-serif;
  font-size: clamp(12px, 1.55vw, 23px);
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(254, 224, 149, 0.58);
}

.tt-renovation__unit .tt-renovation__spark {
  color: #8f5023;
  font-size: 0.76em;
  letter-spacing: 0;
}

.tt-renovation:hover .tt-renovation__track,
.tt-renovation:focus-within .tt-renovation__track,
.tt-renovation[data-paused="true"] .tt-renovation__track {
  animation-play-state: paused;
}

@keyframes tt-renovation-scroll {
  to {
    transform: translateX(-50%);
  }
}

.tt-renovation__flame {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  background: url("/ticker/torch-flame-sprite-12.png") left top / 1200% 100% no-repeat;
  animation: tt-renovation-flame 1.02s steps(12, end) infinite;
  aspect-ratio: 180 / 224;
  height: 53%;
  width: auto;
  left: 4.85%;
  top: -4%;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 5px rgba(255, 126, 21, 0.32));
}

@keyframes tt-renovation-flame {
  from {
    background-position-x: 0%;
  }
  to {
    background-position-x: 109.090909%;
  }
}

@media (max-width: 620px) {
  .tt-renovation-wrap {
    padding: 8px 10px 0;
  }

  .tt-renovation {
    aspect-ratio: 1000 / 188;
    background-image: url("/ticker/ticker-mobile-no-flame.png");
  }

  .tt-renovation__marquee {
    top: 29%;
    bottom: 24%;
    left: 23%;
    right: 12%;
  }

  .tt-renovation__unit {
    font-size: clamp(11px, 3.3vw, 15px);
    column-gap: 1rem;
    padding-inline-end: 1rem;
  }

  .tt-renovation__flame {
    left: 11.7%;
    top: -4%;
    height: 53%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tt-renovation__track {
    animation: none;
  }

  .tt-renovation__flame {
    background-image: url("/ticker/torch-flame-static.png");
    background-position: center;
    background-size: 100% 100%;
    animation: none;
  }
}