@property --colorPrimary {
  syntax: "<color>";
  initial-value: magenta;
  inherits: false;
}

@property --stop {
  syntax: "<percentage>";
  initial-value: 50%;
  inherits: false;
}

body {
  /* might wanna RE-declare values as a fallback, but not necessary in supportin browsers. */
  --colorPrimary: magenta;
  --stop: 50%;

  display: grid;
  grid-template-columns: 50% 50%;
  margin: 0;
}

div {
  height: 100vh;
  transition: --stop 0.5s, --colorPrimary 0.2s;
  background: linear-gradient(
    to bottom,
    black var(--stop),
    var(--colorPrimary)
  );
}
div:hover {
  --colorPrimary: red;
  --stop: 80%;
}