/* Announcement banner, ported from content-rewards-v2 (apps/web/src/components/_common/announcement-banner.tsx)
   in Sonlum burgundy. 40px bar: radial bloom over a linear gradient, a faint grain, a top highlight hairline and a
   bottom glint, then the message, a thin divider and a link whose arrow nudges on hover. */
.sn-announce {
  position: relative; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  min-height: 40px; width: 100%; padding: 0 44px;
  background:
    radial-gradient(70% 200% at 25% -40%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 65%),
    linear-gradient(90deg, #2a0912 0%, #2a0912 70%, #3b0f1c 100%);
  box-shadow: 0 0 5px rgba(0, 0, 0, .25);
  color: #fff;
  font-family: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
}
[dir="rtl"] .sn-announce {
  background:
    radial-gradient(70% 200% at 75% -40%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 65%),
    linear-gradient(270deg, #2a0912 0%, #2a0912 70%, #3b0f1c 100%);
  font-family: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
}
.sn-announce[hidden] { display: none; }
.sn-announce-grain, .sn-announce-top, .sn-announce-bottom { position: absolute; pointer-events: none; }
.sn-announce-grain {
  inset: 0; opacity: .09; mix-blend-mode: multiply; background-size: 200px 200px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.sn-announce-top { inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0) 100%); }
.sn-announce-bottom { inset: auto 0 0; height: 1px; background: radial-gradient(13% 2282% at 20.4% 0%, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 100%); }
[dir="rtl"] .sn-announce-bottom { background: radial-gradient(13% 2282% at 79.6% 0%, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 100%); }

.sn-announce-body { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 10px 0; text-align: center; }
.sn-announce-text { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -.011em; }
[dir="rtl"] .sn-announce-text { letter-spacing: 0; }
.sn-announce-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .3); flex: none; }
.sn-announce-link { display: inline-flex; align-items: center; gap: 6px; color: #fff; opacity: .72; text-decoration: none; font-size: 14px; line-height: 20px; white-space: nowrap; transition: opacity .2s ease; }
.sn-announce-link:hover, .sn-announce-link:focus-visible { opacity: 1; }
.sn-announce-link svg { width: 12px; height: 12px; transition: transform .2s ease; }
[dir="rtl"] .sn-announce-link svg { transform: scaleX(-1); }
.sn-announce-link:hover svg { transform: translateX(2px); }
[dir="rtl"] .sn-announce-link:hover svg { transform: scaleX(-1) translateX(2px); }

.sn-announce-x {
  position: absolute; top: 50%; inset-inline-end: 8px; z-index: 2; transform: translateY(-50%);
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none;
  color: rgba(255, 255, 255, .7); cursor: pointer; transition: color .2s ease;
}
.sn-announce-x:hover { color: #fff; }
.sn-announce-x svg { width: 10px; height: 10px; }
.sn-announce :focus-visible { outline: 2px solid #f6eee1; outline-offset: 2px; border-radius: 4px; }

@media (max-width: 520px) {
  .sn-announce { padding: 0 40px; }
  .sn-announce-body { gap: 8px; flex-wrap: wrap; justify-content: center; row-gap: 0; }
  .sn-announce-text, .sn-announce-link { font-size: 13px; line-height: 18px; }
  .sn-announce-sep { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sn-announce-link, .sn-announce-link svg, .sn-announce-x { transition: none; } }