/* SH-03 News ticker — identity styles (marquee physics + brand defaults).
   Dimensional/colour choices are element defaults overridable via the controls. */
.breakdance .essma-ticker {
  /* Section-ready: full-bleed band whether placed at the header root OR inside
     a (boxed) Breakdance Section — breaks out to the viewport edges so the bar
     always spans full width. The green label still aligns to the 1280 logo
     column via padding-left (now measured against the full viewport). */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  align-items: stretch;
  background: var(--navy, #1B4185);
  color: #cdd6e6;
  overflow: hidden;
  position: relative;
  padding-left: max(24px, calc((100% - 1280px) / 2 + 24px));
}
/* Leading label pill (e.g. "Latest news") — fixed at the left while items scroll. */
.breakdance .essma-ticker__label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--green, #5DB04A);
  color: #fff;
  padding: 0 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.breakdance .essma-ticker__dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; flex-shrink: 0; }
.breakdance .essma-ticker .essma-ticker__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.breakdance .essma-ticker .essma-ticker__track {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  white-space: nowrap;
  width: max-content;
  padding: 11px 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  animation: essma-tick 34s linear infinite;
  will-change: transform;
}
.breakdance .essma-ticker .essma-ticker__track:hover {
  animation-play-state: paused;
}
.breakdance .essma-ticker .essma-ticker__item {
  color: inherit;
  text-decoration: none;
}
.breakdance .essma-ticker .essma-ticker__item b { color: #fff; font-weight: 700; }
.breakdance .essma-ticker .essma-ticker__sep { color: var(--green, #5DB04A); }

@keyframes essma-tick {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .breakdance .essma-ticker .essma-ticker__track { animation: none; }
}