/* ============================================
   CLIENT LOGOS CONSTELLATION
   Subtle floating logos around marketing intelligence section
   ============================================ */

/* Container positioned relative to the major transition timeline card */
.timeline-item.major-transition {
  position: relative;
}

/* Position logos behind the year label */
.timeline-item.major-transition .timeline-year {
  position: relative;
  z-index: 2;
}

/* Constellation container - positioned to align with year label column */
.client-logos-constellation {
  position: absolute;
  top: 0;
  left: -20px;
  width: 450px; /* Another 50% wider spread for logos */
  height: 100%;
  pointer-events: none;
  z-index: 0; /* Behind year label */
}

/* Individual constellation logos */
.constellation-logo {
  position: absolute;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(0.4);
  transition: opacity 0.3s ease;
}

/* Ensure timeline content stays above constellation */
.timeline-item.major-transition .timeline-content {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  padding: var(--spacing-lg);
  backdrop-filter: blur(2px);
}

/* Randomly float logos on the left side, mirroring the card shape */
.constellation-logo:nth-child(1) { top: 5%; left: 10%; width: 55px; height: 40px; opacity: 0.35; }
.constellation-logo:nth-child(2) { top: 12%; left: 65%; width: 60px; height: 45px; opacity: 0.40; }
.constellation-logo:nth-child(3) { top: 8%; left: 40%; width: 50px; height: 37px; opacity: 0.28; }
.constellation-logo:nth-child(4) { top: 18%; left: 25%; width: 58px; height: 42px; opacity: 0.32; }
.constellation-logo:nth-child(5) { top: 22%; left: 75%; width: 52px; height: 38px; opacity: 0.26; }
.constellation-logo:nth-child(6) { top: 28%; left: 50%; width: 56px; height: 40px; opacity: 0.29; }
.constellation-logo:nth-child(7) { top: 32%; left: 15%; width: 60px; height: 45px; opacity: 0.27; }
.constellation-logo:nth-child(8) { top: 38%; left: 60%; width: 54px; height: 39px; opacity: 0.31; }
.constellation-logo:nth-child(9) { top: 42%; left: 30%; width: 62px; height: 45px; opacity: 0.24; }
.constellation-logo:nth-child(10) { top: 48%; left: 70%; width: 48px; height: 35px; opacity: 0.28; }
.constellation-logo:nth-child(11) { top: 52%; left: 20%; width: 57px; height: 42px; opacity: 0.26; }
.constellation-logo:nth-child(12) { top: 58%; left: 55%; width: 59px; height: 44px; opacity: 0.30; }
.constellation-logo:nth-child(13) { top: 62%; left: 10%; width: 51px; height: 38px; opacity: 0.25; }
.constellation-logo:nth-child(14) { top: 68%; left: 45%; width: 55px; height: 40px; opacity: 0.29; }
.constellation-logo:nth-child(15) { top: 72%; left: 75%; width: 53px; height: 39px; opacity: 0.27; }
.constellation-logo:nth-child(16) { top: 78%; left: 25%; width: 58px; height: 42px; opacity: 0.31; }
.constellation-logo:nth-child(17) { top: 15%; left: 85%; width: 50px; height: 36px; opacity: 0.26; }
.constellation-logo:nth-child(18) { top: 35%; left: 80%; width: 61px; height: 44px; opacity: 0.28; }
.constellation-logo:nth-child(19) { top: 55%; left: 85%; width: 49px; height: 35px; opacity: 0.30; }
.constellation-logo:nth-child(20) { top: 75%; left: 88%; width: 56px; height: 41px; opacity: 0.25; }
.constellation-logo:nth-child(21) { top: 82%; left: 60%; width: 52px; height: 38px; opacity: 0.24; }
.constellation-logo:nth-child(22) { top: 25%; left: 5%; width: 59px; height: 43px; opacity: 0.27; }
.constellation-logo:nth-child(23) { top: 45%; left: 8%; width: 54px; height: 39px; opacity: 0.26; }
.constellation-logo:nth-child(24) { top: 65%; left: 68%; width: 57px; height: 41px; opacity: 0.29; }
.constellation-logo:nth-child(25) { top: 85%; left: 35%; width: 53px; height: 38px; opacity: 0.25; }
.constellation-logo:nth-child(26) { top: 88%; left: 15%; width: 60px; height: 44px; opacity: 0.28; }

/* Mobile adjustments - position logos along left timeline line */
@media (max-width: 767px) {
  .client-logos-constellation {
    /* Position centered on the timeline line */
    position: absolute;
    top: 0;
    left: calc(var(--spacing-md) - 6px); /* Match timeline line position */
    transform: translateX(-50%);
    width: 100px; /* Wide enough for readable logos */
    height: 100%;
    pointer-events: none;
    z-index: 0; /* Behind content */
  }

  /* Make logos readable size along the line */
  .constellation-logo {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 65px !important;
    height: 48px !important;
    opacity: 0.15 !important; /* Darker for better visibility */
    filter: grayscale(0.9) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  /* Stack logos vertically along the entire timeline */
  .constellation-logo:nth-child(1) { top: 0% !important; }
  .constellation-logo:nth-child(2) { top: 4% !important; }
  .constellation-logo:nth-child(3) { top: 8% !important; }
  .constellation-logo:nth-child(4) { top: 12% !important; }
  .constellation-logo:nth-child(5) { top: 16% !important; }
  .constellation-logo:nth-child(6) { top: 20% !important; }
  .constellation-logo:nth-child(7) { top: 24% !important; }
  .constellation-logo:nth-child(8) { top: 28% !important; }
  .constellation-logo:nth-child(9) { top: 32% !important; }
  .constellation-logo:nth-child(10) { top: 36% !important; }
  .constellation-logo:nth-child(11) { top: 40% !important; }
  .constellation-logo:nth-child(12) { top: 44% !important; }
  .constellation-logo:nth-child(13) { top: 48% !important; }
  .constellation-logo:nth-child(14) { top: 52% !important; }
  .constellation-logo:nth-child(15) { top: 56% !important; }
  .constellation-logo:nth-child(16) { top: 60% !important; }
  .constellation-logo:nth-child(17) { top: 64% !important; }
  .constellation-logo:nth-child(18) { top: 68% !important; }
  .constellation-logo:nth-child(19) { top: 72% !important; }
  .constellation-logo:nth-child(20) { top: 76% !important; }
  .constellation-logo:nth-child(21) { top: 80% !important; }
  .constellation-logo:nth-child(22) { top: 84% !important; }
  .constellation-logo:nth-child(23) { top: 88% !important; }
  .constellation-logo:nth-child(24) { top: 92% !important; }
  .constellation-logo:nth-child(25) { top: 96% !important; }

  /* Hide the 26th logo to keep it at 25 */
  .constellation-logo:nth-child(26) {
    display: none !important;
  }
}

/* Performance: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .constellation-logo {
    transition: none;
  }
}