:root { --promo-h: 35px; } 

.promo-drum-wrap{
  position: sticky;
  top: 0;
  z-index: 9999;
  height: var(--promo-h);
  background: black;;
  border-bottom: 1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* “окошко” барабана */
.promo-drum-scene{
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective: 900px;
}

.promo-face{
  color:#FFF1B8;
  text-decoration:none;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;

  /* чтоб клик был по всей области */
  height: 100%;
  padding: 0 14px;
}

/* текст как “плашка”, чтобы барабан выглядел ровно */
.promo-text{
  display:inline-block;
  line-height: var(--promo-h);
  height: var(--promo-h);
  white-space: nowrap;

  transform-origin: 50% 50%;
  transform-style: preserve-3d;

  /* чуть “вперёд” к камере */
  transform: translateZ(2px);
}

/* desk-like rotate */
.flip-out { animation: promoFlipOut .26s cubic-bezier(.2,.8,.2,1) forwards; }
.flip-in  { animation: promoFlipIn  .30s cubic-bezier(.2,.8,.2,1) forwards; }

@keyframes promoFlipOut{
  0%   { opacity:1; transform: translateZ(2px) rotateX(0deg); filter: blur(0px); }
  100% { opacity:0; transform: translateZ(2px) rotateX(90deg); filter: blur(0.6px); }
}

@keyframes promoFlipIn{
  0%   { opacity:0; transform: translateZ(2px) rotateX(-90deg); filter: blur(0.8px); }
  100% { opacity:1; transform: translateZ(2px) rotateX(0deg);  filter: blur(0px); }
}

/* мобилка: чуть выше, чтобы читалось */
@media (max-width: 576px){ 
  .promo-face{ font-weight: 700; }
}