/* ==========================================================
   ✅ Announcement bar (FIXED marquee)
========================================================== */

.announce-bar{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(135deg,
    rgba(56,189,248,.18),
    rgba(255,79,167,.14),
    rgba(251,191,36,.14)
  );
  box-shadow:0 16px 40px rgba(0,0,0,0.08);
  padding:10px 12px;
  overflow:hidden;
  position:relative;
}
.announce-bar::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:linear-gradient(90deg,
    transparent,
    rgba(109,40,217,.35),
    rgba(255,79,167,.30),
    rgba(56,189,248,.35),
    transparent
  );
  opacity:.65;
}

.announce-tag{
  font-weight:1000;
  font-size:12.5px;
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  color:var(--ink);
  white-space:nowrap;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
}

.announce-marquee{
  flex:1;
  overflow:hidden;
  position:relative;

  /* ✅ soft fade edges (premium) */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

.announce-move{
  display:flex;
  width:max-content;
  animation: marquee var(--marquee-speed-desktop) linear infinite;
  will-change: transform;
}

.announce-track{

    display:flex;

    align-items:center;

    flex-shrink:0;

    white-space:nowrap;

    padding-right:80px;

}

.announce-track span{

    display:inline-block;

    white-space:nowrap;

    background:none;

    border:none;

    box-shadow:none;

    padding:0;

    font-size:14px;

    font-weight:700;

    color:#1f2937;

    line-height:1;

}
@keyframes marquee{
  0%{ transform:translate3d(0,0,0); }
  100%{ transform:translate3d(-50%,0,0); }
}

@media(max-width:768px){
  .announce-move{
    animation-duration: var(--marquee-speed-mobile) !important;
  }
}

@media(hover:hover){
  .announce-marquee:hover .announce-move{
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce){
  .announce-move{
    animation:none !important;
    transform:none !important;
  }
}