/* divider.css — page 8 upper half, geometric divider (js/sections/divider.js). */

.divider {
  position: relative;
  display: grid;
  gap: 22px;
  padding: clamp(60px, 12vh, 140px) 0;
  overflow: hidden;
}

.divider__row {
  height: 16px;
}

.divider__row--1 {
  margin-left: -120px;
}

.divider__track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  will-change: transform;
}

/* parallelogram: skewed box, breathing via --sx; the band counter-scales so
   its width stays constant however the shape stretches */
.divider__shape {
  position: relative;
  flex: none;
  height: 14px;
  background: var(--fg);
  transform: skewX(-38deg) scaleX(var(--sx, 1));
  transform-origin: 0 50%;
  cursor: crosshair;
}

/* a taller invisible hit area so the thin shapes are easy to hover */
.divider__shape::before {
  content: '';
  position: absolute;
  inset: -14px 0;
}

.divider__band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 22px;
  margin-left: -4px;
  background: linear-gradient(90deg, var(--c-m) 0 16.6%, var(--c-r) 0 33.3%, var(--c-y) 0 50%, var(--c-g) 0 66.6%, var(--c-c) 0 83.3%, var(--c-b) 0);
  transform: scaleX(calc(1 / var(--sx, 1)));
  transform-origin: 0 50%;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity 0.25s ease, clip-path 0.45s var(--ease-brand);
  mix-blend-mode: normal;
}

.divider__shape.is-lit .divider__band {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

.divider__dot {
  flex: none;
  width: 14px;
  height: 14px;
  margin-right: 90px;
  border-radius: 50%;
  background: var(--fg);
}