/* ============ ANNOUNCEMENT BAR ============
   Terukur: tinggi 3.2rem di semua viewport, bg #0000C9, teks putih,
   family mono, ls -0.06em. Tidak ada tombol tutup, dan hanya satu
   pesan. Di bawah 1024 pesan yang sama dirender TIGA KALI lalu digeser
   sebagai marquee; di 1024 ke atas cuma satu span statis di tengah. */
.banner {
  height: 3.2rem;
  /* Rebranding obsidian chrome. Angka terukur #0000C9 di atas adalah
     catatan hasil ukur Coterie dan sengaja dibiarkan sebagai riwayat,
     bukan sebagai nilai yang dipakai.

     Sudutnya 90deg, jadi gradiennya mengalir kiri ke kanan. Di bidang
     setinggi 3.2rem, sudut miring apa pun akan habis dalam 38 piksel
     dan terbaca seperti garis, bukan gradasi.

     Titik terang pucat SENGAJA tidak dipakai di sini. Pesannya
     bergerak melintasi seluruh lebar, jadi tidak ada cara menjauhkan
     teks putih dari bagian terang. Yang dipakai cuma gradasi
     slate ke onyx, dan titik paling terangnya 5,5:1 dengan putih.

     GRADIENNYA DITULIS UTUH DI SINI, bukan var(--glass-surface-flat).
     Bukan karena malas: var() di dalam custom property diselesaikan di
     elemen tempat property itu DIDEKLARASIKAN, jadi --glass-angle
     yang ditimpa di sini tidak akan pernah terbaca dan sudutnya
     diam diam tetap 145deg milik :root. Warnanya tetap dari token,
     yang lokal cuma sudutnya. */
  background: linear-gradient(90deg, var(--glass-mid) 0%, var(--glass-deep) 100%);
  color: var(--white);
  display: flex;
  align-items: center;
  overflow: clip;
  white-space: nowrap;
  /* Terukur @900 dan @375: padding-left 5rem, dan justify-content
     TIDAK center di bawah 1024. Marquee mulai dari tepi kiri. */
  padding-left: 5rem;
}
.banner__msg {
  /* mono-10 Coterie: clamp(11px, 1rem, 10px). Lantai 11px menang di
     ketiga viewport, jadi hasilnya 11px @375, 11px @900, 11px @1280. */
  font-family: var(--font-mono-ui);
  font-size: clamp(11px, 1rem, 10px);
  letter-spacing: -0.06em;
  line-height: 1.4;
  padding-right: 5rem;
}
/* Marquee: translateX(0) ke translateX(-100%), 15.5s linear infinite.
   Durasi 15.5s terbaca dari style inline Coterie di ketiga span. */
@keyframes bannerLoop {
  from {
    transform: translateX(0) translateZ(0);
  }
  to {
    transform: translateX(-100%) translateZ(0);
  }
}
.banner__msg--static {
  display: none;
}
.banner__msg--loop {
  animation: bannerLoop 15.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .banner__msg--loop {
    animation: none;
  }
}
@media (min-width: 1024px) {
  .banner {
    justify-content: center;
    padding-left: 0;
  }
  /* lg:mono-12 Coterie: clamp(12px, 1.2rem, 12px). Selalu 12px. */
  .banner__msg {
    font-size: clamp(12px, 1.2rem, 12px);
    padding-right: 0;
  }
  .banner__msg--static {
    display: block;
  }
  .banner__msg--loop {
    display: none;
  }
}