/* ==========================================================================
   Announcement bar — design.md §6.1: thin, rotating text
   ========================================================================== */

.announce {
  position: relative;
  z-index: calc(var(--z-header) + 1);
  border-bottom: var(--ink-w) solid var(--u-ink);
  background: var(--u-primary);
  color: var(--on-primary);
  transition: background-color var(--t-slow) var(--ease-out);
}

.announce__viewport {
  display: grid;
  place-items: center;
  height: 40px;
  overflow: hidden;
}

.announce__list {
  display: grid;
  /* Every item occupies the same cell; only one is visible at a time. */
  grid-template-areas: 'slot';
  place-items: center;
}

.announce__item {
  grid-area: slot;
  padding-inline: 1rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
}

/* Every item shares one grid cell, so only the rotator may reveal the rest.
   Keyed off .is-rotating (set when the timeline actually starts) rather than
   html.is-ready — under reduced motion JS is ready but the rotation never
   runs, which would leave all four lines stacked on top of each other. */
.announce__item:not(:first-child) { visibility: hidden; }
.announce.is-rotating .announce__item:not(:first-child) { visibility: visible; }

@media (max-width: 480px) {
  .announce__item { font-size: 0.75rem; white-space: normal; }
  .announce__viewport { height: 44px; }
}