:root {
  --green: #00ff41;
  --green-dim: #00cc33;
  --green-dark: #003b00;
  --green-glow: rgba(0, 255, 65, 0.15);
  --bg: #000000;
  --card-bg: rgba(0, 10, 0, 0.85);
  --border: rgba(0, 255, 65, 0.3);
}


/* ─────────────────────────────────────────
   WORK EXPERIENCE MARQUEE
───────────────────────────────────────── */
.work-exp{
  position: relative;
  touch-action:pan-y;
  margin-top:30px;
  margin-bottom:15px;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    linear-gradient(
      180deg,
      rgba(0,255,65,.03),
      rgba(0,0,0,.35)
    );
  padding: 18px 0;
  box-shadow:
    0 0 20px rgba(0,255,65,.05),
    inset 0 0 25px rgba(0,255,65,.03);
}
/* fade gauche/droite */
.work-exp::before,
.work-exp::after{
  content:'';
  position:absolute;
  top:0;
  width:80px;
  height:100%;
  z-index:2;
  pointer-events:none;
}
.work-exp::before{
  left:0;
  background:linear-gradient(
    to right,
    #000 0%,
    transparent 100%
  );
}
.work-exp::after{
  right:0;
  background:linear-gradient(
    to left,
    #000 0%,
    transparent 100%
  );
}
.work-track{
  display:flex;
  touch-action:pan-y;
  width:max-content;
  will-change: transform;
  cursor: grab;
}
.work-track:active{
  cursor: grabbing;
}
.work-exp:hover .work-track{
  animation-play-state: paused;
}
.work-item{
  flex-shrink:0;
  user-select: none;
  display:flex;
  align-items:center;
  gap:12px;
  margin-right:18px;
  padding:12px 18px;
  border:1px solid rgba(0,255,65,.15);
  background:rgba(0,255,65,.03);
  color:var(--green-dim);
  font-size:.82rem;
  letter-spacing:.08em;
  transition:
    transform .2s,
    border-color .2s,
    box-shadow .2s;
}
.work-item:hover{
  transform:translateY(-2px);
  border-color:var(--green);
  color:var(--green);
  box-shadow:0 0 14px rgba(0,255,65,.15);
}
.work-role{
  color:var(--green);
  text-shadow:0 0 8px rgba(0,255,65,.4);
}
.work-sep{
  opacity:.3;
}
.work-date{
  color:#4d704d;
}
.work-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin-right:4px;
  flex-shrink:0;
}
.work-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:
    brightness(0)
    saturate(100%)
    invert(72%)
    sepia(99%)
    saturate(1665%)
    hue-rotate(77deg)
    brightness(108%)
    contrast(125%);
}
.work-item:hover .work-icon{
  border-color:var(--green);
  box-shadow:0 0 12px rgba(0,255,65,.2);
  transform:scale(1.06);
}
.work-item:hover .work-icon img{
  opacity:1;
  filter:
    brightness(0)
    saturate(100%)
    invert(88%)
    sepia(100%)
    saturate(1842%)
    hue-rotate(65deg)
    brightness(112%)
    contrast(130%)
    drop-shadow(0 0 6px #00ff41);
}
@keyframes work-scroll{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-50%);
  }
}