/* CorporateX header signal: four real, independent workplace-story milestones. */

.cx-unified-signal {
  --cx-exit-duration: 8.8s;
  height: 32px;
  opacity: .94;
}

.cx-unified-signal::before {
  top: 21px;
  left: 5%;
  right: 5%;
  background: linear-gradient(90deg, transparent, rgba(246,200,79,.46) 10%, rgba(246,200,79,.24) 90%, transparent);
}

.cx-unified-signal i {
  top: 19px;
  width: 5px;
  height: 5px;
  opacity: .34;
  transform: scale(.84);
  color: rgba(221,215,203,.58);
  background: rgba(246,200,79,.78);
  box-shadow: 0 0 8px rgba(246,200,79,.24);
  animation-duration: var(--cx-exit-duration);
  /* Reset the legacy shell's negative delays. Every stop starts on the exact same clock as the traveller. */
  animation-delay: 0s !important;
  /* Milestones switch state only at arrival/departure keyframes; they never begin zooming while the traveller is between stops. */
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

.cx-unified-signal i::before {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-style: normal;
  font-size: 7.6px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .075em;
  white-space: nowrap;
  color: currentColor;
  text-shadow: 0 0 10px rgba(246,200,79,.08);
}

.cx-unified-signal i:nth-child(1) { left: 10%; animation-name: cx-exit-stop-one; }
.cx-unified-signal i:nth-child(1)::before { content: 'JOINED'; }

.cx-unified-signal i:nth-child(2) { left: 36%; animation-name: cx-exit-stop-two; }
.cx-unified-signal i:nth-child(2)::before { content: 'WHAT CHANGED'; }

.cx-unified-signal i:nth-child(3) { left: 64%; right: auto; animation-name: cx-exit-stop-three; }
.cx-unified-signal i:nth-child(3)::before { content: 'THE DECISION'; }

.cx-unified-signal i:nth-child(4) { left: 90%; animation-name: cx-exit-stop-four; }
.cx-unified-signal i:nth-child(4)::before { content: 'WHAT’S NEXT →'; }

/* One brighter point represents a person moving through the four independent milestones. */
.cx-unified-signal::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 4%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: #ffe18a;
  box-shadow: 0 0 10px rgba(255,225,138,.96), 0 0 22px rgba(246,200,79,.44);
  opacity: 0;
  pointer-events: none;
  animation: cx-exit-traveller var(--cx-exit-duration) cubic-bezier(.42,0,.2,1) 0s infinite;
}

@keyframes cx-exit-traveller {
  0% { left: 4%; opacity: 0; transform: scale(.55); }
  5% { opacity: .72; }
  11% { left: 10%; opacity: 1; transform: scale(1); }
  19% { left: 10%; opacity: 1; transform: scale(.92); }
  35% { left: 36%; opacity: 1; transform: scale(1); }
  43% { left: 36%; opacity: 1; transform: scale(.92); }
  59% { left: 64%; opacity: 1; transform: scale(1); }
  67% { left: 64%; opacity: 1; transform: scale(.92); }
  83% { left: 90%; opacity: 1; transform: scale(1); }
  91% { left: 90%; opacity: 1; transform: scale(.92); }
  98%, 100% { left: 96%; opacity: 0; transform: translateY(-2px) scale(.58); }
}

@keyframes cx-exit-stop-one {
  0%, 10.99% { opacity:.34; color:rgba(221,215,203,.58); transform:scale(.84); box-shadow:0 0 8px rgba(246,200,79,.20); }
  11%, 19% { opacity:1; color:#f7d56d; transform:scale(1.25); box-shadow:0 0 14px rgba(246,200,79,.68); }
  19.01%, 100% { opacity:.34; color:rgba(221,215,203,.58); transform:scale(.84); box-shadow:0 0 8px rgba(246,200,79,.20); }
}

@keyframes cx-exit-stop-two {
  0%, 34.99% { opacity:.34; color:rgba(221,215,203,.58); transform:scale(.84); box-shadow:0 0 8px rgba(246,200,79,.20); }
  35%, 43% { opacity:1; color:#f7d56d; transform:scale(1.25); box-shadow:0 0 14px rgba(246,200,79,.68); }
  43.01%, 100% { opacity:.34; color:rgba(221,215,203,.58); transform:scale(.84); box-shadow:0 0 8px rgba(246,200,79,.20); }
}

@keyframes cx-exit-stop-three {
  0%, 58.99% { opacity:.34; color:rgba(221,215,203,.58); transform:scale(.84); box-shadow:0 0 8px rgba(246,200,79,.20); }
  59%, 67% { opacity:1; color:#f7d56d; transform:scale(1.25); box-shadow:0 0 14px rgba(246,200,79,.68); }
  67.01%, 100% { opacity:.34; color:rgba(221,215,203,.58); transform:scale(.84); box-shadow:0 0 8px rgba(246,200,79,.20); }
}

@keyframes cx-exit-stop-four {
  0%, 82.99% { opacity:.34; color:rgba(221,215,203,.58); transform:scale(.84); box-shadow:0 0 8px rgba(246,200,79,.20); }
  83%, 91% { opacity:1; color:#f7d56d; transform:scale(1.25); box-shadow:0 0 14px rgba(246,200,79,.68); }
  91.01%, 100% { opacity:.34; color:rgba(221,215,203,.58); transform:scale(.84); box-shadow:0 0 8px rgba(246,200,79,.20); }
}

/* Mobile gets a dedicated strip below the logo/menu with four equally independent stops. */
@media (max-width: 920px) {
  .cx-unified-header { height: calc(var(--cx-shell-header-mobile) + 38px); }
  .cx-unified-header::after { display: none; }
  .cx-unified-header__inner { height: var(--cx-shell-header-mobile); }

  .cx-unified-signal {
    display: block !important;
    position: absolute;
    z-index: 4;
    left: 12px;
    right: 12px;
    bottom: 0;
    width: auto;
    min-width: 0;
    height: 38px;
    opacity: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(246,200,79,.025), rgba(5,6,8,0));
  }

  .cx-unified-signal::before { top: 27px; left: 5%; right: 5%; }
  .cx-unified-signal::after { top: 24px; }
  .cx-unified-signal i { top: 25px; }

  .cx-unified-signal i:nth-child(1) { left: 8%; }
  .cx-unified-signal i:nth-child(2) { left: 36%; }
  .cx-unified-signal i:nth-child(3) { left: 64%; }
  .cx-unified-signal i:nth-child(4) { left: 92%; }

  .cx-unified-signal i::before {
    top: -17px;
    font-size: 6.1px;
    letter-spacing: .035em;
  }

  .cx-unified-signal i:nth-child(4)::before {
    transform: translateX(-74%);
  }

  @keyframes cx-exit-traveller {
    0% { left:3%; opacity:0; transform:scale(.55); }
    5% { opacity:.72; }
    11% { left:8%; opacity:1; transform:scale(1); }
    19% { left:8%; opacity:1; transform:scale(.92); }
    35% { left:36%; opacity:1; transform:scale(1); }
    43% { left:36%; opacity:1; transform:scale(.92); }
    59% { left:64%; opacity:1; transform:scale(1); }
    67% { left:64%; opacity:1; transform:scale(.92); }
    83% { left:92%; opacity:1; transform:scale(1); }
    91% { left:92%; opacity:1; transform:scale(.92); }
    98%,100% { left:98%; opacity:0; transform:translateY(-2px) scale(.58); }
  }
}

@media (max-width: 390px) {
  .cx-unified-signal { left: 7px; right: 7px; }
  .cx-unified-signal i::before { font-size: 5.65px; letter-spacing: .015em; }
  .cx-unified-signal i:nth-child(4)::before { transform: translateX(-78%); }
}

@media (prefers-reduced-motion: reduce) {
  .cx-unified-signal::after { display: none; }
  .cx-unified-signal i {
    animation: none !important;
    opacity: .76;
    color: rgba(247,213,109,.86);
    transform: none;
  }
}