/*
 * Claw — Announcement bar: "Hello, beautiful" greeting marquee
 * ─────────────────────────────────────────────────────────────────────────────
 * A slim Terracotta strip that CAPS the floating header pill: same horizontal
 * inset as .header-main (header.css) and the matching radius on top, so bar +
 * pill read as one detached capsule instead of the bar overhanging the pill's
 * rounded corners.
 *
 * Content is a continuously drifting greeting — "Hello, beautiful" in many
 * languages — built on the house marquee idiom (cl-faces, clinique.css): the
 * track holds the set twice so translateX(-50%) loops seamlessly, hover pauses
 * it, and an edge mask fades phrases in/out at the capsule margins. The strip
 * is decorative (aria-hidden in markup, .sr-only greeting for readers). No
 * reduced-motion handling here — the global flattener was removed and Claw's
 * motion rules are being redefined; add a local gate if the new rules call
 * for one.
 *
 * The bar sits in normal flow — never sticky — so it scrolls away and
 * .site-header docks to top:0 beneath it. Per-session dismiss markup is gone
 * (a greeting needs no ×) but the --dismissed hook stays for booking-cta.js's
 * sessionStorage guard. Bone-on-Terracotta only; letter-spacing is dropped on
 * Arabic (tracking breaks cursive joining).
 */

.announcement-bar {
  /* Mirror the .header-main pill inset (header.css) so bar + pill stack into
     one capsule. Flush and SQUARE against the viewport top (owner) — the
     capsule's only rounding is the pill's bottom radius. */
  margin: 0 clamp(8px, 1.4vw, 20px);
  border-radius: 0;
  background: var(--color-terracotta);
  color: var(--color-bg);
  overflow: hidden;
}

/* Dismissed for the session (booking-cta.js sessionStorage guard). */
.announcement-bar--dismissed {
  display: none;
}

/* ─── Marquee viewport — clips the track, fades the edges ────────────────────── */

.announcement-bar__marquee {
  display: flex;
  align-items: center;
  min-height: 44px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* ─── Track — the doubled set, drifting left ─────────────────────────────────── */
/* Item→dot→item gap is uniform within sets AND across the set boundary (same
   flex gap on track and set), so the -50% loop point is invisible. */

.announcement-bar__track,
.announcement-bar__set {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.announcement-bar__track {
  width: max-content;
  padding-block: var(--space-3xs);
  animation: announcement-marquee 56s linear infinite;
  will-change: transform;
}

.announcement-bar__marquee:hover .announcement-bar__track {
  animation-play-state: paused;
}

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

/* ─── Greeting phrases — house label caps, Bone on Terracotta ────────────────── */
/* Non-latin scripts fall back from Hanken to system sans per their lang tag;
   uppercase/tracking are no-ops where the script has no case. */

.announcement-bar__item {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem; /* 13px — Caption/label */
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bg);
}

/* Tracking would disconnect Arabic's joined letterforms — keep it solid. */
.announcement-bar__item[lang="ar"] {
  letter-spacing: 0;
}

/* ─── Separator — the house accent dot, knocked back in Bone ─────────────────── */

.announcement-bar__dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-bone) 55%, transparent);
}