/* =========================================================
   CoinRaw — BBC-style ROTATING announcement banner
   One headline visible at a time, cycles with fade/slide.
   Theme: dark + gold to match the site.
   ========================================================= */

.ann-ticker{
  position:sticky; top:0; left:0; right:0;
  z-index:1100;
  display:flex; align-items:stretch;
  height:44px;
  background:
    radial-gradient(1200px 60px at 20% 0%, rgba(255,210,74,.12), transparent 60%),
    linear-gradient(90deg,#0b0d12 0%,#11141b 50%,#0b0d12 100%);
  color:#f5e7b2;
  border-bottom:1px solid rgba(255,210,74,.25);
  box-shadow:0 2px 14px rgba(0,0,0,.45);
  font-family:inherit;
  overflow:hidden;
}
.ann-ticker::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg,transparent 40%,rgba(255,210,74,.08) 50%,transparent 60%);
  background-size:200% 100%;
  animation:annSheen 8s linear infinite;
}
@keyframes annSheen{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Red BREAKING pill with chevron edge (BBC vibe) */
.ann-ticker-tag{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:8px;
  padding:0 18px 0 14px;
  background:linear-gradient(180deg,#d11a1a,#9b0e0e);
  color:#fff; font-weight:800; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase;
  position:relative;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.25);
  z-index:2;
}
.ann-ticker-tag::after{
  content:""; position:absolute; top:0; right:-14px; bottom:0;
  width:0; height:0;
  border-top:22px solid transparent;
  border-bottom:22px solid transparent;
  border-left:14px solid #9b0e0e;
}
.ann-ticker-pulse{
  width:8px; height:8px; border-radius:50%;
  background:#fff;
  animation:annPulse 1.4s ease-out infinite;
}
@keyframes annPulse{
  0%  { box-shadow:0 0 0 0 rgba(255,255,255,.8) }
  70% { box-shadow:0 0 0 10px rgba(255,255,255,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0) }
}

/* Rotating viewport — only one item visible at a time */
.ann-ticker-stage{
  flex:1 1 auto; min-width:0;
  position:relative;
  margin-left:22px; margin-right:8px;
  overflow:hidden;
  align-self:stretch;
}
.ann-ticker-item{
  position:absolute; left:0; right:12px; top:0; bottom:0;
  display:flex; align-items:center; gap:10px;
  opacity:0;
  transform:translateY(100%);
  transition:opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1);
  white-space:nowrap;
  overflow:hidden;
  pointer-events:none;
}
.ann-ticker-item.is-in{
  opacity:1; transform:translateY(0);
  pointer-events:auto;
}
.ann-ticker-item.is-out{
  opacity:0; transform:translateY(-100%);
}
.ann-ticker-item a{
  display:inline-flex; align-items:center; gap:10px;
  color:inherit; text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:100%;
}
.ann-ticker-item a:hover .ann-ticker-title{ text-decoration:underline; }

.ann-ticker-dot{
  width:6px; height:6px; border-radius:50%;
  background:#ffd24a;
  box-shadow:0 0 8px rgba(255,210,74,.7);
  flex:0 0 auto;
}
.ann-ticker-title{
  color:#ffd24a; font-weight:700; letter-spacing:.02em;
  font-size:13.5px;
}
.ann-ticker-title::after{ content:" — "; color:rgba(255,210,74,.55); font-weight:400; }
.ann-ticker-msg{
  color:#eadfb8; font-weight:400; font-size:13.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Tiny progress bar under the headline */
.ann-ticker-progress{
  position:absolute; left:0; bottom:0; height:2px;
  width:0%; background:linear-gradient(90deg,#ffd24a,#ffb648);
  box-shadow:0 0 6px rgba(255,210,74,.6);
  z-index:3;
}

/* Dismiss */
.ann-ticker-x{
  flex:0 0 auto;
  width:38px; height:44px;
  background:transparent; color:#ffd24a;
  border:0; border-left:1px solid rgba(255,210,74,.18);
  cursor:pointer; font-size:20px; line-height:1;
  transition:background .2s, color .2s;
}
.ann-ticker-x:hover{ background:rgba(255,210,74,.1); color:#fff; }

@media (max-width:640px){
  .ann-ticker{ height:40px; }
  .ann-ticker-tag{ font-size:11px; padding:0 14px 0 10px; }
  .ann-ticker-tag::after{ border-top-width:20px; border-bottom-width:20px; right:-12px; border-left-width:12px; }
  .ann-ticker-title,.ann-ticker-msg{ font-size:12.5px; }
  .ann-ticker-x{ width:34px; height:40px; }
}

@media (prefers-reduced-motion: reduce){
  .ann-ticker-item{ transition:opacity .2s linear; transform:none !important; }
  .ann-ticker::after{ animation:none; }
}