/* ==========================================================================
   Texium Solutions — Header Top Bar
   Consumes design tokens from theme.css only. No new raw values here.
   ========================================================================== */

.texium-topbar {
  background: var(--texium-surface-dark);
  color: var(--texium-text-inverse-muted);
}

.texium-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--texium-space-sm);
  padding-block: 4px;
  font-size: 0.6875rem;
  text-align: center;
}

.texium-topbar__label {
  flex-shrink: 0;
  font-weight: var(--texium-weight-semibold);
  color: var(--texium-text-inverse);
}

/* Ticker: one item shown at a time, block-flipping vertically via
   theme.js. Items are stacked in the same grid cell so the swap never
   shifts layout; the outgoing item flips up and out while the incoming
   item flips in from below. */

.texium-ticker {
  position: relative;
  display: grid;
  justify-items: center;
  min-width: 0;
  overflow: hidden;
}

.texium-ticker__item {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: var(--texium-space-sm);
  min-width: 0;
  max-width: 100%;
  opacity: 0;
  pointer-events: none;
  /* A full line of travel rather than a partial hop, so the item clears
     the row completely instead of appearing to pop mid-flight. */
  transform: translateY(115%);
  /* Slower than the old 280ms and eased so it decelerates into place:
     the change is meant to be noticed, not to snap. Opacity resolves
     faster than the movement so the text is readable for most of it. */
  transition:
    opacity 380ms ease,
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.texium-ticker__item.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.texium-ticker__item.is-leaving {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-115%);
}

/* Stagger the two parts so the row reads as a headline followed by its
   button, rather than one rigid block sliding past. */

.texium-ticker__item > * {
  transition:
    opacity 380ms ease,
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.texium-ticker__item .texium-ticker__link {
  transition-delay: 90ms;
}

.texium-ticker__item:not(.is-active) .texium-ticker__title {
  opacity: 0;
  transform: translateY(28%);
}

.texium-ticker__item:not(.is-active) .texium-ticker__link {
  opacity: 0;
  transform: translateY(38%) scale(0.94);
}

.texium-ticker__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--texium-weight-semibold);
  color: var(--texium-text-inverse);
}

.texium-ticker__link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: var(--texium-radius-pill);
  background: var(--texium-primary-light);
  color: var(--texium-text-inverse);
  font-size: 0.6875rem;
  font-weight: var(--texium-weight-semibold);
  text-decoration: none;
  transition: background-color var(--texium-transition-fast);
}

.texium-ticker__link:hover {
  background: var(--texium-accent);
}

.texium-ticker__link:focus-visible {
  outline: 2px solid var(--texium-accent);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .texium-topbar__label {
    display: none;
  }

  .texium-ticker__title {
    max-width: 40vw;
  }
}

/* Auto-advancing content is itself a motion preference: theme.js holds
   the ticker on its first item, and these transitions are stilled so a
   resize or class change cannot animate either. */

@media (prefers-reduced-motion: reduce) {
  .texium-ticker__item,
  .texium-ticker__item > * {
    transition-duration: 1ms;
    transition-delay: 0ms;
  }
}