/* Texte cinétique (« Vitrine & Commande », « Design & Code ») : glisse et penche avec le défilement (motion.js). */

/* ---------- Texte cinétique : deux lignes géantes qui glissent en sens contraire au défilement ---------- */
.kinetic {
  position: relative;
  padding: 96px 0 104px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.kinetic-row {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  font: 900 clamp(5.875rem, 0.5rem + 11.44vw, 14.25rem) / 0.9 var(--sans);
  letter-spacing: -0.05em;
  transform: translate3d(var(--x, 0px), 0, 0);
  will-change: transform;
}
.kinetic-row-2 {
  margin-top: 6vw;
}
.kinetic-amp {
  margin: 0 0.16em;
  font-size: 0.32em;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--line);
}
/* La liste déborde vers le bas sans grandir la ligne, comme une légende accrochée au mot. */
.kinetic-list {
  align-self: flex-start;
  height: 0;
  margin-top: -0.02em;
  width: 253px;
  margin-left: 7vw;
  text-align: right;
  letter-spacing: 0;
}
.kinetic-list .mono {
  display: inline-block;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.2em;
  color: var(--ink-2);
}
.kinetic-list li {
  font: 700 20px / 28px var(--sans);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.kinetic-list li + li {
  margin-top: 8px;
}
.kinetic-expertise {
  display: none;
}
@media (max-width: 767px) {
  .kinetic {
    padding: 56px 0 64px;
  }
  .kinetic-row {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 0 var(--edge);
    font-size: clamp(3.75rem, 0.5rem + 16.45vw, 8.375rem);
    letter-spacing: -0.05em;
  }
  .kinetic-row .kinetic-word:last-of-type {
    align-self: flex-end;
  }
  .kinetic-amp {
    align-self: center;
    margin: 0.1em 0;
    font-size: 0.4em;
  }
  .kinetic-list,
  .kinetic-row-2 {
    display: none;
  }
  .kinetic-expertise {
    display: block;
    margin-top: 72px;
    padding: 0 24px;
  }
  .kinetic-expertise .mono {
    letter-spacing: 0.3em;
    color: var(--ink-2);
  }
  .kinetic-expertise ul {
    margin-top: 24px;
  }
  .kinetic-expertise li {
    position: relative;
    padding-left: 26px;
    font: 500 18px / 28px var(--sans);
    letter-spacing: -0.025em;
    color: var(--ink-2);
  }
  .kinetic-expertise li + li {
    margin-top: 16px;
  }
  .kinetic-expertise li::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ink-3);
  }
}

/* ---------- Animations (--x et --skew posés par motion.js ; rien ne bouge sans .has-motion) ---------- */
.has-motion .kinetic-row {
  transform: translate3d(var(--x, 0px), 0, 0) skewX(var(--skew, 0deg));
}