/* Kohdistus — three process plates land misregistered and converge.
   The CMY inks are content, not palette: they are what the page is about.
   Subtractive overlap via mix-blend-mode: multiply, grain via feTurbulence. */

.sep {
  --cyan:    #00AEEF;
  --magenta: #EC008C;
  --yellow:  #FFE800;
  --reg: 100;              /* misregistration, 100 → 0 as you scroll */
  position: relative;
}
.js .sep-track { height: 300vh; }

.sep-stage {
  position: relative;
  height: 78vh;
  display: grid; place-items: center;
  overflow: hidden;
  border-block: 1px solid var(--rail);
  background: var(--lit);
}
.js .sep-stage { position: sticky; top: 0; height: 100vh; }

.plates {
  position: relative;
  display: grid;
  isolation: isolate;      /* keep the multiply blending inside the stack */
}
.plate {
  grid-area: 1 / 1;
  mix-blend-mode: multiply;
  font: 800 clamp(3.5rem, 19vw, 21rem)/0.9 var(--display);
  letter-spacing: -0.05em;
  will-change: transform;
}
/* Each plate drifts on its own vector; --reg collapses all three to zero. */
.pc { color: var(--cyan);    transform: translate(calc(var(--reg) * -0.30px), calc(var(--reg) * -0.16px)); }
.pm { color: var(--magenta); transform: translate(calc(var(--reg) *  0.26px), calc(var(--reg) * -0.09px)); }
.py { color: var(--yellow);  transform: translate(calc(var(--reg) *  0.05px), calc(var(--reg) *  0.22px)); }

.grain {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  place-self: stretch;
  mix-blend-mode: multiply;
  opacity: .18;
  pointer-events: none;
}

.regmarks { position: absolute; inset: 0; place-self: stretch; pointer-events: none; }
.regmark { position: absolute; width: 2.1rem; height: 2.1rem; }
.rm-tl { top: 1.6rem; left: 1.6rem; }
.rm-tr { top: 1.6rem; right: 1.6rem; }
.rm-bl { bottom: 1.6rem; left: 1.6rem; }
.rm-br { bottom: 1.6rem; right: 1.6rem; }
.regmark line, .regmark circle {
  stroke: color-mix(in srgb, var(--ink) 42%, transparent);
  stroke-width: 1.5; fill: none;
}

.sep-readout {
  position: absolute; left: var(--gut); bottom: 1.6rem;
  color: var(--dim);
  display: flex; gap: .6rem;
}
.sep-num { color: var(--brass); }
.sep-num::after { counter-reset: r var(--reg, 0); content: counter(r) " px"; }
.calm .sep-readout { display: none; }

/* ── channel key ──────────────────────────────────────────────────── */

.channels {
  list-style: none; margin: 0;
  padding: 9vh var(--gut) 2vh;
  display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  max-width: 62rem;
}
.channel { display: flex; align-items: baseline; gap: .8rem; }
.swatch {
  flex: 0 0 auto; width: .85rem; height: .85rem; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
}
.sw-c { background: #00AEEF; }
.sw-m { background: #EC008C; }
.sw-y { background: #FFE800; }
.channel-name { font: 400 .98rem/1.5 var(--body); color: color-mix(in srgb, var(--ink) 80%, var(--ground)); }

@media (max-width: 560px) {
  .js .sep-track { height: 240vh; }
}

/* Motion off: plates land registered, which is the resting truth. */
.calm .sep { --reg: 0; }