.okam-announcement {
  display: block;
  width: 100%;
  background: linear-gradient(90deg, #ff8a1f, #ffb347);
  color: #111;
  text-decoration: none;
  overflow: hidden;
  position: relative;
  z-index: 10000;
}

.okam-announcement[hidden] {
  display: none !important;
}

.okam-announcement--warning {
  background: linear-gradient(90deg, #b91c1c, #dc2626);
  color: #fff;
}

.okam-announcement__viewport {
  overflow: hidden;
  width: 100%;
}

.okam-announcement__track {
  display: inline-flex;
  white-space: nowrap;
  animation: okam-announcement-marquee var(--okam-marquee-duration, 28s) linear infinite;
}

.okam-announcement:hover .okam-announcement__track {
  animation-play-state: paused;
}

.okam-announcement__text {
  display: inline-block;
  padding: 10px 24px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

@keyframes okam-announcement-marquee {
  0% {
    transform: translate(0);
  }

  to {
    transform: translate(-50%);
  }
}

body.has-okam-announcement {
  --okam-announcement-height: 40px;
}