/* ============================================================
   Experience snapshots (logo icons)
   ============================================================ */

/* Layout: put logo on the right side of each experience card.
   The timeline dot stays where it is (left).
*/

.exp-item {
  padding-left: 3rem; /* keep existing timeline spacing */
  padding-right: 4.5rem; /* room for right-side logo */
  position: relative;
}

.exp-snapshot {
  position: absolute;
  right: 0.95rem;
  top: 0.6rem;
  width: 120px;
  height: 120px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,229,255,0.35);
  background: rgba(3,3,8,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
  box-shadow: 0 0 0 rgba(0,229,255,0);
}

.exp-snapshot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(1.1) contrast(1.05);
  transition: transform .25s var(--ease-out), filter .25s var(--ease-out);
}

.exp-item:hover .exp-snapshot {
  transform: translateX(4px) scale(1.08);
  border-color: rgba(0,229,255,0.7);
  box-shadow:
    0 0 18px rgba(0,229,255,0.35),
    0 0 34px rgba(168,85,247,0.18);
}

.exp-item:hover .exp-snapshot img {
  filter: saturate(1.3) contrast(1.1);
}

@media (max-width: 768px) {
  .exp-item {
    padding-right: 1rem;
  }
  .exp-snapshot {
    position: static;
    width: 96px;
    height: 96px;
    margin: 1rem auto 0;
    right: auto;
    top: auto;
  }
}